Ruoxue (Astra) Zhang
UX & Interaction Designer
Worthix App
Design was used in version 2.0 first release
May 2019 - August 2019
Summer Intern At Worthix Corp.
B2B, Web & Mobile App , Data Visualization, Dashboard
Worthix app is the 1st customer experience survey system built with artificial intelligence.
When I joined the team, a new version product with more powerful features would be released soon.
My Major Contributions:
-
UX designer lead in the product team;
-
Designed and crafted wireframes, low-fi & high-fi mockups;
-
Planned UX researches to support design process;
-
Conducted usability tests and other research activities with in-house users and real clients.
Note: This is a NDA protected work, so I am not allowed to reveal some parts of the work or identify the source of information. Feel free to contact me, if you have any questions.
UX Design Process
Research
When I joined the product team, the product was going through a transition phase - from MVP to a professional industrial product with complicated functions. Therefore, understanding the limitation and weakness of the old product would help me design better interfaces for the new product.
Problem Space
Problem of old product:
-
System is complex;
-
Data sets are overwhelming;
-
Visual is not intuitive or telling the story.
Research Activities
Documents Study
-
Learn about the science behind the product;
-
Understand the context and background.
In-house Interview
-
Explore use cases from inside out;
-
Gather opinions from users who understand the methodology.
Client Feedback Review
-
Explore use cases from inside out;
-
Gather opinions from users who understand the methodology.
Ideation
After understanding the science behind the product and the context, I put myself in the user's shoes and crafted the personas, a storyboard and the information architecture.
Persona
Storyboard
Info Architecture
NDA Protected
Low-fi Design
The product was complicated in a way that the target users fell into four personas with four different high-level goals. Keeping user's needs in mind, I came up with the wireframe and three alternatives to attack the problem from three perspectives.
Wireframes
3 Alternatives
Alternative 1
-
Similar layout to old version;
-
Logic hierarchy from top to bottom;
-
Containing relatively many information;
-
Using buttons to expand content;
-
Everything on one page.
Alternative 2
-
Tiled layout with focusing on visual graphs.
-
Purpose-driven hierarchy;
-
Showing minimum graph and information ;
-
Using buttons to show data;
-
Opening a new page to show more infomation.
Alternative 3
-
Highly interactive graphs.
-
Logic hierarchy with interaction-aided flow ;
-
Amount of information changed as user's wish;
-
Not relying on buttons;
-
Able to find all information on same page.
Midpoint Evaluation
I went through several iterations of gathering feedback from all related departments and combined strengths from three alternatives to come up with one integrated solution. To make my design solid and supported by evidence, I conducted midpoint usability tests using InVision.
Usability Tests
In-house Usability Test
5 Post-session Questions
3 Tasks to Test
3
Worthix Employee
Participants
Goal
How users with sufficient background knowledge perceive the solution?
Usability Test With Real Clients
5 Post-session Questions
3 Tasks to Test
3
Current Real
Clients
Goal
How users with no background knowledge perceive the solution?
Analysis: Affinity Mapping
NDA Protected
High-fi Prototype
Based on the feedback, I made improvements on the solution and refined details. Then I crafted 120+ pages high fidelity prototype and some of the micro interaction. I also prepared documents for dev. team other than using Zeplin.
NDA Protected
Key Features
Login & Workspace
-
Simple and intuitive login page;
-
Card styled workspace.
Single Survey Dashboard
-
Story-telling data visualization;
-
Color-coded content;
-
Highly flexible user controls;
-
Purpose driven details.
Next Step
Because of the time limitation, I did not get a chance to conduct an evaluation session of the high fidelity prototype. If I would continue developing this project, I would do evaluation activities, such as usability test, mouse and eye tracking, etc. to improve the prototype.
NDA Protected