Responsive

hero-responsive.png

project overview

Website analytics and user research showed that people wanted to use this site on their mobile devices.

The goal of this project was to make the live beta family health history site responsive since it was completely blocked from mobile traffic.

A secondary goal was to do this fast within the month of the holidays.

A tertiary goal was also to redesign some areas of the flow that had known usability issues.

My role in this project was user research, interaction and visual design. I worked on this with another designer, product manager and engineering. Stakeholders included product marketing. 


3-responsive-research.png

user research

User research showed heavy cognitive load, banner blindness and flow problems on this page where you chose conditions in your family. This page was an important step towards getting value on the site.

Current design prior to this project shown.


add-conditions-to-family-sketch.png

sketches

Quickly sketched ways we could improve the conditions picker page and how the site could flow into mobile.


wires

Took the best ideas from sketching and translated into wireframes. Shopped around internally and narrowed down to some flows to test. 

An example wireframe that performed well in user testing.


visuals

3-responsive-testing.png

version 1

Iterated on different visuals and tested on mobile devices to see which interactions could be improved per platform and browser.

card-styles.png

card system

Created new card system to support this design.

header-style-explorations.png

header styles

Explored different header styles and tested which visual system was most clear on the phone.


MVP

3-responsive-visual.png

tablet example

Iterated quite a bit on visual styles, for example the cards below, to explore the best UI for the interactions of selecting conditions and provide solutions based on scope.

to-print.png

phone example

One screen of the final visual style for the phone and all of it's state.

 


3-responsive-top.png

future state

For the desktop version, thought a drag n’ drop interaction might make adding conditions for family members easier.