top of page
CONTOUR DIABETES APP

Design System

When I started, all app design was documented as 'system maps'. While these system maps looked nice and presented all of the information in one place, they were extremely time-consuming to maintain, overlapped with requirement documents, lacked style specifications, and had no interaction.

 

Additionally, a ton of time was being spent developing designs that were a 'best guess' instead of using prototypes to find the best user experience first. I made it my goal to improve our design process and documentation through new programs.

Original: System Maps

  • This is an example of one of the system maps (there were 42 all total)

  • It was very hard to find the relevant information because of the expansiveness of these flows

  • Some of the text was design specifications attempting to describe motion and transitions, while some was duplicate or contradictory requirements existing outside of official requirement documentation

  • Maintaining these massive flows was extremely tedious and time consuming

Re-design

  • After interviewing internally to find our needs and exploring numerous prototypers, I selected Justinmind as the primary method.

  • This new form of documentation allowed us to present design requirements in context, and the menu made finding screens quick. We were also able to export every string for faster translations.

  • We were able to break up gigantic flows into bite-sized scenarios.

  • Justinmind also allowed us to create extremely hi-fidelity prototypes to be used for internal communication and numerous user test.

  • Since we explored so many different prototyping programs, we still use whichever suits our purposes best in cases of animation and initial paper exploration.

Prototyping

  • Justinmind also allowed us to create extremely hi-fidelity prototypes to be used for internal communication and numerous user test, saving us time and allowing us to create a better user experience

  • Click one of the buttons above to view some samples of my prototype work

    • Use the Contour logo to access a Moderator Menu

Style Guide

  • Another problem with the system maps was a lack of consistent or defined styles

  • I did an analysis of all of the different styles used in the documentation to create a library of styles and icons

  • Zeplin was introduced as a tool to allow our app development team to see specific spacing and styles 

bottom of page