Healthy Minds Innovations 

Healthy Minds Innovations is a nonprofit founded on the work of world-renowned neuroscientist Dr. Richard Davidson and affiliated with the Center for Healthy Minds at the University of Wisconsin-Madison. They’re on a mission to create a kinder, wiser, and more compassionate world by developing tools and technology that help people train their minds in order to achieve greater levels of well-being.

As a UX/UI Designer at this organization, my primary role is to research, design and deliver comprehensive design specs and validate those designs throughout the iterative development process. This position requires I work regularly with stakeholders ranging from academic scientists and developers, to project managers and marketing professionals in order to stay aligned with business goals and needs.

Typographic Scale

Following Brad Frost’s direction for how to create a design system, developing a typographic scale for a digital product is an important piece of that overall design framework. The current mobile application includes 4 different type scales and I wanted to simplify that architecture for designers and developers alike by using one font to rule them all.

Scale Definitions

I used Gili Sharrock’s guide quite literally as my typography bible to inform the process below:

Process for developing this type scale:

• Choose a type style. Ultimately we went with the open source font Nunito Sans for 4 primary reasons:

  • Predictability: We’re building for both Android and iOS using React Native and this allowed us the most control to ensure designs are consistent and dynamic between both operating systems.

  • Open Source: We’re a non-profit organization and need to be thoughtful about costs, so working with a typeface that was open source, free, and backed by Google was an important business goal.

  • Translation: Nunito Sans supports many language translations, and we have many users from around the world.

  • Closest cousin to Avenir Next: Avenir Next is our desired font, but a mobile app license wasn’t cost effective as a non-profit in the long term.

• Worked through all the development files and documented each type style that existed, as well as its variable name, location, and styling.

• Created a new typographic scale based on Apple’s Design System and Google Material

• Mapped old variables to new variables and styles and provided developers with a visual map of what’s being replaced

• Broken tasks down into stories for the developers and started integrating the type scale into the app.

Applied Type Styles

Below are a some of the visual maps I created that show developers where new type styles will be applied throughout the primary screens that users interact with the most.

App Flows

As one of my first projects, I noticed there wasn’t an up-to-date version of the entire app experience so I created user flow maps for each section of the application in order to understand the current landscape and where improvements could be made. Since the creation of these maps, the design team references them almost weekly. Some examples below:

Style Guide

Because we collaborate often with marketing, outside vendors, and communications at the Center for Healthy Minds at the University of Wisconsin—Madison, I noticed there was a huge need to centralize HMI’s core brand assets. We would receive many requests for assets, brand colors, print variables, and overall look and feel.

I developed a packaged style guide that contains best practices, colors, typography, and downloadable design elements sized appropriately for various uses cases. Overall, creating this style guide has probably saved myself 2 hours per week which adds up quickly in this field.

Examples from the style guide below:

Donation Feature

The company felt as though removing the paywall from the app aligned more with our mission of creating a kinder, wiser, and more compassionate world for everyone. Working with marketing and philanthropy, it was decided that a donation-based or “Pay What You Can” business model would work best as a non-profit organization.

We interviewed 11 users, both current users of the app and non-users, and presented 10 different prototypes to determine the best approach that would motivate participants to support the work.

Medium Fidelity Prototypes

Below shows examples of the primary 4 prototypes that resonated the most with users during interviews. We focused each design concept around different areas to gauge which idea provided users with the most value and how likely each one would prompt them to donate.

Final Designs

The final designs is a combination of what people liked in the medium prototypes so that the team could feel confident in a design direction. Users can swipe through a list of projects that their donations help support, as well as a statement that clearly explains why we want the app to remain free for individuals.

Below shows the process of making an in-app donation on an iOS device using Apple; the Android version of the app is nearly identical with Google Pay. There’s an option to donate online through HMI’s philanthropy partners at UW—Foundations where they can setup recurring payments. The donation amounts displayed are what felt the most comfortable to people during feedback sessions.

Perhaps one of my greatest joys in life is illustration and animation. After a person donates to HMI, they receive a Thank You email that includes this bright, fun animation. I used Procreate to draw and animate this gif, and I’m continuing to explore new technologies for animation — a passion of mine.

Social Media Templates

Another pain point I noticed when starting at HMI, was that the design and marketing team was struggling to create social media graphics quickly to grow their audience. I created roughly 8+ reusable templates that this team could use and repurpose and we continue to make more. Maximizing these graphics with reusable templates has saved the design team anywhere from 1 - 4 hours per week, and allowed marketing to work more quickly and efficiently. Examples of instagram templates below:

Instagram Carousel #1

Instagram Carousel #2

Instagram Carousel #3

Visual Design

Although my primary duties are focused on designing digital products, I often work alongside marketing and communications to craft promotional print materials for business development and large scale events as well as pitch decks for business development so they can feel confident when presenting to potential customers.

Some favorites below:

Achievement Badges

I’m a video game nerd at heart and one of my favorite experiences to design are challenges, achievement badges, and motivational materials. Below are badges participants can achieve when completing the 4 primary sections of the app for training the mind to be more focused, calm, and resilient: Awareness, Connection, Insight, and Purpose. Another gif for you 👩‍🎤