Week 15 – Franky Wang (Final Post)

+++ Group work with Yin Hu +++

CAREMOTE – App design for smart cars

+++ The final version of iOS app +++

Main updates:

1 – Display the car status on the main page, deleted the unnecessary status information from the safety page.

2 – Changed the visual style of the map view. Included the glowing visual effects of the route for a better view.

3 – In the machine learning process, updated the visual design of progression into step indications.

4 – Deleted the entire switch of the security mode. (Change the name from restricted mode to the security mode.)

5 – Added the name of icons under the navigation bar.

+++ The final version of watch app +++

Main updates:

1 – Changed the information layouts on the index page, increase the font size of the percentage and zoom out the remaining distance.

2 – Deleted the notification page and replace with the setting page for users to customize the order of pages based on their own preferences.

Visual Effects

#Thursdayapp 02 – Franky Wang


Sway is a meditation app that helps people meditate and move mindfully so that they can get rid of distracting thoughts.

Sway’s interface includes fuzzy pictures with calming colors, and they give straightforward instructions. For an app that’s all about the sound and feeling, they still accomplish a lot with their mobile app UI design as well.

Sway is based on ‘interactive meditation’, a new approach to meditation which shows similar results to ‘guided meditation’ but is even more effective in noisy and busy environments. Its scientific validation shows that engaging in interactive meditation daily may have long-term benefits to your attention levels.

Sway uses a new scientific approach to mental wellbeing called Interactive Meditation. Based on the ancient learnings of Tai Chi and mindfulness, Interactive Meditation uses a patented ‘attention feedback loop’ and interactive technology to detect human voluntary attention through slow, continuous and gentle movement. It has been scientifically validated to provide similar results to existing forms of modern meditation such as ‘guided meditation’, but has been proven to work better in active and noisy environments.

Week 14 – Franky Wang

+++ Group work with Yin Hu +++

Add-on design for the car app

For the assistance purpose, the add-on design for the car app is based on the criterion of efficient and easy-operated. So we cut off some functions from the phone app and simplified the most crucial ones.

Because of the limited size of watch surface, we minimized the numbers of icons or buttons, to make the function being switched easier, we expanded all the functions into the same level with 7 pages. By swiping left or right, users can switch to all the functions without tapping any buttons.


Visual Design

Week 13 – Franky Wang

App design for smart cars

+++ Group work with Yin Hu +++

The updated version of the app on Apr 26th

+++User testing on digital prototype+++

In this week, we made the following updates:

  1. Slightly differentiate the background color of the bottom navigation bar.
  2. Change the temperature and humidity into the remaining gas status, due to its necessity, and canceled all the interactive elements on the index page.

Changed visual style of the map and deleted the text indication for car beep.

  1. Deleted the rating criterion on car safety,
  2. Changed the style of the functional button, since they are not switched on/off buttons, there is no need to indicate with red lights.

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