Onboarding Reimagined | Fresh Tri

TOOLS

Figma, Whimsical, Illustrator, Photoshop

MY ROLE

Discovery, ideation, usability, research, prototyping, iteration

TIMELINE

Fall 2021 - Fall 2022

PLATFORM

Mobile

Project Summary and Defining the Problem

My team and I were tasked with a new challenge - how can we improve the onboarding experience? How can we boil down the complex Fresh Tri model into something that anyone could understand? How do we explain what a “tri” is?

The original onboarding sequence had a couple core issues that needed to be resolved:

  1. It lacked structure. While it got directly to the point and hit the basic requirements, it didn’t meet the more detailed needs of the Fresh Tri experience.

  2. One of the most important and frequent questions that was asked by users was: “what is a tri?”. This was a huge problem, as the “tri” is the core of the entire Fresh Tri product.

    With adequate explanation and visual aids, we were able to address this problem. We also incorporated new questions and neuro-typing elements to really customize the experience to each user.

Laying out the requirements

The VP of Behavior Design, Product Manager and Senior Designer provided general requirements based on features requested by customers, and the most effective solutions based on brain science. We decided to keep the main structure of the onboarding (name, email, phone, etc. ) but switch it up to match the revitalized Fresh Tri brand.

In addition to this, we added in new steps to the onboarding process:

Building a Tri

Explaining a tri

Nuerotyping

Catering to users specific needs through a quick survey

All of these steps are optional, of course. We included them to assist the users that want a walkthrough experience, rather than exploring on their own. We also added elements of encouragement and a welcoming, warm feel throughout the onboarding process. We want our users to feel safe and secure when using the product, a part of a strong community of people reaching similar goals.

The User Journey

Below is a user journey I created, explaining from 0 to 1 how the user interacts with the on-boarding process:

Please contact me directly to view our more in depth user research.

Customization and the Tri Build

Real quick… what is a Tri?

“Tri” is a small step that you can take toward achieving your goal, whether that be weight loss, managing a health condition, or something else.

The heart of Fresh Tri is the “Tri model” and iteration upon the Tri that is selected by the user. We decided to build this piece into the on-boarding process, because it’s a new concept to many users and including it at the beginning gave us the best chance to fully explain it while having the users full attention.

One of the main things that we wanted to focus on with this redesign is customization - how do we make the experience unique to each user? This part didn’t exist in the original design, which was very basic. It covered personal information such as name, phone number and password creation, but completely ignored what makes Fresh Tri so special - a safe space that’s special to each user. We used a couple techniques to address this issue:

Tri Build: We introduce the Tri Build much earlier in this model, as opposed to the original design. This exposes the user to the idea at the very beginning of the experience, and helps them understand how it works before even getting to the home screen. In this first step, the two larger areas of the Tri are addressed: area of focus and a narrowed down topic.

Neurotyping: We then move onto an even more detailed section of the Tri Build. Using behavior science, we ask the users question to see where they’re at and how we can better customize their Tri. This gives us a better idea of how to help them, and what they’re looking for in an everyday habit that they can realistically work on.

Sketches and Mockups

While I participated in every step of the process, I was heavily involved in the visual aesthetics and UI of our new onboarding. One of my tasks was creating different illustrated sequences to compliment the new onboarding screens. I combined new copy and layouts with my illustrations.

An early set of mock-ups for the beginning of onboarding - before Tri Build section

Outlining a basic and rough flow, from personal information to home screen. This version still needed more screens in between, but I was trying to get a feel for the main points of the flow.

We spent a lot of type experimenting with different aesthetics. We wanted to create a vibe that was welcoming, calming and inviting. We focused heavily on natural elements and positive copy, to help users feel at peace when interacting with the product.

The New Onboarding Sequence

To view that active prototype on Overflow, send me a message!

Conclusion + Moving Forward

We drew many of the same conclusions in this project as we did the Home Screen project, as they are very closely linked. The onboarding redesign was also a huge success! It increased retention, engagement and was a huge conversion success. This project catapulted Fresh Tri into the next level of health and wellness - we were truly on the map now. Our product is helping people achieve their goals and heal their relationship with themselves. That’s the biggest success in my eyes, the lives that were changed and the people we helped.

There’s always going to be more to iterate on and improve on going forward (these are just a few ideas we have):

  • Further exploration of the Tri Model - how do we make it even easier to understand? Does it call for another overhaul? What else do our users need?

  • Continued improvement of onboarding customization and personalization

  • Further simplification of the process, while maintaining attention to detail

We will continue to listen to the users and evolve our designs to create the best version of this product that we possibly can. The journey is never over!

About Fresh Tri and the Team

This project was a team effort - huge shout out and credits to John Beck (Senior Product Designer) Jordan Butler (Product Designer), Anxhi Subashi (Product Designer), Casey Hughes (VP of Behavior Design) and Jeff Jureller (Product Manager).

Fresh Tri is a habit changing app that based in science and research-backed psychology. Using the Iterative Mindset Method™, users can break old habits and build new healthy ones. With the support of a thriving Tri(be) community and licensed practioners, users have the resources they need to reach their goals in a reliable and sustainable way. Learn more on the company website.