MyNano

MyNano App

MyNano is an app focused on enabling patients to own their health and wellness. MyNano enables users to track their health trends, manage their wellness, and have a central place of reference for their medical records in order to have a comprehensive overview of their health and wellness and better communicate with their doctors and wellness providers. As a product designer at Nano, I helped finish out the V1 UI for the app, as well as doing some minor usability testing of some pieces of the app. For V2, my focus has shifted to creating a unified design system to create a cohesive branding and UI experience as well as increasing usability and ADA compliance for Nano’s users.

Features

Health Tracking

The main feature of the MyNano app is helping users to interpret and consolidate data from different sources of wearables and apps. This feature is also used to tie into the user’s Health Report, which is used to aid patients in communicating with their doctors to provide the most comprehensive health history possible. It is also planned for use in future features in which users can track their progress in their health goals.

Care Team

A major component of any user’s health and wellness is the group of people that help them achieve their health goals and to maintain a health life. In the MyNano app, that group is composed of a user’s doctors, wellness professionals (i.e., massage therapists, acupuncturists, physical therapists, etc) and any family that assists in their care (or that the user assists in the care of).

User Testing

To get a better sense of if the V1 of the app was headed in the right direction, I started doing some minor user testing on UsabilityHub.com. This included A/B testing, first-click tests, surveys and preference tests. A few examples of testing I executed:

Resolving Issues with User Flows

Since I had come to Nano near the end of the V1 design, I spent a good chunk of time analyzing the user flows of the design and poking around to find holes and figure out how to patch them. User flows had not been created in the V1 round, so I created several in order to find where features were confusing or repetitive. I also created the flows to better illustrate to the product team where issues were arising as well as to help newer employees get acquainted with how the app worked.

Nano Unified Design System

I started at Nano as the first pass of the design of the app was wrapping up. While the app had a solid foundation, it was clear from a user standpoint as well as a branding standpoint that a unified design system needed to be brought into play in order to progress the design of the app in a way that solved issues with usability, clarity, and ADA compliance. The design system is a work in progress.

Finding Inspiration and Focusing Nano’s Brand Values

I helped kick off the process of creating a design system with the lead product designer at Nano, Rob Gary. Rob helped with defining where the visual inspiration for the new design system would come from, and helped onboard the marketing team to our thought process. I worked on defining what Nano and its employees felt the app stood for and what it meant to users. I walked our head of marketing and our product manager through an exercise in defining what Nano’s core values were, because I felt strongly these needed to be defined in order to direct how every aspect of the design system would be chosen. We settled on the core values of Supportive, Authentic, Reliable and Charming. From there I started to work on outlining what the major aspects of the design system would be and what those would be made up of. To do this, I grouped the major components of the design system into three categories based on Alla Kholmatova’s book Design Systems: Ethos, Perceptual Patterns, and Functional Patterns.

Narrowing Down the Basics

I worked with the lead product designer Rob Gary to create a more cohesive, subtle and ADA-friendly color palette while testing type styles and working to find solutions that merged easily with previously used type and color in order to lighten the load on our dev team.

Because Nano had used Steradian in the past, and the team felt it was readable across multiple sizes as well as it being a very flexible typeface, it was chosen as the main type face to use in display, headers and labels. IBM Plex Sans was brought in to address readability issues with long-form copy and denser groups of text.

Scaling Type for Readability and Responsiveness

One of my biggest tasks has been to solve the issue of type scaling across device sizes. Because Nano also wanted to create a user-generated content site, it was necessary to not only select a scale for mobile but also for larger breakpoints to address the website. After running through several type scales, I settled on the idea that different scales would have to be used at different breakpoints in order to address size issues as well as contrast in hierarchy. The below typescale accounts for sizing only, not styling. Another reason I felt the type scale was necessary was to address issues in the V1 design with ADA compliance and issues with using type at sizes that, while they appeared normal on a desktop, were often too small or unreadable on mobile.