User Insights from Paper Prototyping

• Users didn’t know that they can share their characters because they didn’t know they had to tab it for a long time to share.
• The character looks lonely and sad so it is not easy to get the weather information quickly. (character should reflect the weather condition)
• Only temp is shown – hard to know the weather immediately and C or F should be next to temp numbers.

Project 3 concept:

A weather app. Based on the weather condition and outfit preference, AI is generating illustrative character which recommends what to wear each day.

App Map

 

Wireframe

 

 

 

The feedback we got from digital prototyping

1. different button systems!! consistency!!
2. index page, “distance remaining”
3. car finding page, a. beep button pop back automatically. b. the arrow at the map, the street name? gear icon and car icon?
4. safety tab, add the window in the switch
5. think about the condition to trigger different states / the technique support
6. Add text under the icon in the fixed bottom tab, the icon of setting looks like filter
7. preference page, add more text to explain detecting process
8. restricted mode, the button is not necessary?
9. air-conditioner, hierarchy issue, adjust by seats,
10. media, the sound balance, research

Project3 Add-on   Apple Watch

Notes for apple watch human interface guideline

navigation: hierarchical/ page-based. Avoid creating hierarchies deeper than 2-3 levels.

Do not use long-press gestures in interfaces that have Force Touch menus.

The system font specifically omits the ultra light and thin weights below 20 points because they are not legible at small sizes.

Always include a Cancel button.

Do not use black for your icon’s background.

Prefer buttons that span the width of the screen.

 

App map

Wireframe and Visual design

 

The feedback we got from testing

Digital Prototype

We used Sketch to create a digital prototype.

 

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.

 

Digital Wireframes:

https://marvelapp.com/project/2875806/

 

What we changed:

• Made text larger
• Add a way to input location manually
• Link to voting once invite is sent
• A way to save starting locations
• Access to recent locations
• Price point on voting screen without needing to expand
• Added back buttons where needed
• Created new screen states

Visual Design:

Prototype

WhatTheFont is an app that allows you take a picture of any font (on-screen or printed) and find similar fonts. It is meant to identify the exact font but from my experience, I find that this is almost never the case. However, I still find it useful for when I see a font style that I like and want to match in my own work. The UI is very simple: all you have to do is take a picture of the font you want to identify and the app will automatically detect any text in the image. If it does not detect the word that you want to identify, there is also the option of manually selecting it. The app will then generate a list of similar fonts- usually, it will have the same word as photographed for a direct comparison but if it cannot identify the word then it will use “the quick brown fox.”

Feedback from last week:
1.Two tabs are super weird. There should be a more convenient way for users to search all the archive.
>We redesign the tabs into Meetings / Saved / Profile.

2.The keyword tracking feedback on the record page looks like a tabbable link.
>Moving texts floating from the bottom to imply the users that the machine is listening.

3.Users should be able to customize the keyword. Scale the text when it is important, delete it when it is irrelevant, and type in keywords machine did not get.
> When hold on the text, it turned into pink and then enter the edit mode.