When

January 2014 - December 2014

About the Company

10% Happier at the time called Change Collective builds lifestyle courses led by world-class experts designed to help kickstart behavior change. They focus on providing guidance through content from world class experts, and accountability through their mobile application. Every user is paired with a live coach who follows them for the duration of their course providing support when needed.

 

My Role

Product Designer. Alongside our Creative Director I joined the company when it was pre-product, helped create the company's branding and identity. Based on the company's core principles, we designed and launched the product, and continued to improve it beyond the launch. I ran all UX research as it was needed.


Introduction

At Kicksend I learned a lot about how to improve an existing product, spending most of my time conducting customer development and helping tweak the UX of the product. For my third and final Co-Op I was looking to join an early stage pre-product company. I wanted the experience of taking a product from concept to launch and beyond.

When my former coworkers Ben Rubin and Derek Haswell announced that they were starting a company and participating in Techstars to create better tools for behavior change and asked me to join for my third Co-Op it was an absolute no brainer. Health and Fitness are a big passion of mine since beginning to weightlift in high school. Having benefitted immensely from mentors and coaches throughout my life I loved Ben and Derek's idea of combining expert methods and content, with mobile technology and behavioral science to provide accountability. I joined the Company in January of 2014 as the fifth employee.

During my time at Change Collective we brought a product from concept to launch, I designed the full onboarding flow, worked on over seven features/app improvements, more than three concept explorations, and a UI library for the company as well as conducting all the usability studies we needed over the first six months. 

Landing Page & Establishing our Identity

With the start of Techstars three weeks away our first task was to establish a landing page and online identity for ourselves that we could use to point the press to, as well as support our efforts to reach out to experts and create new courses.

We wanted to highlight two main things with our landing page. The first was to showcase the experts that we had already secured partnerships with to give users and press an idea of the kinds of courses we'd be building. The second was to showcase the mission of the company as well as who worked there since we planned to do some hiring during Techstars.

Core Principles & Who We're Building For

There are three principles that lead to behavior change that were to be the pillars of the product we wanted to build:

Content Tracking Social.png
  • Content: The right content at the right time. Books are overwhelming, they leave you with a ton of sound principles but rarely give you the right place to start and the right sequence to apply concepts little by little.
  • Tracking: For true behavior change to happen identity must shift. People become runners, they become Paleo or Crossfitters. To enable identity shift we need a way to stay accountable, we must show up day in and day out until the change we're going after becomes a part of us.
  • Social: "I don't want to feel alone in this." When going through any change doing it alone is scary. Like Crossfit gyms and bootcamps we believe that by building a community and providing a sense of camaraderie around change you'll be more likely to succeed. To recreate this feeling in app was going to be a big challenge.

Before we got into the ideation phase it was important for us to identify who we were building for, this would focus our ideation and narrow down who we'd bring in for usability and concept tests. Our target audience consisted of Performance Optimizers and Health Achievers.

 
Performance Optimizer.png
Health Acheiver.png
 

We understood who our users were, and the behavior change principles we wanted to employ across our courses, however there was one final piece that we needed to understand before we could finish fleshing out our constraints, the courses themselves.

The core experience of the Change Collective app are the courses that we provide. We needed to create a platform that supported a set of diverse courses and behaviors, from a bodyweight workout course to a thirty day mindfulness course, but at the same time felt familiar and ran on the same behavior change principles across the platform. We were not building a separate app with different features for each course, we needed one app that could support all the different course types, content and behaviors.

Designing The Course Experience

Before we could begin designing the product we needed to define how our courses were going to be structured since that would influence the design of the app. Here are the concepts we settled on:

  • Finite courses: Each course has a set duration. Our goal is to teach the certain behavior and provide accountability for the duration of the course. There are a lot of other apps that let you track behaviors indefinitely, by keeping things finite we could focus in on the content and really fine tune the experience.
  • One behavior per course: Each course has you practicing one behavior for the duration of the course. So if you're in "Becoming an Early Riser" then your behavior is to wake up at the right time every day.
  • One concept a day, one new theme a week: Each week has an overall theme and each day we present one and only one concept in the form of a video or an article, each concept builds upon the last.
 
  Our Table of Contents screen.

