CONTOUR DIABETES APP

Integrations

I have been involved in many app and product integration exercises with other companies. It's always an interesting challenge to create a user-friendly interface for a flow that is technically complex while also being conscious of both brand identities and design conventions. This process is one example of the collaboration between another company and our engineering team.

 

For this particular example, both teams wanted to give the user the ability to get all of their data from multiple devices into the app of their choice. We investigated:

 

What data we each have and how it is similar or different

How to handle any differences that existed

How to keep the flow simple and limit sending the user back and forth between apps

 

Initial Roapmapping

Several senior members of my company and I traveled to the other company to discuss logistics. I used the time to whiteboard with the other designers to start a design conversation and identify any possible obstacles.

Screen Shot 2018-09-03 at 9.29.13 PM.png

Getting Familiar

One of their designers sent me early wireframes from some of their existing connection flow. Since their app was previously only connecting to devices and not other apps, I worked with her to flesh out different user flows and understand how the Contour app would fit into the picture.

Screen Shot 2018-09-03 at 9.29.03 PM.png
Screen Shot 2018-09-03 at 9.28.46 PM.png

Initial Flows

I worked closely with the Systems Engineer on our team to sketch out how the user-facing flow would be from the Contour app.

Scan from a Xerox WorkCentre.png
whiteboard.png

I called in the whole project engineering team (app development, cloud, and systems) for a whiteboarding session to make sure we were all on the same page. We used sticky notes to map out both the user-facing and the back-end pieces of the flow, helping us visualize and collaborate.

Glooko WF 4.6.png

I used the whiteboard flow to create a clean wireframe. This was a helpful talking point when communicating and working with the other design team - we could collaborate in real-time or send each other mark-ups when appropriate. This was later shared with the teams for both apps and also provided a framework for future integrations with other apps.

Final Screens

I created hi-res app and browser screens from the wireframe. These were reviewed by both companies for legal and branding aspects, and then sent to the engineering team to be developed.

NEXT PROJECT
Design System