feed-iphone

33, 000

Users

40, 000

WeChat Subscribers

10, 000

Weibo Followers

Convict Journal is the mobile design of a platform I co-founded with over 30,000 users, which helps users build up their body systematically via a set of actions regardless of time and space. The provenance of “Convict Journal” comes from the story of Paul Wade and some other strongmen who got stronger after doing calisthenic workouts in prison for decades. It encourages people to do workouts even in the toughest conditions and with the simplest equipment. Apart from the movements themselves, the app aims to make working out cool again.

FINAL DESIGN

1. Get on board with fitness assessment.

The system assesses user’s fitness status with basic fitness questions and provides recommended plan accordingly.

plan

2. Customize workout plan within a few clicks.

Users can choose some recommended plans or customize their workout plan on one screen with a few clicks.

3. Record exercise on the go.

Once users start a planned exercise, they just need to follow the instructions and complete it. The app automatically records their exercise and shows a report.

check-in

explore

4. Keep motivated in the community

Users are not alone when doing workouts. Now, they can get to know tens of thousands of Convict Journal users and how they plan their exercises. The communication unfolds around training videos that the users upload, which motivate them to overcome difficulties and keep working out.

5. Know more about yourself.

Users can always look back to review their achievements. The level-up system, the heat map calendar, the badges, and detailed statistics, all of which combine to show how well they follow their plan, and how much progress they make.

me

CHALLENGE

The website could not meet users’ needs as they tended to visit via mobile devices.

Statistics showed that most users visited our platform with their mobile phones. Meanwhile, 9 out of 10 new users came from mobile end.

UV&NU

User Visits and New Users via Mobile Devices

To make it more adaptable, we developed a mobile site and a WeChat service account, which we later found did not meet users’ needs. The obstacles in the mobile website and WeChat service accounts really harmed the user experience, Monthly Active Users (MAU) and Daily Active Users (DAU), causing the slowdown of user growth in the second year. Worse still, someone inserted our website in an app and sold it through App Store. Luckily, it was finally removed after we appealed to Apple.

mobileweb

Mobile Website
* Data consuming
* Low connecting speed

wechat

WeChat Service Account
* Hierarchical redundancy
* High bounce rate

“It’s a waste if you do not develop an app .”

– Fitness enthusiast No.18058 in our forum

feedback_app

INITIAL RESEARCH

Scoping the problem with survey and interviews

I conducted a survey and got 822 responses from our users before analyzing the statistics. Then I interviewed 10 users about their experiences and frustrations in doing the workout.

survey

Survey

graph

Statistics

According to the survey and interviews, some of the main difficulties or needs are as follows:

  • “The check-in process is inconvenient.

  • “I started over again and again, and just could not persevere.”

  • “I need detailed tutoring.

  • “I need workout companions.”

  • “I want to see my workout progress.”

Therefore, I specified the problem scope: how might we design a mobile platform to improve users’ experience of tracking their exercise and form a fitness habit?

IN-DEPTH USER STUDY

Understanding who the users are and what they need

To explore solutions to the problem space, I decided to probe into our target users and their needs based on the interviews and statistics on our platform.

gender

User Gender

age

User Age by Gender

We determined that typically a potential user contains the following features:

  • Mostly male users

  • 16-45 years old

  • Students and wage earners

However, how they use a fitness app and what particular function they need differs. Specifically, the users can be divided into two major groups, fitness novices and fitness veterans, based on their conditions, goals, and preferences.

Two Major User Types

major_user_group

I created two personas based on the two major user groups – novice users and veteran users, which differ in their major needs and preferences. These are essential references for further design and development of our app.

persona1

Novice User

persona2

Veteran User

Journey map: Capturing the pain points in user journey

Based on the research, persona and some affinity analysis, I drew this journey map to depict the process of how different types of users are doing fitness workouts, what are the highs and lows in their journey, and where are the opportunities to improve. The bold ones are the most significant functions that we decided to design and implement soon.

journeymap

With all these user study, I synthesized some key insights: insights

COMPETITIVE ANALYSIS

Keeping people motivated is an opportunity and check-in function needs improvement.

Before diving into design, I picked out the first tier fitness apps in China that were similar to our app, comparing and analyzing the functions and features of each app in 6 dimensions. By the analysis, the “incentive” and “social” dimensions are relatively weak on these apps, which agrees with interviewees’ frustration that they cannot persevere or find companions. However, the “check-in” function needs to be improved in our platform.

competitive

DESIGN DECISIONS

With a limited amount of time and effort, we decided to prioritize our focus on six major parts. The most challenging parts are as follows.

goals

Designing novice-friendly onboarding experience

New users where overwhelmed when they first got onboard. So we decided to add the onboarding experience to help them assess their fitness level and expectations for recommended plans. The veteran users, on the other hand, can customize their own plans.

