RESPONSIVE WEB APP

Health Management

Role: UX Designer

My Process:

Responsive
Responsive

press to zoom
Desktop View
Desktop View

press to zoom
Mobile & Tablet View
Mobile & Tablet View

press to zoom
Responsive
Responsive

press to zoom
1/3

Sketches:

Mobile-First Responsive

 

 

 

 

 

 

 

 

 

 

 

 

Wireframes
Wireframes

press to zoom
Wireframes
Wireframes

press to zoom
Wireframes
Wireframes

press to zoom
1/2

Lo-Fidelity

Wireframes

 

 

 

 

UI Kit Style Tiles
UI Kit Style Tiles

press to zoom
UI Kit
UI Kit

press to zoom
UI Kit Style Tiles
UI Kit Style Tiles

press to zoom
1/2

UI Kit

 

 

 

 

 

 

Desktop
Desktop

press to zoom
Desktop with tasks expanded
Desktop with tasks expanded

press to zoom
Visual Design Iterations
Visual Design Iterations

press to zoom
Desktop
Desktop

press to zoom
1/6

Hi-Fidelity

Wireframes

 

 

 

 

 

 

Next Steps

 

  • Measure which features are used most and possibly rearrange priority

Prototype

 

We wanted the visual to convey:

  • Professional

  • Clean

  • Strong

  • Encouraging

  • Adult

  • Positive

 

This prototype of the Incentives section highlights the users progress and prompts them to complete In-Progress tasks. I incorporated gamification techniques as well.