Our Table of Contents screen.

 

With this framework in place we began ideating around what the day to day experience would feel like. 

App Ideation

We had set constraints and truly understood the problem we were going after. We needed something that would surface articles and videos, provide accountability for the daily tasks and support any additional functionality that we’d want to add in the future, like a social component, etc. 

Using a series of rapid sketching and crazy eights (derived from the Google design sprint) we iterated on the interface over and over. We’d spend the mornings sketching and discussing ideas, and in the afternoon we’d each go off and bring the wireframes into Sketch. Slowly we settled on two important concepts:

 
 
  1. Cards. Everyday the user would receive at least one piece of content in either audio, video, or article format. They would also have one action to complete that would relate to their behavior. Cards were born out of the need for modularity and the ability to support multiple things.
  2. Timeline. We also needed the ability to re-order our cards in multiple ways. In addition to this some courses had multiple content cards, for example our Bodyweight workout course had a daily video workout as well as a supporting article or video that contained relevant information. The timeline was created out of this need.

For the first couple days we kept all of our ideation in Sketch as free of color as possible to not bias the UX that we were all working on. We wanted to make sure it felt right before we turned to aesthetics.

Early on when we did a lot of our company value setting and branding work we all kept coming back to the idea of exploration and expeditions. To the old nordic explorers and all of the ups and downs that they encounter during their journeys, which is similar to the process you embark on when you set off to change a part of yourself, there always ups and down what matters is that you keep showing up. This brought about the idea of a progress tracker that would celebrate their wins and forgive their missteps.

 
Hamburger.jpg
Profile.png
 

We kept ideating around the timeline that was the core of the experience and the rest of the product would come to be defined by it.

 
Home screen 2.png
Card Exploration.png
 

With the guidance of our Creative Director we arrived at the final format of our timeline below.

Move Like Ancestors Cards - Final.png

Onboarding

One of the interesting challenges we faced at this stage in the product's development was how our courses interacted with the features that we were designing. Each course has a different behavior you need to practice, the Early Riser course has you waking up earlier every week, while the Bodyweight workout course has you following a video workout from within the app. We needed to build a card that would ask you whether you'd woken up on time for the Early Riser course, and a card that would take you through your workout and track your progress for the Bodyweight workout course. This would directly affect the Onboarding for each course so we had to keep this in mind in the design of the Onboarding.

We had yet to create wireframes of what our course catalog and course details pages would look like so I took the first crack above. The course detail page was of crucial importance, it's what explained (and sold) the course to users, describing the format, duration and behavior that they would be working on. We had invested a lot of money into our video content for each course in the course details page we decided to surface a clip of the course introduction to give users a feel for the expert. 

After purchasing the course we wanted to bring the user right into a fullscreen portrait video of the expert thanking them for joining and getting them excited to start their journey towards behavior change. We would then collect the necessary information to customize the course for them and help them set their goals.

At first we assume that since they had just purchased the course they'd be excited about what was to come and we could present the user with a bit of a longer onboarding that would allow us to collect the information we needed to set the course up for them. We quickly learned through usability studies that the onboarding felt long and tedious, so we saw the opportunity to bring in the timeline concept from the main app to help break up the flow and make things feel quicker.

 
mid point.png
Course start.png
 

