Dexcom G6 App Micro-interactions
User Interface (UI) Design, User Experience (UX) Design, Product Design, User Testing, Prototyping
Overview
NOTE: This is an NDA-limited case study. As a result, a lot of the project work, including detailed design decisions and prototypes, is left out.
In partnership with the Diabetes Design Initiative, Dexcom came to my team with the goal of improving the user interface of the Dexcom G6 app and integrating micro-interactions to delights users. My team thus focused on delivering high-quality, refined prototypes to be given to Dexcom at the end of this project. We ended up prototyping three specific design changes for the G6 app to address Dexcom's business needs while integrating user feedback. The final designs were then handed off to Dexcom, which included detailed documentation of our process and considerations to help them move forward with concrete next steps.
My Contributions
Took meeting notes, established a project timeline, and served as the main contact person with our client.
Prototyped over 10+ screens to integrate micro-interactions into the Dexcom G6 app.
Organized the user testing guide and handoff documents.
Project Role: UI/UX Designer
Duration: June 2021 - August 2021
Collaborators: Katherine Kim, Zhilin Li, & Irene Tang
Design Brief
With this project, Dexcom provided us with a clear design brief of what they were looking for which included:
An improved user interface for the home (glucose) screen;
The addition of a tab bar and screen transitions; and
2 micro-interactions that delight users.
Design Process
Because our project has a big emphasis on UI design, our process reflects this. In relation to the double diamond design process, this project was situated within the second diamond which includes the “Develop” and “Deliver” phases.
Secondary Research & Provided Primary Research
Although we did not do any primary research for this project, we still did some secondary research in order for us to get a better understanding of what Dexcom is asking of us. Specifically, we did desktop research on the importance of micro-interactions and a competitive analysis of current apps that do a good job of integrating micro-interactions.
What are micro-interactions?
Micro-interactions are ”trigger-feedback pairs in which the trigger is a user action or a change in the system’s state and feedback is a narrowly targeted response to the trigger and is communicated through small, highly contextual changes in the user interface.“
Micro-interactions are important because they confirm user action, convey system status, guide users through an app, encourage engagement, and prevent user errors/better error states.
What are good micro-interactions?
Delightful: make users happy and encourage them to interact
Functional: provides meaningful information and feedback to the user
Unobtrusive: will not compromise the functionality of the app
Our competitive analysis then takes the above criteria from our desktop research to identify apps that use micro-interactions effectively. I am unable to discuss further on this topic due to the NDA.
In addition to the above secondary research, Dexcom also provided us with their own primary research regarding user experience and user personas to help guide our designs. Without the need to do primary research ourselves, having access to this information prompted us to design and test our ideas as much as possible.
Problem Definition
To synthesize all the information we had on micro-interactions and Dexcom's users, we then created an empathy map to ensure the ideas we came up with during brainstorming were specific to Dexcom’s audience.
We also crafted two problem statements to further help us brainstorm and guide our project's direction:
How might we provide users information and feedback about the system?
How might we improve the overall user experience?
We tried to map these problem statements as closely as possible to the design brief. As such, the first tackles the micro-interaction component of the brief, while the second concerns the improvement of the app’s UI and the addition of a tab bar.
Ideation
With our empathy maps and problem statements ready, we moved on to our first round of ideation. Here, we did a Crazy 8s activity to have a creative yet structured way to get many of our ideas out there. We then dot voted on the ideas we thought were most useful based on our identified design values of delightfulness and functionality. The top voted sketches were turned into wireframes as we wanted a clear way to get feedback from Dexcom to help us decide which design to pursue further.
Prototyping & User Testing
After narrowing down our designs with Dexcom’s input, we proceeded to create mid-fi clickable prototypes for various tab bar designs, UI designs, and micro-interactions using Figma and Adobe XD in order to start user testing.
In total, we did 2 rounds of user tests which helped us refine our designs as much as possible. We also reached out to people with diabetes of varying ages and heard back from adolescents to the elderly. However, because of constraints on who got back to us, we also opened our tests to Dexcom employees to get as much feedback as possible. We then used Miro to compile and analyze our insights from the user tests to aid in the iteration process and ensure clear communication to stakeholders.
As a reminder, I cannot disclose the specific design decisions that we made during this process because of the NDA.
The results of these user tests ultimately helped us think more deeply about our design as a whole. Specifically, it prompted us to think about the varying contexts and people who may use our design and how it may or may not be serving their needs. This really allowed us to be more empathetic and understand the users better since we did not have user interviews beforehand.
Prototyping & User Testing
Our final hi-fi prototypes were then presented to Dexcom, especially highlighting the possible contexts and users of our designs. We also included some constraints of our design and possible next steps Dexcom could take this project in.
Because of the NDA, the presentation of final prototypes have been blurred.
Finally, we handed off our work to Dexcom, which included artifacts like sketches, project timelines, user testing guides and results, and design files.
Lessons Learned
Reflecting on this project as a whole, I learned a great deal about the importance of the small design decisions that go into creating the user experience and user interface of an app. This project also helped me understand the significance of meeting with users as early and as often as possible since our greatest insights came from the people themselves.
If I had the chance to go back and do this project again, however, I would have advocated for doing some user interviews at the beginning of the project. I think this would have aided my team and me to make more thoughtful design decisions during our first round of user tests and better empathize with their unique circumstances as people with diabetes.
Overall, this project allowed me to grow in both my hard and soft skills through crafting user interfaces and leading user testing sessions. I am truly grateful and privileged for this opportunity and I’ll take these lessons with me as I move on to the next step of my journey as a researcher and designer.