DareMe

DareMe

Duration
201808 - 201902
Team
Jiang Jia (Founder) | Ryan Zhang (Engineer)
My Role
UX research | UX design | Branding
Tool
Sketch | InVision | Illustrator | Zeplin
Duration
201808 - 201902
Team
Jiang Jia (Founder) | Ryan Zhang (Engineer)
My Role
UX research | UX design | Branding
Tool
Sketch | InVision | Illustrator | Zeplin
Background

Everyone has fear in their life. It could be buried deep into the mind, or it could be shown obviously on the facial expression. No matter in what format, fear is like the tiger in Life of Pi, always be by your side, always be tried to fight back and always make you stronger. How to conquer the fear,  the demon in your heart, becomes a million-worth question and a century mystery.

Here comes DareMe, a tool to train your fearless muscle which based on a popular TED talk.

Problem

Before I joined the team, there was already a web version (beta version) of the product out there with an OK performance for testing MVP purposes. By talking with 5 beta version users and communicating with the team, there are a few challenges for developing the native DareMe app.

  • The major task of the app is to drive the user to conduct tasks they aren't comfortable with. The task itself is challenging, but, with the web version which the user needs to open the browser to enter, it’s more challenging to gain good user engagement.
  • Though the web version of the beta product has attracted a moderate amount of users, the original team has never run a survey to know who the users are, what they care, how old are they and etc. Thus the panoramic user image is missing and there is no specific design for serving the target users.
  • The web version has two modes for the major task, which means there was a dilemmatic user flow. This intentionally was not a problem. But it’s verified to be problematic by looking at the user behavior. The user tends to feel confused and fall into either one or the other user flow while using the app.
Objective

Considering the above issues, I proposed multiple solutions for each issue. After discussion with the team, considered the capacity of the engineer width bands and time constraint, combined with the initial user one-on-one interview insights, here are the solutions we decided to go after:

User Research

For understanding who are the users and what they want, we run the survey with >500 responses.

To see more detailed analysis, click blow

Survey

For the user image, here are the insights:

  • Age: the average age is 33 years old with more than 90% falls into the range between 23 and 44 years old.
  • Education: more than 75% of them hold bachelor’s and above degree
  • Job: around 60% of users are employed (roughly 58% has corporate work and 42% is self-employed), the other 25% are students
  • What they want: Around 45% is seeking their own personal development, and nearly 33% is looking for career improvement

💡Insight 💡
Here are their request: Quality: high | Aesthetics: professionalism and elegance | Efficiency: high | Spending time: flexible | Content: personal and career

Ideation

Since the user image now is pretty clear, here comes the initial information architecture, as it looks as simple as it is. The navigation bar has three tabs:

  • Challenges: Each day will present three challenges. The user can choose from 0 up to 3 challenges based on their interest and schedule
  • Journey: All the finished challenge will present here
  • Setting: Challenge password and store user information
Rapid Prototyping

Paper Prototype

Since gamification is chosen as a key design, vivid color and illustration-heavy design are captured in the making of paper prototype design.  Then the paper prototype is transferred to a rapid interactive prototype made by InVision for the need for a test.

Wireframe

Based on all the insights and user research, I delivered the above user flow wireframe with four major user tasks: login/signup, on-boarding(personalization), challenge display(card style), journey, personal setting.

The on-boarding process is meant to be concise and I did the heuristic analysis to make sure it works smoothly.

In the challenge-display, once the user completes the task, the system will provide the users a form to record what they personally have encountered, which will be used as data to feed into the journey page.

While clicking on the individual card, the user will be able to see the personal note they wrote.

Testing

After decided the basic information architecture and user flow, 10 users have been recruited based on a variety of ages, genders, job titles, and locations. During the remote video testing, the user is required to perform a certain task (click here to view test script), and here are the major takeaways:

  • The simple user flow is a success.
  • They like the feeling of being on a journey, though the tab didn’t say journey.
  • There is a great suggestion to color code about each category.
  • The explanation of rule is missed at the very beginning.
  • They would like to see themselves level upon the journey.
Iteration

Color

Based on the user image and their goal, I synthesize a few keywords for the style.

It needs to be:

  • courage
  • bold
  • brave

thus orange, in a monochromatic gradient way, is chosen to be the theme.

Logogram

While the users Dare themselves, they will become the fearless honey badger and on fire. D + honey badger + fire are the inspiration behind the logo. The golden ratio grid is used for the aesthetic reason. Click here to see other great proposed but not selected logo design.

Mascot

Cardstyle Exploration

At the last second before throw actual effort to polish the visual interface design, the team threw in the challenge how to present the challenge content. Above are four solutions I proposed. At the last we chose the fourth solution for:

  • Text only, no image: to increase the focus on the content
  • Card style:based on design trend
  • Gradient: based on design trend

Hi-Fi Design

App Store Feedback

