Habittototchi

Track and Train your Habits

PROJECT OVERVIEW

This was my first project at UX Academy. The challenge of this project was not only to solve a problem but to walk through the design process while reading the documentation to learn several design methods and perform practices along the way. Luckily I had a mentor a call away to ask about the numerous doubts arose.

For this project, I selected the theme of "taking care of one's health," which I related to lifestyle and habits.

For this case study, I have collected only the exercises that give meaning to the designed web, leaving out others, such as storyboards or card shorting, that were not that important to solving the problem posed.

Role: UX/UI focused on research and testing

Topics covered: Setting research Goals, Competitive Analysis, Interviewing users, Affinity mapping, Research Analysis, Persona creation, Information Architecture, Prototyping, Usability Testing, UI Kit

The question that I asked myself and that motivated the start of the project was:

Why do so many people resist the captivating charm of good habits, despite the abundance of available information?

And the challenge I faced was summed up in one question:

Will we be able to design a website that effectively helps people to improve their lifestyles?

RESEARCH PHASE

I wanted to learn about the origin of bad habits and how people dealt with them in their routines, so I defined a research plan where the problem and background were determined and research objectives and questions to solve during the research and how I would do it.

Gathering information from diverse sources is crucial to enhance our comprehension of the subject. But, again, the Internet and A.I. are good places for that.

We conducted a S.W.O.T. analysis to determine how our website could differentiate itself and obtained valuable insights.

LISTENING TO PEOPLE

We recruited eight volunteers for the interviews to talk about good and bad habits. We used open questions to learn about what people do, their pain points, and what they need.
We perceived the volunteers were uncomfortable talking about it during the process, so we decided to complete the data with an anonymous survey.

Once all the data was collected, we processed all the information and made an affinity map.

PRODUCT OF OUR RESEARCH

One persona

Having so much data collected we needed a representation of our user type, so we created Bea, a busy young woman that would like to be more consistent in her visits to the gym.

One question to solve

We passed all the data to P.O.V. statements and those ones to H.M.W. questions and selected the one we thought we could work better

How can we make users repeat their desired habits?

GENERATING IDEAS

We brainstormed ideas to solve the problem brought forward, employing techniques to enhance creative thinking. Among the numerous ideas that emerged, utilizing gamification to enhance determination would be the most suitable approach for resolving the issue.

And soon our project started getting shape

  • Perhaps something fun that reminds me of a dungeons and dragons game. Maybe Challenger, or Challenge Revolt

  • It would be for everybody who likes games, challenges, and competition

  • It would reinforce their willpower

  • Creating a website that tracks habits with a feel of a video game

GOAL PRIORITIZATION

There was so much to do, so the next step was prioritizing goals.

We defined the business and user´s goals and selected first the ones both had in common.

We broke down big tasks into smaller ones, and using matrixes such as Impact/effort and MoSCoW we selected the steps we had to take first

OUR ROADMAP

Finally, our strategic plan was defined.

THE ARCHITECTURE

The site map for this MVP was not complicated. It consisted of a sign-up / log-in system that allowed users to access their profile page, which must be configured by introducing the habits they want to accomplish. There is a screen showing the user's progress, another one with their achieved goals, and one more where they purchase new avatars.

The user flow was much more complicated than the site map. Thinking about all the possibilities the user could go through made having to iterate several times until I got the deliverable right.

My biggest challenge of the whole project came when I set out to define the task flows. I also had to iterate it, and I did not get it right until, by the suggestion of my mentor, I combined it with the wireframe, detailing all the necessary steps visually.

To complete the previous task thoroughly, I had to work simultaneously on the wireframes.

We opted for designing mobile-first because a smaller screen would make us ensure the key elements would be displayed more prominently.

THE BRAND

Identity

We selected values that defined our website well and made it stand out among our competitors. After that, we explored different names until we found one that sounded right.

Framework

We defined more detailed brand parameters to keep its identity consistent.

Color

Using the brand´s values, we select color combinations that will serve as the base of pigmentation for the future website.

Mood Board

We Collected different elements to get inspiration for the website design.

Logo

Having the brand mind and armed what pen and paper, I let the pen flow. The best ideas were digitalized and evolved until we found the desired image for the company.

Icons

We checked open-source libraries looking for icons that matched the brand and made new ones to make the homepage more unique.

Font Style

We selected Inter as the website´s font because it has a modern and styling look and is very readable, even in the smaller font sizes from mobile devices.

Components Library

Before getting our hands on hi-fi prototyping, the last step is creating a well-organized components library to speed up the process and future iterations.

READY TO BE TESTED

NOW IT IS TIME TO TEST!

We wrote a plan to document what and how we would conduct the usability test.

We searched for five volunteers and prepared a usability test script.

The tests were carried out in person with the five volunteers. During these, we detected inevitable failures that required essential changes.

ITERATIONS

ITERATION 1: Spanish translation

After seeing our volunteers failing in the same way in tasks 3 and 4, I decided to make changes in the prototype to continue the test.

ITERATION 2: Essential changes

This iteration was a success, and the rest of the volunteers completed all tasks afterward.

ITERATION 3: Final changes

Taking into account the observations and data collected during the usability test, we made a few more changes that led us finally to the final version of our M.V.P.

OUR FINAL PRODUCT

FINAL THOUGHTS

  • Original problem statement:

    I´d like to help users that find it tedious introducing new activities in their schedule to get in the correct mood to increment their willpower because [it will make them feel better during their effort, so they can be more constant and strive more

    Result:

    we have created a gamified system that reminds you to perform your desired tasks

  • Our next steps will be:

    1 - We will create a “share in social media button

    2 - Designing a desktop version, including a blog with information to help users

    3 - Adding quizzes to learn from users´ problems

    4 - Creating premium avatar sets

  • a. I learned how important interviews and qualitative data are in research

    b. I experienced that it is never late to go through task flows again

    c. Asking for a second and third opinion about something is a plus

    d. The recording is a must