onboarding_flow

Providing simplified check-in flow and customizable plans

The check-in process in the old version was burdensome for users since they had to record every set of exercises separately after the workout. The new check-in flow, however, split the process into two stages: making a plan and doing a workout. Therefore, once the users enter the planned exercise, they can get tutored when doing the workout. And everything is recorded automatically.

checkin_flow1

Refining social functions

After analyzing the usage of different social functions, I was determined to cut down some insignificant elements which were on the web version, such as the “gang” system, forum and leaderboard. Instead, the interaction among users now unfolds around their exercise and training videos.

social

Restructuring information architecture

Since the check-in process is used frequently, I moved it to the first screen so that users don’t need to tap one more time for check-in. The “feed” tab merges with the “explore” tab since users tend not to interact with others with pure check-in records.

information_architecture

Introducing a unique gamification system

To motivate users to keep on doing workouts cultivating the community, we integrated gamification factors into our product – the experience system and badge system.

exp

The experience system bonds the user with levels. When users do certain kinds and amounts of actions, they get some experience correspondingly and level up gradually. Doing workouts in the real world is just like leveling up in a game.

The badge system provides users with various badges when achieving level-up, action goals, challenges, check-in combos, uploading videos and so on. Users got motivated and kept on working out to collect the bonus.

badges_set

Various Badges in Convict Journal

LOW-FIDELITY PROTOTYPE

Identifying and solving usability problems via rapid prototyping and iterations

sketch

usability

I sketched out the prototype of our app quickly. Later, I drew a more accurate paper prototype with the sketches to make it more organized and then conducted some user testing to get feedback and improve the original prototype.

low-fi

MID-FIDELITY PROTOTYPE

Mapping out the task flow with wireframe

Following the assessments in the low fidelity prototype, I made some changes went through iterative design, making modifications several times from the feedback from both our team and some users. Finally, I constructed the full wireframe of our app.

mid-fi

HIGH-FIDELITY PROTOTYPE

Refining design basing on user feedback

When testing the interface again, we found more usability problems and made changes accordingly.

beforeafter0

New users were confused to determine their fitness level. In the new process, the system assesses user’s fitness status with basic fitness questions and provides recommended plan accordingly.

beforeafter1

The planning interface contained too many hierarchies that users had to click back and forth, so I restructured the hierarchy of 4 variables: moves, steps, sets, and times, integrating them on the same screen.

beforeafter2

The icons of actions were not easily recognizable and were too small to interact. I completely redesigned the screen so that users can focus on current exercise and finish check-in automatically once all planned actions completed.

beforeafter3

The interface was too cluttered, and some of the elements were confusing for first-time users. I rearranged the layout and clarified some content such as the heatmap calendar that shows workout experience.

MEASURE

Key indicators of success

Was the design successful? I paid attention to some key indicators.

  • Task success: Most people could complete the check-in process; check-in and plan-making took less time.

  • User acquisition: Daily new users almost doubled.

  • Engagement: Weekly active users increased over 70%; Weekly active users curve reached peaks (+30%~50%) whenever new events came out.

  • Retention: Returning users increased and 7-day retention rate reached 20%

SUMMARY

If counting from the launch of our website, Convict Journal is surely a long project which marks the start of my journey as a UX researcher and designer. I was growing up with it, and as users along with social media followers came from 0 to over 30, 000, I was genuinely motivated.

convict1

convict2

convict7

convict3

convict4

convict5

convict6

Countless fitness enthusiasts from around the country gathered here, whether she or he is a sailor, a high school student, 50-year-old employer, a dancer, a worker, or a veteran. Many of us became friends. I was thrilled when someone said thank you for developing this product and they really made a difference. And looking back, I indeed learned something.

feed-iphone We got a lot of feedback and support from users during the whole process.

  • User-centric design is about meeting users’ needs, helping them achieve their goal easier and better. And it should be integrated into every step of the iterative design.

  • Never give up a chance to contact with users. Users can always come up with some frustrations or errors using your app you may never notice. Without user feedback, there may never be a mobile app Convict Journal.

  • Product operation is vital. At the beginning of the project, I went through major social network platforms in China, and keep operating Weibo, WeChat and Facebook account for the past two years. The media resources we have made it much easier to collect user feedback, to conduct online questionnaires and interviews.

  • Designers should eat “dog food” they made. I realized that if I want to make a better product, it’s better to use it myself so that I have a chance to find problems before closed beta or even the launch. This theory was certainly the case when using our website to record exercises. I discovered several shortcomings as the first user, which we overcame later in the mobile app design process.

  • Teamwork matters. Research, brainstorming, iterative design…, every major step could not be done smoothly without joint efforts, even if I was in charge of UX research and design. Can’t wait to work with more creative people and make amazing products in the future!