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. 

Click here to jump to high fidelity prototype

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

©2018 by Ruoxue Zhang. Proudly created with Wix.com