Best Interaction and Interface Design for Beijing's UXPA APP Camp

Another summer program I have attended during the summer of 2016 was the UXPA App Camp, which was a 10-day course related to graphical interface design and user experience, with a daily lecture from many experts who work in the design sector of large-scale tech-oriented companies in China, such as LeTV.

The scale of the class is quite small. We were divided into groups of 4, and our task was to think of a product that can be controlled using a software application.

After some negotiation, we decided to create a smart fridge as our product, and users can use their mobile devices to control the fridge. Here's our brand name and logo:

In English, the first character means "fridge", and the second character means "connect", so the literal translation would be "fridge-connect".

Some of the major advantages of this app are:

1. Cooking recipe search engine

2. Dish suggestion based on personal diet and available foodstuffs in fridge

3. Daily special 4. Keep track of items in the fridge, and warn the user when something is about to become expire/lose freshness

5. Control and monitor temperature and moisture inside fridge

6. Online ingredient store - like eBay and Amazon, but it's just for buying raw food, from fruits to diary products. We also have a delivery service

7. Online step-by-step and video tutorials on how to cook certain dishes

8. More

Sorry that this flow chart is not available in English. I have designed this diagram to guide my app's interface design when it comes to programming.

In the following days, we "worked" together as a team - "worked" in quotation marks because I did at least 80% of all the work, from icon designs to coding the interface; from interface structure to our final presentation powerpoint. This is because my teammates were relatively inexperienced in terms of building apps, so I have to help them with their parts.

Another reason was that the app design did not necessarily have to be a real app that can run on an iPhone; it could simply be a set of fabricated screenshots made with Photoshop. However, I chose to challenge myself by actually creating the app, because I didn't know how to write an app for iOS and was excited to use this chance as an opportunity to explore iOS programming. This was a very tough decision, since it meant that I was the only person in my group who was capable to produce screenshots of the app we're designing together.

Learning how to program everyday after our class dismisses at 8:30pm was extremely tiring. I usually stayed up till 3'o clock in the morning to work on my app. The latest day was the day before our final presentation to the judges. I slept at 5:30am, when the sun has already risen.

For simplicity, I have copied the screenshot slides from the powerpoint. These are the pages / views I made for the app, and most of the buttons and functions actually work, so that I could do a demo during the presentation, and that requires more programming work.

Login / Signup page:

"My Fridge":

This set of screenshots showcase a combination of three functions. The first screenshot is a sample view of all the available food in the fridge, and the second & third screenshots are how it looks like when the user swipes and deletes an item in the list -- in other words, the user consumes this foodstuff. If you look closely, you will also realize that the foodstuffs are arranged by their category. For example, vegetables and fruits are in one category, whereas meat is separately grouped.

The fourth screenshot down on the bottom left corner is how it looks like when you go shopping for food or raw ingredients of food. Different types of foodstuffs are rated out of 5 and you can "add to cart" to buy them. In theory, they will be delivered to your house while they're still fresh.

The fifth and sixth screenshots demonstrate the process of one or more items into your fridge. The user can press the plus button on the top right corner to bring up the Add menu, and can tick the foodstuffs that he/she would like to add to the fridge. The search bar also works. After pressing OK, the new foodstuffs will appear in the list.

Daily Special & Recipe Lookup:

This is a demo view of the "Recipe" tab bar. In this page, the user can view the "daily special", which gives you the step-by-step guide to cooking a certain dish. The user can also check the history of previous "daily special"s, or go to the search engine to manually look up a particular recipe and procedure for cooking any dish.

Fridge Control / Monitor:

This page is a settings page for your fridges and your account. You may adjust the temperature, moisture and voice detection of the fridges. Voice detection means that you can say commands to the fridge, such as "open", and the fridge will open automatically. It is extremely convenient in situation where your hands are holding things and you can't open the door with your hand.

You can also set whether you would like to receive a push notification before the time of every meal with suggested dishes and their recipes based on the available foodstuffs in your fridge (fourth picture). You can adjust the time of every meal, or switch off these notifications. The app is smart, so it only pushes notifications to your when it detects that you are at home.

Me:

In these pages, you can manage your "fridge-connect" account. For example, you can associate third-party accounts, change password, logout, check your favorites (such as recipes that you liked, food you usually buy in the app's built-in online store, etc), VIP status, wallet, shopping cart, purchase history, and trace the location of your foodstuffs that are currently being delivered. By logging out, you will be redirected to the login page.

Discover:

This section of the app is where users can interact with each other, send questions and suggestions to us, and some miscellaneous functions. For example, the second screenshot shows a post related to bread, and users and post and share their own experiences with this type of food. You can even press a like on other people's posts. Due to time constraint, I wasn't able to finish the function and views for every single button, but it gives you an overall idea of what's included here.

On the final day, we presented quite well, and got third place for group award. Due to the uniqueness of this design, I was personally awarded "individual best interaction design", given to two participants of this camp in total. This camp is closely related to me, because as a programmer, I built many apps in the past, and this camp allowed me to design my apps from the user’s perspective for the best interactive experience, and thus allow my future apps to look more professional and comfortable to operate.

Due to the interesting activities I've attended in this summer, my school, BCIS, has also asked me to write a post on my summer experience, which I have written in both English and Chinese. It was posted in BCIS NEWS, the official news department for the school. You can find it here. I'm proud of this so I strongly encourage you to check it out.

You can also visit this link to see UXPA's official post on the camp.

#Programming #Coding #App #Design