After applying the design guide to the design system, I communicate with the engineer mainly through Zeplin. Lastly and excitedly, we released the app to the with a 4.8/5 review. Welcome to take a look.

Reflection

While initially launch the app, the team reach one batch of users with roughly 500 people through email where we include a feedback collection form.

Gladly, we received lots of compliments and positive feedback, meanwhile, there is a large number of suggestions coming in. Those are all careful feedbacks spans from adding the new feature to changing font space. It looks pretty chaotic. If we choose to follow every single piece the user told us, we will be drained into a messy situation. Hence priority level kicks into place. How to filter out the meaningful suggestion while not missing the trivia but potential one is a challenge. I chose to use an affinity map with each post it is one point of suggestion and I group it by their relationship and similarity.

It tends out three points below has taken a considerable amount of consideration:

  • People need a way to share their experience with their friends or the public
  • People are expecting more category rather than just personal development
  • User want to bookmark certain challenge and bookmark it for later according to the adjustment to their schedule

Based on the user feedback, we decided a version update including more packages, bookmark , and social media share.

Below is the updated user flow with new feature implemented.

Implementing in code language …

Background

Everyone has fear in their life. It could be buried deep into the mind, or it could be shown obviously on the facial expression. No matter in what format, fear is like the tiger in Life of Pi, always be by your side, always be tried to fight back and always make you stronger. How to conquer the fear,  the demon in your heart, becomes a million-worth question and a century mystery.

Here comes DareMe, a tool to train your fearless muscle which based on a popular TED talk.

Problem

Before I joined the team, there was already a web version (beta version) of the product out there with an OK performance for testing MVP purposes. By talking with 5 beta version users and communicating with the team, there are a few challenges for developing the native DareMe app.

  • The major task of the app is to drive the user to conduct tasks they aren't comfortable with. The task itself is challenging, but, with the web version which the user needs to open the browser to enter, it’s more challenging to gain good user engagement.
  • Though the web version of the beta product has attracted a moderate amount of users, the original team has never run a survey to know who the users are, what they care, how old are they and etc. Thus the panoramic user image is missing and there is no specific design for serving the target users.
  • The web version has two modes for the major task, which means there was a dilemmatic user flow. This intentionally was not a problem. But it’s verified to be problematic by looking at the user behavior. The user tends to feel confused and fall into either one or the other user flow while using the app.
HMW (How Might We)

Considering the above issues, I proposed multiple solutions for each issue. After discussion with the team, considered the capacity of the engineer width bands and time constraint, combined with the initial user one-on-one interview insights, here are the solutions we decided to go after:

Hypothesis

Since the user image now is pretty clear, here comes the initial information architecture, as it looks as simple as it is. The navigation bar has three tabs:

  • Challenges: Each day will present three challenges. The user can choose from 0 up to 3 challenges based on their interest and schedule
  • Journey: All the finished challenge will present here
  • Setting: Challenge password and store user information
Execution
Monitoring Metrics
Future under Further

Color

Based on the user image and their goal, I synthesize a few keywords for the style.

It needs to be:

  • courage
  • bold
  • brave

thus orange, in a monochromatic gradient way, is chosen to be the theme.

Logogram

While the users Dare themselves, they will become the fearless honey badger and on fire. D + honey badger + fire are the inspiration behind the logo. The golden ratio grid is used for the aesthetic reason. Click here to see other great proposed but not selected logo design.

Mascot

Cardstyle Exploration

At the last second before throw actual effort to polish the visual interface design, the team threw in the challenge how to present the challenge content. Above are four solutions I proposed. At the last we chose the fourth solution for:

  • Text only, no image: to increase the focus on the content
  • Card style:based on design trend
  • Gradient: based on design trend

Hi-Fi Design

App Store Feedback

After applying the design guide to the design system, I communicate with the engineer mainly through Zeplin. Lastly and excitedly, we released the app to the with a 4.8/5 review. Welcome to take a look.

Reflection

While initially launch the app, the team reach one batch of users with roughly 500 people through email where we include a feedback collection form.

Gladly, we received lots of compliments and positive feedback, meanwhile, there is a large number of suggestions coming in. Those are all careful feedbacks spans from adding the new feature to changing font space. It looks pretty chaotic. If we choose to follow every single piece the user told us, we will be drained into a messy situation. Hence priority level kicks into place. How to filter out the meaningful suggestion while not missing the trivia but potential one is a challenge. I chose to use an affinity map with each post it is one point of suggestion and I group it by their relationship and similarity.

It tends out three points below has taken a considerable amount of consideration:

  • People need a way to share their experience with their friends or the public
  • People are expecting more category rather than just personal development
  • User want to bookmark certain challenge and bookmark it for later according to the adjustment to their schedule

Based on the user feedback, we decided a version update including more packages, bookmark , and social media share.

Below is the updated user flow with new feature implemented.

Implementing in code language …

demonew from zoie zhu on Vimeo.

Next Project