Unlike other health apps that let you jump in and start tracking things right away our courses were timed, they had a start and end date. Not only that, a big part of behavior change is finding the best time to fit the behavior you're practicing into your daily routine. Starting a new habit on a Monday with the fresh week ahead to practice also offered a completely different experience then allowing a user to jump in right after they had bought the course say on a Friday night for example. We had lengthy discussions about how we should structure our course start times and asked several participants during customer development interviews. What emerged was that even though most consumers would want to play with the thing they paid for right away we likened our courses to the experience of working with a personal trainer. You both decide on a time for you to show up for each session ahead of time and then you come prepared for the session. At the end of the day the most important thing for our users is that we actually help them experience meaningful change, it's why we charge for our courses and why sometimes we have to put constraints around how and when they could use the product. We settled on allowing them to choose the day they could start (they just couldn't start today) and highly suggested to them that it be a Monday.

 
Commitment Contract.png
rise time.png
 

Change Collective gave employees a "personal development" budget that we could use on personal developement expenses, both to help me better prepare for designing this experience and out of personal curiosity I signed up for an in person Weight Watchers course across the street from the office, I also hired an online strength coach to wrote out all my routines in the gym and my nutritional plan. Weightlifting and nutrition had always been a part of my life, so I also wanted to take on something I had never done before and put myself through a "self-made 3 week course behavior change course on Meditation." I attended a couple of classes at the Cambridge Meditation Center and signed up for the premium version of Headspace. These were all things I was interested in anyways, but I've always found that by living the problem I'm designing for I have a much more empathetic understanding for our users and it's usually enabled me to craft better solutions.

When you first start working with a personal trainer they always start with the same question, do you want to put on muscle or do you want to slim down? Okay, what's your current weight? Goal setting is incredibly important when it comes to changing any behavior, you are much more likely to be successful if you explicitly state a goal for yourself. In addition to this, it's important to relate that goal to where you are currently, giving a realistic distance between yourself and that goal. For the courses where it fits we always try to phrase our goal setting in a similar way, asking users where they currently are and where they'd like to go.

Along that theme I lead the following design exploration to bring the Coaches' voice into the Onboarding a bit more:

10.png
9.png
13.png
12.png

We begin by having them state their intentions for the course, we then ask them where they currently are, what their tangible goal is, and then give them a personalized recommendation based on that. The above designs didn't quite fit the design style we had established and they added steps to already slightly lenghty onboarding flow. So I kept exploring how to bring this same effect into the onboarding flow order we had decided on:

 
Cameron Aggs 3.png
Cameron Aggs 7.png
 

Having the Coaches' face follow you through the onboarding process and framing the information you inputted as answers to his questions gave the whole flow a completely different feel. It felt like the coach was with you and really listening to the information you were inputting and the goals you were setting. 

There was something interesting about having a user enter their intentions for a course, so I explored resurfacing their reason within the day flow of a course.

 
16.png
Day view 3.png
 

The thought with the above design was to always show at the bottom of the day view the goal the user had stated during the onboarding process. This suddenly put all of the content that they consumed, the behavior they practiced in the context of why they're there. This ultimately didn't make it into the app because we weren't sure what kind of goals users would state and whether they would talk about the why of the goal. If someone wrote "To learn to meditate" it would be a waste of valuable space on the timeline.

In addition to this the idea of a commitment contract came out of the Alpha mobile-web only product that both founders had created the previous year. Every time you set off to change or build a habit there are always going to be times where you slip, the important thing is that you keep showing up and don't get discouraged, we wanted to really enforce these concepts and the commitment contract was born.

"Final" Onboarding flow

5.png
Daily Check Ins.png
Push notification ask.png
Push notification- Please don't leave.png

Right after course purchase you're taken to the above flow. One of the things we did during the Alpha that had a huge impact on customer success (defined by whether they kept practicing their behavior after the course) was using text messages as a daily reminder for users to practice their behavior. The texts, although automatically generated, sounded like they came from the expert and would allow a user to check in by responding. Up until this point though we had yet to define our strategy around how to remind and nudge a user at the right time. Based on our upcoming courses I created this chart with all of the actions, reminders, and check ins that would need to be handled by our SMS + Push notifications and as a team we came to the following definition:

  • SMS: These are rarely used by other apps but enabled a high response/engagement rate. If you get a text you almost always read it, if not respond to it. But we needed to be very careful not to spam users, so SMS was only used to remind a user to practice their behavior based on a time they had set. In some cases they could respond and say whether they had done it or not. For example: [At 9:15AM] Hi Maroun! Did you hit your 9AM rise time for today? -Yes I did!
  • Push Notifications: We all get a lot of push notifications, these have been abused by apps for years so we used push notifications as a soft reminder that their behavior practice time was coming up or had passed. For example: [At 10:00PM] You're set to wake up at 9AM tomorrow, start getting ready for bed! Or, [In the afternoon if we hadn't detected any activity] Maroun your workout time was set for 10AM did you workout today? It's not too late to get it done!
