UX/UI Design: OXO

logo

uidesign

iphone

OVERVIEW


The project is to design an clean and easy-to-use app for post-stroke patients with paralyzed arms/legs to better track their progress of recovery at home.

2016.05-2016.08
In a team of two


 

* Selected from over 100 candidates and awarded $1,000 to be part of NYU Shanghai Dean’s Undergraduate Research Summer Program.

My Role: UX/UI Design;  Brand Visual Design

sitemap, wireframe, low - high fidelity mockup, testable prototype
concept mapping, logo, typography, color, use of font

Toolkit:

Illustrator, Sketch, InVision

Problem Finding

My friend’s dad had apoplexy hemiplegia and couldn’t get his body move well. He went to the hospital and received treatment. After leaving the hospital, he was recovering at home. He practiced his legs and arms by making some movements to recover the flexibility of the body. However, during his process of rehabilitation, he didn’t know if his movements were right or not. He didn’t know his overall progress of recovery either.

The Problem

For mid-aged people who have physical problem, during their self-recovery period at home, it is hard to know their overall progress of recovery. Lack of convenient and easy-to-use equipment and platform, and the inconvenience to go to the hospital often in mainland China make it more difficult to know their own body’s recovery.

What…if?

屏幕快照 2017-04-09 下午11.36.03.png

What if there is a mobile app helping a patient connect to an easy-to-use wearable device, measuring the movements, showing the visualized data of movements to the patient, generating a report, and also offering a long-term rehabilitation trend?

What if all the key features are built in a clear, easy-to-use, minimalist app that a mid to old aged person can understand how to use it?

Therefore, we started the project.

Persona & User flow & low-fi Mockup

I first built a persona reflecting the group of people who will use our app.

oxo-persona
Persona

Then based on the key frustrations the target user has, we designed the user flow and the sitemap with different functions/features the app has and the overall logic of using the app.

We also started designing the mockup for a better implement of the experience design.

Interface Design

I communicated closely with my teammate who is the developer. I worked on translate the data grabbing from the device into a visualized, easy-to-understand tangible visual language to the users. I also iterated on the design, logic of the app from time to time based on the progress of developing the device.屏幕快照 2017-04-09 下午11.52.06.png

I also took charge of the high-fidelity mockup of the app, using Sketch and Illustrator:

ai-interface-screenshotsketch-screenshot-interfacescomplete

Interaction & Prototype

invision-1

invision-2

 

usertesting


Branding & Visual Design

I was responsible for building the visual language for the project.

I took the three main concepts from our project and created the logo for it. I used clear font and colors featuring calm and peace to not only make it comfortable for users but also differenciate ourselves in the market.

Branding Board:

branding-board

The development of the branding and the UX design.

 

 

I combined three main concepts from the idea of the app and used the curves as well as circles to represent the app.

For the color, blue and purple are chose because of their expression of calmness and peace. Also, compared to the massive use of green and blue in the world, these two colors help the product to stand out of the competitors as well.

Font.  After comparing numbers of fonts,  Montserrat Ultra Light and Montserrat Hairline were chosen. The fonts were expected to help to give the users a sense of clean and neat.


 

Here is our project, thank you for reading! (:3

iphone-5s