Web and Mobile Wellness Application

Retrofit is a B2B health and wellness company that helps their customer's employees lose weight and maintain healthy lifestyles through coaching, educational content, and wearable technology. Some of their customer's include Dominos, Taco Bell, KFC, and other companies. Those companies invest with Retrofit to help lower their health care costs by helping employees with weight loss and diseases such as diabetes.

I was brought on as a Senior Product Designer to help launch their new “Healthy Living” mobile app. I also worked on their existing web application and old mobile app. One of the projects I worked on was called DPP (Diabetes Prevention Program) Lessons. Although Retrofit was very successful with helping people loss and maintain weight-loss through their one on one coaching, they needed to be able to educate people in a more scalable way. They had put together education content by tapping their coaches on a variety of topics, but there was a lack on engagement with this content, especially over the year long program.

Goal: To increase the engagement of the DPP Lessons.

Solution: First, to redesign the lessons page layout based on how the lessons were being used. Then add a more interactive format into the lessons themselves and test the two versions with a subset of real users.

First, I started with the mobile app because it tied back to the business priorities. I utilized out internal coaches to understand how users were using the lessons. The main take away from this that I understood is that they only needed to view one lesson per week. Users could view lessons in the passed if they had missed one, but they couldn’t view lessons in the future, even though they looked clickable. Also, if they missed a lesson in the past, it counted against them in the program. This was not showing up in the UI. Neither was the fact that they had completed lessons.

From this information I started sketching. I made the decision to use more screen real estate on “this week’s lesson.” Users could still swipe or click the button to previous or future lessons, but the focus was on the most important action.

I fleshed my ideas out further in a wireframe. Wireframing has always been a HUGE part of my process and a perfect communication tool. Retrofit hadn’t been using wires when I first joined the company, but I went ahead and started using them in my process, knowing from past experience how much time they can save over the long haul.

From that wire I got the go ahead to move the design into visual UI. Around the same time I got another project related to live classes. I realized that although lessons and live classes were different things, we could utilize the same design work. Happy to naturally see the bigger picture, I added that second project into my giant Photoshop document.

Here is the redesign of the main lessons page that I completed. To see the whole prototype and all of the versions of pages go to https://retrofit.invisionapp.com/share/CNBH031A6#/screens/231566505.

As this part of the lessons was being redesign, the content team had broken down and reorganized the videos into content that we could put into an interactive widget. Instead of only having videos, the widget (which utilized our partner Monj’s technology) would have pictures, text, and videos broken down into sections. Before launching this new version with all current users, I ran a test on production with a subset of users.

To help with everything running smoothly, I engaged the lead coaches and asked them their feedback on how to best launch this test. They told me what coaches would want to know and what to expect. I was given time on our monthly company wide meeting to present what I was doing. I anticipated questions and wrote out detailed templates for coaches to communicate with their users about what was going on.

I told them I would be sending all this information out in a follow up email and fielded questions at the end of the meeting. Everything went smoothly and coaches were excited to be involved in the process.

At the next company meeting I presented the results of all of our testing. We had gotten both positive and negative responses, so it was important to show the overall response. Coaches has also been getting private messages throughout the testing period, so I made a new form for them to fill out in google docs to gather that information as well.