Solo student project for the AllWoman UX/UI Bootcamp 2023
User research, sketching, wireframing, prototyping, user testing and visual design
October - December 2023 (7 weeks)
Figma, G Suite, Zoom
The Problem
People often struggle to keep track of their habits and then lack motivation to continue it.
I started learning painting, something I had always wanted to do but never found the time for. I used to think that painting was a talent that people were born with. However, my teacher was always telling me that I would struggle at first and that I needed to keep practising to get better. I made it a habit to pick up my sketchbook every day and create something, but it was challenging to stay motivated when I couldn't see any good results. I talked to my colleagues, and they were all facing the same problem. This made me wonder how we can help more people stay motivated when starting something new. To understand why this happens, I decided to investigate further.
desk Research
It can take 18 days to half a year to create a habit.
Starting with Desk Research, I wanted to understand what is a habit in the first place and how it's formed - already getting important insights from that.
• Habit is a routine of behaviours practised frequently;
• It's a lengthy process, and individuals need immediate feedback to know that they're on the right path;
• Habit formation is influenced by the frequency and consistency with which it's performed;
• The process of forming a habit can take 18 days to half a year.
REFERENCES: Frontiers in Psychology, Harvard Business Review & James Clear.
benchmark
There are a lot of tracking apps available in the market.
I wanted to explore some habit-tracking applications already available in the market - to understand how they work and what people say about them. One of the apps I use daily is TickTick, which has helped me keep up with some of my habits, like exercising and reading daily. However, I've been struggling to stay motivated in painting; even though I practice for at least five minutes daily - I still couldn't see a result, so it wasn't motivating me enough. Then I also visited the App Store and found Productive, which was one of the first options that it suggested to me when looking for a habits-related app. I also researched Google to find a different type of habit-tracking app that would have gamifying elements, and it suggested Habitica, a game that helps track habits.
• All three apps focus on tasks in general rather than solely on habits - habit-tracking is a feature of it.
• Habitica uses gamification to make the process more engaging and fun, while the other two take a more traditional approach to habit tracking. With Habitica, users can get points as a reward for tracking a habit and exchange that for features inside the product that they can apply to their "character".
• Productive and Habitica offer challenges and allow users to interact with other participants, while TickTick doesn't.
Based on that, the opportunity identified was to think about a solution with a habit-tracking app with gamification features, collaboration options, and friend challenges - integrating these focusing solely on habit-tracking.
user surveys
96% faced challenges in maintaining habits, and 20% used an application for that.
A user survey was conducted as quantitative research with 27 participants who had started a new habit in the last six months, with the primary goal of having answers to my research questions. These were the main takeaways:
An important insight from here is that even though there are a lot of tracking apps available in the market, only 20% use or have used them, leading to my curiosity about the reason behind it.
USER INTERVIEWS
Users find that using a tracking app can be time-consuming and add unnecessary pressure to their lives.
The main insight from the interviews was the statement that "Users find using a tracking app to be time-consuming and adding unnecessary pressure to their lives." This answers my previous question of why there are many tracking apps available, but only 20% of users use them.
This insight I got after conducting a user survey, where I invited five participants who had previously completed the survey to a 30-minute Zoom interview. The goal of these interviews was to understand the challenges faced by people who tend to start something new but give up after a few days.
WRAPPING UP THE RESEARCH
Affinity Mapping
To conclude the research, I added all the information gathered from desk research, benchmark analysis, user surveys and interviews into Figjam. This process helped me to identify common themes across the gathered data and gain insights from each one.
RESEARCH INSIGHTS
Users feel more pressured when using a tracking app.
RESEARCH INSIGHTS: THE MOST IMPORTANT FINDING
Users feel more pressured when using a tracking app.
This statement was related to all the users. One of them even mentioned that using a habit-tracking app would be like learning a new habit just to use it, and that already would make her feel overwhelmed. About the ones already existing in the market, they answered that they feel annoyed by too many things on it and prefer not to use them. My primary focus was to keep this insight in mind, while also considering all the others.
EMPATHY MAP
Understand what the user does, thinks, feels and says
I gathered all the data collected from the user survey and interviews and organized it into an Empathy Map. I divided the data into categories to gain a better understanding of what the users do, think, feel, and say. This helped me to understand their needs, behavior, and build a User Persona.
USER PERSONA
Kate needs an app to keep herself motivated with her new habits.
Based on that, I built a persona named Kate, being able to synthesize the needs and behaviours of my users to better anticipate how they might interact with the proposed solution.
• Her main needs are to visualize her progress when starting a new habit and to have a tracking app that doesn't make her feel overwhelmed and more pressured.
• She usually feels more motivated when doing it with someone.
• Prefers doing it manually because she can add colours to it.
HOW MIGHT WE
How might I make the process of tracking a habit enjoyable and engaging?
After gathering all the necessary data during the research phase, I explored some "How Might We's" (HMW's) based on the insights found and decided to focus on one in particular. The main insight I wanted to address was that users feel pressured and annoyed when there are too many things on the platform, and then they prefer not to use it as a result. So how might I make a process that is the opposite of making the users feel pressured and annoyed?
BRAINSTORMING
If users feel overwhelmed and more pressured when using a tracking app, how could I propose something that would do the total opposite and suggest fun, enjoyment and that users would feel engaged in using that?
After considering the HMW, I began brainstorming ways to create a solution to provide users with a positive and enjoyable experience. To come up with ideas, I started with a brainstorming session called Crazy 8's and used the Lotus Blossom technique while keeping the HMW statement in mind. The reason why I chose these techniques was that, as with the Crazy 8's, I could just write down and sketch every possible idea that came into my mind; with the Lotus Blossom, I was already iterating with some of them and refining it for my final minute. Doing this helped me to already think about features I would like to incorporate in my solution while also considering the emotions and user experience I wanted to evoke. At the same time, I was starting to think about the values I would like to incorporate into that.
MY SOLUTION
A mobile app that enhances user motivation and engagement without overwhelming them
By answering my HMW during the brainstorming sessions, I was able then to create a solution statement to better guide through the whole process, already writing down the features I would like to add to my solution, as previously stated.
As I was brainstorming ideas, the name "Circle" popped into my head. I thought it would be a great name for a place where people could share their accomplishments and progress with friends. The name was inspired by the concept of a "circle", which can refer to a group of individuals who share a common interest or participate in similar activities*.
*SOURCE: https://dictionary.cambridge.org/dictionary/english/circle
At this point, features I wanted to include were:
TASK FLOWS
Focusing on the primary tasks
Once I had identified the key features I wanted, I began by defining the primary tasks I intended the user to do. I narrowed it down to these main tasks: creating and tracking a habit, adding friends and cheering on their progress.
• To form a habit, the user needs to take the first step of creating it;
• Following that, a solution should be designed to help users track their progress and share their achievements with friends - for that, they would need to be able to add them to their "Circle". This way, users could encourage and support each other in achieving their progress and forming a habit.
design pattern research
Learning from established practices
Prior to initiating any sketching, my primary objective was to gain a comprehensive understanding of successful design patterns that are closely related to my task flows. The main purpose of this exercise was to obtain valuable insights and knowledge that would enable me to continue to work on my project.
CREATING AND CUSTOMISING A HABIT
• Using icons to visually display those habits;
• Giving the user the option to easily customise that with their preferred colours;
• Frequency can be adjusted, like daily in the example;
• Applying the colour to the icon chosen.
TRACKING HABIT & GAMIFICATION ELEMENTS
• Gaining points by tracking it;
• Having a Streak system where users can see their progress and share.
SHARING WITH FRIENDS
• Having a preview of what is going to be shared;
• Having the option to share a link to show and invite friends to the application.
CREATING A MEMORY FROM THAT
• When recording that action, add a caption and a photo to create a stronger memory of that.
• Here I came across some studies that taking photos can promote mindful attention to experiences and increase enjoyment, memory, and life satisfaction.
**Diehl, K., Zauberman, G., & Barasch, A. (2016). How taking photos increases enjoyment of experiences. Journal of Personality and Social Psychology, 111(2), 119–140.)
initial sketches
Designing the user interface screens
Based on my task flow and design pattern research insights, I started to sketch screens for each step of the main task flow: creating a habit, tracking it and sharing their progress with friends by creating a visual memory from that. Doing this helped me to get down on paper as many ideas as possible, without any judgment, and only later select the ones I felt would answer to my solution.
FROM SKETCHES TO MID-FIDELITY WIREFRAME
After reviewing my sketches, I went to create my mid-fidelity prototype on Figma. This allowed me to better visualize and test my ideas, already thinking about proper sizes and practices. To ensure that I followed established standards, I researched examples such as the Apple Human Interface Guidelines and Google Material Design.
Doing the Mid-Fidelity Prototype allowed me to conduct user testing before jumping into my High-Fidelity Prototype.
STYLE GUIDE
Moodboard for a Cheerful, Ease and Motivational brand
When starting to think about my high-fidelity prototype, I referred back to the brand values that had been established earlier and began to gather visual references in accordance with them. Since the brand had a cheerful, easygoing, and motivating vibe, I looked for many references featuring colourful and energetic designs. Even though the moodboard had a lot of colours, I chose the colour palette in a neutral way by selecting orange as the only colour since it is a known energetic colour. The reason behind not having too many colours in the palette was that the primary goal was to make the colours stand out when the user customized their habit with them.
COMPONENTS
Design System
High-Fidelity Design
The Final Design
The Final Prototype
High-Fidelity Design
Design Solutions
USER TESTING
Findings from User Testing sessions
A usability test was conducted with three users who had previously participated in the user interview. During the test, they were asked to perform the main tasks, and the following findings were gathered.
FINAL CONSIDERATIONS
Next steps
HabitCircle is a mobile application that aims to assist people in forming new habits.
Mia Roland
Age: 34
Education: Bachelor's Degree in Marketing
Hometown: Chicago, USA
Family: Single, lives alone
Occupation: Marketing Professional
Mia is a health-conscious food enthusiast who has recently moved to the city. She enjoys exploring different cuisines and flavors. Mia has a food allergy (dairy intolerance) and needs to ensure that the gourmet sandwiches she orders from the delivery app for the gourmet sandwich shop can accommodate her dietary restrictions.
"I wish there were more options to customize my gourmet sandwich according to my specific dietary preferences and restrictions."
Mia wants to conveniently order her favorite gourmet sandwiches from the specific gourmet sandwich shop. She seeks a delivery app that provides an easy-to-use interface, clear ingredient information, and customization options to cater to her dietary needs.
She also faces frustrations when the app lacks comprehensive ingredient information for the gourmet sandwiches, making it difficult for her to make informed choices and avoid her food allergens.She faces frustrations when the app lacks the option to switch ingredients for a sandwich that contains an allergen she wants to avoid.
Problem Statement
Mia Rolland is a food enthusiast who needs to personalize her orders because of her dietary restrictions.
User Journey Map
Mia wants to explore and enjoy gourmet sandwiches in her new city while being able to customize her order and get detailed information about their ingredients.
Mia's user journey involves exploring gourmet sandwich options on the app, but she faces frustration when she can't modify or substitute ingredients for allergens. She tries contacting customer support with limited success, leading her to directly call the restaurant for assistance. This highlights the need for better customization options and communication channels to enhance the user experience and accommodate dietary needs.
Wireframes
Flow for ordering a sandwich
Usability Study
As part of the design process for the gourmet sandwich app, usability studies were conducted to evaluate the user experience and gather insights for further improvement. Participants were asked to perform specific tasks and provide feedback on various aspects of the app.
Customization Challenge: Three out of five participants encountered difficulty in scrolling horizontally during sandwich customization. This highlights a usability issue related to the scrolling functionality. To improve the customization experience, a redesign of the scrolling mechanism or alternative navigation methods, such as vertical scrolling or tabs, should be considered.
Allergen Information Accessibility: Four out of five participants found it easy to access allergen information. This indicates that the app effectively addresses the theme of easy accessibility for allergen information. To maintain this positive experience, it is essential to continue providing clear and readily available allergen information for users.
Positive User Experience: All five participants mentioned an intuitive user experience, indicating a strong positive theme regarding the app's usability. This feedback validates the success of the design efforts in creating an intuitive and user-friendly interface. To sustain this positive experience, it is important to prioritize user-centered design principles throughout future iterations.
Option to Schedule Order Arrival: Based on user feedback, the app now includes an option to schedule the arrival of the order. This feature allows users to choose a specific date and time for their sandwich delivery, providing flexibility and convenience for those who prefer to plan their meals in advance.
Log In/Sign Up Screen: To ensure a seamless user experience, a log in/sign up screen was implemented. This allows users to create an account or log in to access personalized features such as saved preferences, order history, and loyalty points. By providing a dedicated login screen, the app offers a more personalized and tailored experience to individual users.
Colorful Icons: In response to user feedback regarding the visibility of icons, they have been made more colorful and visually distinct. This enhancement improves the overall clarity and ease of navigation within the app, making it more user-friendly for individuals with visual impairments or color vision deficiencies.
Mockups
High-Fidelity Prototype
Check prototype here.
Design System
Accessibility considerations
To enhance accessibility, legible fonts were implemented throughout the app. The font size and style were carefully selected to ensure readability for users with visual impairments or those who prefer larger text. Additionally, appropriate contrast ratios were maintained between the text and background colors to improve visibility for individuals with color vision deficiencies.
In order to improve accessibility, proper color contrast was implemented in the app. This ensures that text and important visual elements have sufficient contrast against the background, making them easier to read and perceive for users with visual impairments or color vision deficiencies.
Takeaways
The impact of the redesigned gourmet sandwich app was evident in the positive feedback received from study participants. One participant expressed, "The new design makes it so much easier to customize my sandwich and find allergen information. I love using this app!" This feedback reflects the success of the design in improving the user experience and meeting user needs.
In order to improve accessibility, proper color contrast was implemented in the app. This ensures that text and important visual elements have sufficient contrast against the background, making them easier to read and perceive for users with visual impairments or color vision deficiencies.
Next Steps
Implement a recommendation engine that utilizes user preferences and order history to provide personalized sandwich suggestions. This can enhance the user experience by offering tailored recommendations and increasing user engagement.
Add social sharing functionality to allow users to share their favorite sandwiches or special deals with their friends and social networks. This can help increase brand awareness, attract new customers, and encourage user engagement through word-of-mouth marketing.
Introduce a tiered loyalty program where users can unlock additional benefits and rewards as they accumulate more loyalty points. This can incentivize repeat purchases, increase customer retention, and foster a sense of achievement and exclusivity among users.