Day 0.png
Set Your Reminder Time.png
Commitment Contract.png

You'll notice we're using the coach's face alongside the information we ask of the user.

Commitment Contract.png
Daily Check Ins 2.png
Day 0 setup complete 2.png

Making Our Content More Actionable

After having launched our first two courses on the platform we began to notice, both through our mixpanel analytics and some of the usability studies I was running for other features, that a significant enough of our users weren't getting to the end of our articles. They were using the app as a checklist for whether they had done the behavior or not. "When am I done with a day? Is it after I practice my behavior? Is it after I've read the material?" are all questions that came up a lot. I lead the following design exploration to give more flow to our days and to better signify completeness.

Exploration 1.png

Out of this exploration also came the need to make our articles more actionable, we wanted to encourage users to either watch the videos or scroll down the bottom of the article. While playing with Pixate I came up with the following animation that we added at the bottom of our articles.

Original State.png
2.png
6.png
3.png
 
 
 

This animation served the purpose of making the articles feel more like tasks, combined with our new system of identifying when a "day was complete" gave your courses a much more structured feel and an improved day to day flow.

Weekly Checklist

As I've mentioned each course has different behaviors that our users needed to practice and this meant that we needed to add functionality to the product to support these. One of newest courses "Work Life Harmony with Brad Feld" required a weekly checklist of tasks that needed to be completed throughout the week, this was in addition to the daily practice.

 
Weekly Checklist Screen.png
Weekly Checklist- In Timeline.png
 

We explored adding the checklist to both the timeline and as a separate screen. It was eventually built and added to the top of the timeline after I had left the company.

Social Exploration

From the very beginning we knew that social interactions and shared accountability would be a big part of our platform. We wanted to solve for the user problem of "I don't want to feel like I'm going through this alone." I spent a lot of time looking at my own experiences with behavior change, the times I was the most successful in the gym were when I was either working with a coach or when I had a lifting buddy that I would always lift with. I joined a Crossfit gym for about a month during this time because I wanted to understand the atmosphere they cultivated around their group workouts. There was something to powerful about going through a crossfit workout with the rest of the class, it truly became a shared experience, everyone was cheering each other on it quite literally pushed you to perform better. When a lift wouldn't go well either the rest of the class was always encouraging and telling you to try again.

We wanted to recreate this feeling in the product and that's where the idea of a cohort was born.

Meet your team.png
cohorts.png
chat.png

In a cohort you're paired with three other participants who have started the course around the same day that you have. You'd all see each other's progress and be able to chat to one another. We ran this through usability studies and spent a lot of time thinking about this feature. In the end it didn't feel quite right, to go back to the crossfit analogy there is something powerful about being in a room working out together, going through a shared experience. We tried to recreate this using progress lines as the shared experience and it just didn't have the same effect. During usability studies we also heard that this cohort wasn't very interesting with random people who could be located anywhere/from any background.

UI Library

At Change Collective we had begun the year by using Photoshop/Illustrator primarily and we eventually transitioned to Sketch for all UI design. Towards the end of my time there I created a full UI library so that anyone could hop in and put screens/mockups together.

Modeled after Teehan & Lax's iOS GUI everything was made into Sketch smart symbols and the artboards were created so that someone could open the library and easily put screens together.

Conclusion

Before Change Collective the majority of my experience had been hyperfocused on specific parts of the product process. At Kicksend it was all about improving an existing a product post launch, with an intense focus on customer development and UX research. At Zeo I worked on developing new feature and supporting the marketing launch of a brand new app. 

At Change Collective over the course of my year there we took the company from being pre-product, took the core principles around behavior change to fully design and launch a product, and then worked to improve the product post launch. I absolutely loved the process of creation that we went through, from truly understanding the problem we were solving for, to using the empathy we had for our users to build the right solution for them.

Over my three Co-Ops I learned that the two things I enjoyed the most was the ideation process around crafting a solution and bringing that to final aesthetic designs and coming in to an already existing product and using UX processes and customer development work to improve the usability of the product and have it better solve the problem it's addressing.


Read this next: