Week 12 – Franky Wang

App design for smart cars

+++ Group work with Yin Hu +++

The updated version of the app on Apr 19th

Main developments:

1 – All the visual design part finished, including the personal adjustments.

2 – Changed 3 icons of navigation bars to make functions more clearly indicated.

3 – Added monitor view on the alert view for users to check the status immediately.

4 – Simplified the adjustment column, combined the auto detection together with the manual settings.

5 – Deleted the timer setting.

Week 11 – Franky Wang

App design for smart cars

+++ Group work with Yin Hu +++

Insights from user test on Apr 5th

1 – The button patterns are kind of messed up. Currently, there’re 3 kinds of buttons: Navigation buttons, re-action(functional) buttons and function buttons. Some of them share the same shapes while some of them are differentiated in colors. A clearer rule should be designed for the better understanding of the operation.



2 – The two circles on the index page are not friendly to operate, especially due to their close distance which may cause mistouch.

3 – Detail problems like the hard understanding of seat operation, too many texts on a singer button, confusions of auto settings and manual settings… The detailed problems are shown on the corrected wireframe.

Updated app map:

Week 10 – Franky Wang

App design for smart cars

+++ Group work with Yin Hu +++

We are designing a mobile app to provide automatic remote service for cars that allow users to control their smart car accessories and stay informed about the vehicle conditions when they are not in the car cabin. Also, users can make simple adjustments to car functions from the app for better convenience. 

App MapWireframe

Week 9 – Franky Wang

App Design For Apple TV – Yumtube

Yumtube is a film app for Apple TV to recommend good movies, episodes, and documentaries about food for families. While users are watching videos, some food appeared in the movies will be highlighted and the recipes are provided by the app. Users can follow the recipe to cook dishes appeared in the movies. The target user will be the family group. Taking advantage of the big screen, the recipe can be displayed on the same screen along with the video play, which makes the experience to be shared by all the family members.

Insights from user test on Mar 15:

+++ Reconsider the category for the video on the index page.

The main operation on the index page will be swiping and clicking on the pad, so it is important to minimize the complexity of accessing the 2nd-grade menu. In this case, there’s no need to differentiate the categories of videos. Since the introduction is already included in the poster and 2nd-graded menu, there’s no need to figure out whether it’s a documentary or comedy on the index page. After all, they are all videos about food.

+++ The rating system is unnecessary in this app, simplify the using process.

The source of videos about food is limited. Unlike the other film app that recommends users according to the rates, Yumtube focuses more on the recipe content from the video, which makes the rating system less supportive to the user’ choice. And the process of rating on the remote control is not handy enough.

+++ List the concluded recipe at the beginning of the video instead of displaying it at the end.

Simplify the function for users who just want to read the recipe. They can reach all the recipes without watching the video, or have a basic impression of the video content.

Wireframe of the new version:

Visual design and prototype

Week 6 – Franky Wang

Notes from tvOS HIG:

+++Consider the distance between users and screens. 

The distance may not be a big deal on the mobile device due to the small size screen and hand gesture operation. But when things come to the full-size TV screen, things may be influenced by the font size, picture clarity or composition compacity, etc.

+++Shared experience

People often enjoy TV in a communal environment. Consider how the app can appeal to a group, as well as what happens if the user is a different person each time when the app is launched.

+++Parallax as the indication of focusing elements

Through image layering, transparency, scaling, and motion, parallax produces a 3D effect with a sense of realism and vitality.

+++Delay sign-in as long as possible. 

People often abandon apps when they are forced to sign in before doing anything useful. Give them a chance to fall in love with the app before making a commitment to it. Avoid unnecessary information data input.

App design for Apple TV

I’m creating an app for Apple TV to recommend good episode, movies and documentaries about food for families. When they are watching, some food appeared in the movies are highlighted while the recipes will be provided by the app. In this case, users can follow the recipe to cook dishes appeared in the movies. The target user will be the family group. Taking advantage of the big screen, the recipe can be displayed on the same screen while the movie is playing, which make the experience to be shared by all the family members.

tvOS App map

Wireframe of App

Week 4 – Franky Wang

User insights for the digital prototype on Feb 15th

1 – In the post page of dish categories, there is no need to separate posts into two parts of “all” and “following”. Because in the 3rd level page, users do not tend to figure out the differences according to their specific interests on uploaders. In this case, it is reasonable to list all the posts.

2 – Detail problems:

(A) The back button and edit button in the post preview page are repetitive, so I deleted the back button.

(B) The restaurant page will be more helpful if includes more information, like opening time, reservation status, etc.





3 – If possible, try to figure out more intelligent functions like employing automatic recommendations (according to previous searches), photo recognizing (for filling out information automatically) using AI or big data technology.

Week 4 – Franky Wang

#Thursdayapp – Moment

“Moment” is an invisible app that helps users to stay conscious of how much time they spend on their phones.

By giving its permission on detecting actions, positions and sending notifications, the APP automatically tracks the time user operates the phone. If users spend too much time on their phones, they can set daily limits on themselves and be notified when they go over. That becomes a good way to force themselves off the device when they are over their limits.

There are 3 main features of the APP. A big in-your-face number shows how much time you’ve spent on your phone today in terms of hours and minutes. This is what mainly gets measured and shows your focus. And the record part is differentiated by colors, which gives a rough impression on the level of using phones. Also, the Moment can collect data from other APPs, showing the time the user spent on different APPs, which gives them a clear awareness of them.

“moment app”的图片搜索结果     


Instead of judging user behaviors, the APP just simply shows the “truth”, that is, the exact how much time users are spending on their phones. Most people would be shocked by the statistic and records because they truly underestimated their time wasted on phones.

In this case, the APP “Moment” gives users a chance to rethink their relations with their mobile devices. It has a two-week course to fix the habits called “Phone Bootcamp”, and reform the way of using phones. Also, it has a function called “Daily Limits” which can be set as a hard limit. For users failed to hit the limit, they would be booted off.

Week 3 – Franky Wang

Learnings from paper prototyping

1 – The application should consistently keep focusing on its ease of use, which means minimizing its side functions other than the main feature. From 1.0 to 2.0 prototype, taking advice from user feedback, I cut off some complex steps of photo editing (which can be generated from other APPs) and corrected imprecise descriptions for the better understanding of terms in the APP.

2 – Every button/icon should clearly show its affordance. Some details like terms of “save” and “like” would somehow lead to different subsequences. When it comes to icons, the non-verbal indications from the figure need second consideration.

3 – When a specific function is set up, it takes time to reconsider the form of inputting/outputting information. For example, in the post filter page of the APP, there’s a slide bar managing the distance range of the restaurant. But it might not be user-friendly on a mobile display, because of the limited touching area. According to the user insights, it may become better if the form is changed into tapping selections or typing numbers.

Interactive prototype

Week 2 – Franky Wang

User insights from paper prototyping on Feb 1st

1 – The order of functions after logging in the APP

The APP is originally designed to immediately enter the page of capturing dish photo after logging in. Some users think it’s kind of inconsiderable for a dish recommendation APP to start camera function at the very beginning (Usually filter application does). It might be more reasonable to enter the “Expo” page, where dish photos are displayed when users first enter the APP. Then they could decide whether touching the camera button to upload photos, or just having a random glance.


Currently, the camera is designed as the index page, which might be better if replaced by the photo display page.




2 – Imprecision of categorizing in filter descriptions

In the filter page where users select choices to screen out their favorite kinds of dishes, the users gave feedback that the descriptions are not precise, which causes misunderstanding.

For example, the description “categories” is easily interpreted as terms like “breakfast”, “dessert”, “drink”… On the other hand, if the dish is categorized by cultures and countries, it would be better to use the word “Nationality”. And the description of calories is also not reasonable to simply use the term “high” or “low” without the specific number of the range. These are detailed problems but still worth considering.



3 – The unreasonable settings of “All Posts”

In the “Expo” page (currently defined as the index page), I created a segmented bar and separated the posts into the “all” tab, which includes all the current users’ photo upload, and the “friends” tab, which only shows the photos of connected users. However, there would be a huge amount of information refresh for displaying posts from millions of online users, which would definitely cause a mass flow and challenge the capability of the backend system. Also, users do not tend to see the photos which have little connections to them.

It might be better if the first tab is displayed based on location, showing the users the photos from nearby restaurants. The location-based recommendation could be more practical and build up the solid connections between users and information in this case.

Wireframe 2.0

APP Map 2.0