UX DESIGN Portfolio Sunny
2012 ~ 2016
0 451 800 401 Sunn y ChenAU@gmail.com AU , Melbo ur ne
RESUME
Sunny Chen UX Designer
2012 ~ 2013 RENREN “TIANJIN FOOD” ZONE
Now,I’m ready to meet the challenge of UX Designer role!
SEP ~ NOV 2016 REALESTATETUBE
UI/UX Designer
Founder
JUL 2013 PEKING UNIVERSITY WEB DESIGN COURSE 0 4 51 8 00 401 UX Designer
AUG ~ NOV 2015 PRODUCT DYNAMICS
User Experience Designer
S u n n yChenAU @g ma i l.co m ~ JUNE 2014 AU M elb APR o ur ne ZUIMEI COMPANY Interaction Designer
AUG ~ OCT 2014 SUNNY WALLPAPER Founder & UX Design
PROJECTS Share a home Find a housemate
BACKGROUND
PROJECTS
RealEstateTube is a housemates’ platform. You can make a video to find a housemate or share a home.
MY ROLE - Designe and improve previous interaction process of website - Redesign UI and UX of mobile
WEBSITE Previous Too much buttons and options
Current Simplifies the menu bar Pick an appropriate background picture
Misguided options and not aligned
Add video button to explain how this website works Redesign UI and align with search bar
Repetitive information
Switch button to display different kinds of videos
WEBSITE Improve Menu Bar of home page Planning and restructuring, focus on main function.
Design and mark download information, also design ‘How it works’ video button
Test and verify design through Heat Map, which let users focus on Housemate & Sharehouse and video button.
Improve Create Listings process Consider preference of users to create listings : Step by Step. Previous process just one page to fill the blank.
Designe prototype and implement online.
MOBILE Previous design
My design
1
- Home page has 2 button: Search and Create listings, which are not logical. Display videos on homepage could let users clearly see and select (Image 2). Transfer Search button to search bar on home page because seraching behavior is important to users in this kinds of environment. Also, I add filters in searching page (Image 3) to provide more options. - Sidebar to tab bar: The usage scenarios for the sidebar are appropriate to uncomplicated tool classes. I changed sidebar to tab bar (Image 2) and add favourite(Image 4) and notification(Image 5) function, which scenes to be used very often.
Loading page
2 Home page, display videos of users
3 Search page, provide filters to select
4
5
6
My favourite
Notification
Me
MOBILE Improve Create Listings on mobile Before
After
Before
After
Match website design: Reasonable separation of different regions and use different color to recognize.
MOBILE Improve Upload Videos Previous design Traditional upload ways: Click add button > select ways > select images or videos. Steps are very cumbersome and not intuitive.
My design
- Use 2 swipe buttons (Photo and video) to make photos or videos directly. Also, Close button is just on left, which is easy to click with one hand to go back. - Two status has two different Library button(Select photos or videos) to select.
M Y P RO J E C T Sunny Wallpaper Motivate you every single day
Download in iTunes -> https://itunes.apple.com/au/app/qing-tian-bi-zhi-zui-li-zhi/id915661899?mt=8
BACKGROUND
Presentation of Graduate
Visa
GPA
Internship
Leave Home
“
“
Too much pressure
”
”
I want to use wallpaper of iPone to motivate myself
No Boyfriend
Learn langurages
“ I need motivation! ”
So I designed “Sunny Wallpaper” to give me encouragement.
EXPLAIN Trending
Catalog
Produce
Profile
Show most popular wallpapers depend on amount of like
There are many types of wallpapers which let user find wallpapers they like such as Lose Weight, Fighting for exam.
Users can produce their own wallpapers by modifying words and changing background.
Users can view their own works, favourite wallpapers and share them to friends.
O U TC O M E During 5 months
15.3 K
2.08 K
175
Downloads in App Store
Max downloads per month in App Store
Max downloads per day in App Store
VISION
PROJECTS Internship project
BACKGROUND ‘Daisy’ is a planner APP for students to make schedule, check homeworks, complete the tasks during school life. In the period of internship, my task is to improve user experience of orignal design and make suitable modifications.
PROBLEMS
Identity
Single mode on list & no creative intreaction design
Hard to use
Too many fuctions
Complex
Too much options & cumbersome information
DIGITAL PROTOTYPE Home Screen
Notice
Tasks
Add new
Calendar
INTERACTION DESIGN Reminder number of tasks
Lable Design & More comprehensive contents
Reminder slide symbol
Colorful mark to strengthen the impression
Strengthen Add button
Before
After
Before
After
More intuitive selection
Scrollable date field Easy to find dates Simplify unnecessary processes Remove unnecessary choice Reduce the burden on the user
Before
After
Before
After
VISION
PROJECTS E e-Catalog
English
Guide & Engage for Arts Festival
Prototype Video: https://www.youtube.com/watch?v=c9Pn5nowLa4
DEISGN PROCESS Identify needs & estabilish requirements
(Re) design
Final Product
(Re) design
Build an interactive version
BACKGROUND This is a team project of ‘Interaction Design’ course and my role in team is main UX Designer and Video editor. e-Catalog is to provide visitors with selected information about everything on display in a customized way, according to their preferences and needs in Melbourne Arts Festival 2016.
PROBLEM STATEMENT
Ambiguous signs Interactive activities are not interesting
No place to give effective feedback
Trouble in plan journey according to the time
Supportive materials and resources are not enough No social networking platform
After divided different types of visitors in the Art Festival based on their personal preference and background knowledge, we got 5 groups of them: - College students with no knowledge of art - Teenagers - Elderly people - Parents with children - Those who have a very strong interest and knowlege in arts.
From our interviews, we find that all groups will visit the information center before they start their tour in the museum or art gallery. It indicates that a common concern of all groups is finding information to help them plan their visiting route. Then, after Rich Picture and Picture Scenario, we choosed 3 most important tasks as main needs: 1. Plan visiting route before start. 2. Explore the functional maps 3. Share feeling in the APP
PAPER PROTOTYPE
According to our observation in Cognitive Walkthrough, our team modified the prototype to improve user experience. Also, we designed an exploration mode that shows geographically positioned information, allowing the users have a better understanding of what is happening in their surroundings visualizing material in an easier and more attractive way. In order to develop the idea, we first worked on a story board allowing the team to visualize the concept. We illustrated the task over a real map of the city and included a menu with the following options: Pictures, Events, Commentaries, Ranking, Upcoming Events and Favorites. The sketches supported the team in different ways.
MODIFIED PAPER PROTOTYPE
Video of paper prototype : https://www.youtube.com/watch?v=6yBUYSJ4BGg
1. Defining the options that the new function should provide to the user. Secondly, improving the communication of the team, by giving each individual a better understanding of the new task. 2. Supporting the elimination of some options (Pictures and Event) due to restrictions on time and evaluation methods. 3. Serving as a template for the design of the new task in the digital prototype due to the fact that it was not included on the paper prototype.
DIGITAL PROTOTYPE
Key Findings: -Detail of comments Participants are more willing to see details of comments when adding the place with most comments - Ranking over Comments
USER BASED EVALUATION During the user evaluation phase, some methodologies such as eye tracking, concurrent and retrospective think aloud, interview, questionnaire will be included in order to achieve a more comprehensive result.
“ I think ranking represents
other people’s feeling about this, it could reference and help me decide where I going. I did not choose comments because they could be positive and negative. If they are plenty commentaries… they all can be negatives, and therefore cannot help me. Ranking is faster From one of participants
”
Engage visitors
GOALS Guide visitors effectively
Introduction
Debrief
Motivate visitors Testing
Analysis
Video of paper prototype : https://www.youtube.com/watch?v=6yBUYSJ4BGg
CONCLUSION PROCESS
PROCESS
- Working in an iterative way will improve the quality of the design. - Running a pilot test before testing the prototype with participants are useful. - Using post-task questionnaires is better than doing one final questionnaire at the end
LIMITATION - Lack of enough participants. - Users were not naive about the context, requirements and type of application that we were creating due to the fact that they are in our same class and are also doing the same assignment.
OMMENTS
COMMENTS
E-Catalog is flexible “Depending if I am with hurry… I would choose Plan Your Visit. If I have a whole day I can choose and explore the maps” (T3) E-Catalog is easy to learn “I think the functionality is very straight forward, is automatic, I just choose the way I want and it provided a plan, it is quite easy to use” (T4)
Thank you Keep learning,keep moving