portfolio-wen
TRANSCRIPT
UXPortfolio
Wen G
This portfolio is a selection of visual, UX-related deliverables I recently produced. For more related documents, please contact me directly
860-821-9055 | [email protected]
Table Of Contents
Persona
Storyboard
User Flow
Task Flow
Information Architectures
Wireframe / Mock-Up
2
4
5
6
7
8
1
2
Persona
Sex: FemaleAge: 23 Occupation: Graduate StudentMajor: Civil EngineeringHobby: Music, Reading, YogaDream: Have a clothing line of her ownRole model: Victoria BeckhamAbout: Mary likes to hang out with friends but she usually finds herself lazy to contact her friends, Her college friends and high school friends who used to be really close to her slowly drift apart these days. She doesn’t know what to do.
• know who to contact during which day• categorize her friends• track her social activity so she can have
a good sense of who she hasn’t been in touch with for a long time
Shin
“As a graduate student, I want to always keep connected with my friends, so that I can stay connected and be really happy.”
Sex: MaleAge: 28Occupation: Software EngineerMajor: Computer ScienceHobby: Programming, ReadingDream: Have a Tech company of his ownRole model: Elon MaskAbout: After got married three years ago, Will only hangs out with his wife and a couple of their mutual close friends. He finds himself happier when connecting with others, but he s having a hard time track who should he contact. He also know that having a lot of connections will help him success, especially when he wants to build his own Tech company, but he has a hard time remembering his contact. He only can think of them when he needs them. He know he has to change, but he feels that he needs some help.
• categorize his friends• send him reminders of big date
(holidays, birthdays…)• track his social activity, show the
connection progress so that he knows he is on his way to success
As a programmer, I want to always stay in touch with my contacts in my network, so that they will like to hang out with me and lead to growth of my connections and success of form the right team to start my own Tech company.”
Will
“Sex: FemaleAge: 32Occupation: HR ProfessionalMajor: Human Resource ManagementHobby: Social, Tennis Dream: Meet her soul-mate and live happily ever afterRole model: unknownAbout: Mary socials a lot during and after work. At work, she deals with people from all departments, and after work, she likes to hang out with friends at bar. As Mary is getting busier and busier at her social activities, she finds her energy is almost used up, but she is not focus on the important ones which could lead to her dream coming true. She would like to golfer out what people should she keep hang out with, and, to be crucial, cut off someone who is not that important to her and drain her energy.
• friends list with importance• track who she benefit a lot from (makes
she happy, good for her career, always introduce her to cool new friends…)
• reminder of having some alone time
As a HR professional who enjoys social activities, I want to limited my contacts, so that I have more energy for the ones that are really important.”
Mary
“
Persona for CList. CList is a mobile application, which helps users manage their contacts list and social activities, thus provide them better connections with their contacts.
3
Persona
Gufeng Chen‘As a returning user of NTD Television, I want to browse global news on my new smartphone, so that I can stay on top of breaking news’
Key goals We must
We must neverBehaviours
• Get to know breaking news asap• Get to know a lot of global news
• Read first thing in the morning• Check constantly on news
through of the day• Only interested in global news• Have fat finger problem
• Send him reminder if there is breaking news
• Make the fonts, pictures and buttons easy to read and use
• Provide him with the language (maybe Chinese) in his preference
• Bother him with the entertainment news reminder
• make the task flow really hard to pick up (consider he is a new smartphone user)
Linna Zhang‘As a fashion designer, I want to browse fashion related news on NTD mobile site, so that I know the newest trend in my career’
Key goals We must
We must neverBehaviours
• Get fashion news on time• Finds the latest trends
• Check fashion news when she have spare time
• Read hours for related news to catch the newest trend
• Prefer pretty pictures than text
• Let the user choose the view of the content (maybe she wants to see picture view over list view)
• Provide her with the most related content after every article
• Only have low-res or small pictures in every article (fashion and entertainment articles especially)
Peter Wei‘As a sales representative in car business, I want to read entertaining news on NTD on my cell, so that I can kill time during the time when there is no customer’
Key goals We must
We must neverBehaviours
• Kill time• Have fun
• Browse when he has time to kill• Stop browsing when there’s
customer and want to go back to where he was after customer leave
• Let him choose whether he wants to have reminder, which could interrupt his work
• List all the related news together• Remember where was he and
when he open it up, start from there
• Let him to find where was he himself
• Not track which article has already be opened by him
Persona for NTD News Mobile Application. NTD News Mobile Application is the mobile version for their website, NTDTV.com. Serving more than 100 million potential viewers, NTD brings truthful and uncensored information into and out of China.
4
Storyboard
Storyboard for CList. Storyboard for NTD News Mobile Application.
5
User Flow
Scenario 1: Tuesday 08:10amMr Chen got up at 6am. After the morning exercises, and a hearty breakfast, Mr Chen sit down in his favorite armchair. “I should check the news,” Chen said to himself in the sunshine, “I wonder what’s happening with the world today”.
As a returning user of NTD Television, I want to browse global news on my new smartphone, so that I can stay on top of breaking news
It’s a nice day today, what’s happening around the globe?
Home
News Shows
U.S.
World
Politics
Health
Entertainment
Fashion
Travel
What’s Happening
Interviews
Educational
Special Topic
Entertainment
Contact Us
Article PageNews List
Notification for Breaking News1
2
4
3
5
6
1
2
Let me check out the news section.
“News” is probably too broad of a topic. Let me narrow it down to “World News”.
I only want to look into political news actually. Here is a politics link
Oh nice! This is just what I need now!
There is another interesting title in the related news section, let me check it out.
This title looks really interesting, let me check it out.
Scenario 2: Tuesday 07:30 amMr Chen sat down for breakfast as usual. His phone ringed with a notification. He glanced at the notification, “Oh no! One of the plane from Asian Air just got missing! “ Holding a bagel in his left hand, instead out reaching for the bettered knife, he reached his phone and opened NTD app immediately, “I have to check this breaking news out!”
This is HUGE! I have to see it!
Here are some other news related to this breaking news, let me check it out.
User Flow for NTD News Mobile Application.
6
Task Flow
Task Flow for CList.
Phone Screen
Notification
Application Botton
Application Welcome Screen
(background loading)
Home (with contacts
list)
Contact list of who need to be
connected
Contact Detail Social Activity Data (for all
contacts)
Send Email
Open Email with contact’s email
address
Send TXT messege
Open TXT message with
contact’s phone number
Send Gift
User Input Note
Call
Call contact’s phone number
Instant Messege
Open User Assigned IM
App
Meet
Sort
User Input Note
User chooses to se
nd email
Use
r cho
oses
a c
onta
ct
User c
hoos
es to
send
text
messa
ge
User
cho
oses
to se
nd a
phy
sical
gift
Use
r cho
oses
to c
all User chooses to chat
user chooses to meet physically
Database
Writ
es D
ATE
and
ACTI
VITY
to
Tracking Social Activity Data
Shows on
User chooses to see his/her social activity
Shows on
Social Activity Data (for this
contacts)
User chooses to see his/her social activity with this contact Show
s on
After saw the activity, user starts to contact his/her friends
After saw the activity, user starts to contact his/her friends
User opens a
pp
User opens app
User
open
s noti
ficati
on pa
ge
Birthdays contacts list
Holidayscontacts list
Important contacts list
contacts list ofWho haven’t
been contact in a long time
User chooses a contact
User chooses a contact
User chooses a contact
User chooses a contact
Logged in? yes
log in page
no
success?
yes
no
registered?
yes
register page no
success?
yes
no
Add/Edit contact page
by last contact date, importance, alphabetical, contact frequency, category
adds a contact
edits a contact
finish add/edit
Legends
Notification System
Login System
Add/Edit System
Main Functions (connect to contacts)
Performance Tracking System
Database System
Application Start Point
7
Information Architecture
Home
News Shows
U.S. World Politics Health Entertainment Fashion Travel What’s Happening Interviews Educational Special TopicEntertainment
Contact UsAbout Us
Information Architecture for NTD News Mobile Application. (Done by Card Sorting from real users)
8Wireframe for NTD News Mobile Application.
Wireframe (sketch)
9
Wireframe / Mock-up
Logo
Importance:
Category: Family
Lucy
Last Connection: 1 month 2 days ago (07/05/2014)Visited Lucy, had a great time!
Contact Info
Address: 24 Lines Ave, New York, NY
Phone: 917-234-0374
Email: [email protected]
EDIT
Delete
Logo Sort By
Janna 01/05/2014
Grace 02/03/2014
Ann 02/04/2014
Abbey 03/12/2014
Catharine 04/15/2014
Racheal 04/18/2014
Abbey 06/20/2014
Lucy 07/05/2014
Baldwin 07/15/2014
Mary 09/ 14/2014
Last Connection: 1 month 2 days ago (07/05/2014)Visited Lucy, had a great time!
EDIT
Week Month Year All
Logo
Contact Info
Address: 24 Lines Ave, New York, NY
Phone: 917-234-0374
Email: [email protected]
Delete
Logo Sort By
Janna 01/05/2014
Grace 02/03/2014
Ann 02/04/2014
Abbey 03/12/2014
Catharine 04/15/2014
Racheal 04/18/2014
Abbey 06/20/2014
Lucy 07/05/2014
Baldwin 07/15/2014
Mary 09/ 14/2014
Category
Contact Frequency
Alphabetical
Importance
Last Contact date
Logo Sort By
Janna 01/05/2014
Grace 02/03/2014
Ann 02/04/2014
Abbey 03/12/2014
Catharine 04/15/2014
Racheal 04/18/2014
Abbey 06/20/2014
Lucy 07/05/2014
Baldwin 07/15/2014
Mary 09/ 14/2014
Logout (User)
Track My Social Activity
Big Dates
Contacts Category
All Contacts
Last Connection: 1 month 2 days ago (07/05/2014)Visited Lucy, had a great time!
Logo EDIT
Week Month Year All
12/31/2013Chat
01/11/2014Send a gift
03/05/2014Visited
07/03/2014Call
07/05/2014Visited Lucy, had a great time!
Contact Info
Address: 24 Lines Ave, New York, NY
Phone: 917-234-0374
Email: [email protected]
Delete
Logo EDIT
Contact Info
Address: 24 Lines Ave, New York, NY
Phone: 917-234-0374
Email: [email protected]
Delete
SubmitCancel
08/07/2014
Send Gift to Lucy
Date
Title
Note Enter extra note here for your own reference
Last Connection: 1 month 2 days ago (07/05/2014)Visited Lucy, had a great time!
Logo EDIT
Week Month Year All
07/05/2014Visited Lucy, had a great time!
Contact Info
Address: 24 Lines Ave, New York, NY
Phone: 917-234-0374
Email: [email protected]
Delete
08/07/2014
Send Gift to Lucy
Date
Title
SubmitDelete
Note Enter extra note here for your own reference
Logo
Importance:
Category: Family
Lucy
Last Connection: 1 month 2 days ago (07/05/2014)Visited Lucy, had a great time!
Contact Info
Address: 24 Lines Ave, New York, NY
Phone: 917-234-0374
Email: [email protected]
EDIT
Delete
DeleteCancel
LucyCategory: FamilyImportance:
Delete
Logo DONE
Delete
Upload photo
LucyName
Category
Importance
Family
917-234-0374Phone
24 Lines Ave, New York, NYAddress
Submit
Cancel
Logo
Upload photo
Name
Category
Importance
Phone
Address
Submit
Cancel
AddMenuSort
EditDeletelog activity
Choosea contact
Show activitydetailschart
Showactivitydetail
list
Editactivitydetail
Wireframe for CList. (Some elements used later for Mock-up)