Kelsey
UX/UI Designer
Made with

Tracking Your Progress

Understanding How Users Can Gain Confidence in Their Accomplishments

Image alt tag

Now more than ever, many people feel stuck and have increased levels of depression and anxiety

As the sole UX/UI Designer of this project, my goal was to create a way for users who have experienced changes and/or setbacks in the past year to use progress tracking to gain confidence in their unique accomplishments, no matter how small or big.

1. Overview -
Empathizing With The User
Tracking Your Progress

Problem - Tackling Imposter Syndrome Head On

I was working abroad in Copenhagen, Denmark, when due to unforeseen circumstances, I had to return back home to New York.

After starting a career change, I felt like it was easy to compare myself to others, was unable to recognize short-term growth, and felt overwhelmed.

After talking with my peers, I realized that many felt the same.  On a daily basis, people can experience extreme changes with careers, relationships, living conditions, and more.

Solution - Little Wins

I set out to find out answer these four questions: 

  1. Can people appreciate growth experienced from the past year, despite facing changes and challenges?

  2. How does progress tracking alleviate feelings of insecurities?

  3. How often do people need to be reminded of their progress to realize/understand their growth?

  4. Can people come see how little steps each day add up, even if they do not see it in the day-to-day routine?


I came to the solution that users want a way to acknowledge their growth, gain insights into their lives, and improve their mindset after such challenging times.

Thus, Little Wins, was born.

Role - Lead UX/UI Designer

As the expert User Experience and User Interface Designer, I developed the prototype, Little Wins, an application that would allow users to enter daily accomplishments, while getting weekly, monthly and yearly summaries to gain confidence in themselves and their accomplishments.

Process

My process consisted of multiple rounds of research, synthesization, designing and ideating, information architecture, wireframing (low & high fidelity),  high fidelity mockups, prototyping, and usability testing.

Tools

Figma, InVision, Miro, Balsamiq

Clickable prototype to emphasize user flow

2. Define - Utilizing Research
"The human brain loves patterns, routines, and boxes—but we also love the thrill of discovering something new about ourselves."
Maria Dyshel, CEO of TangibleAI

Secondary Research Imposter Syndrome, Change, Tracking Progress, & Spotify Wrapped


To better understand problems that people were experiencing, I conducted secondary research to gain differing perspectives.

My objective was to alleviate negative feelings people were experiencing, and showcase the potential growth.

One study found that 70% of people experience imposter syndrome, a feeling that one's success is due to chance or luck.  While many experience imposter syndrome at the beginning of a new career, it can actually affect anyone with any amount of experience.

Levels of stress, anxiety, and depression are only increasing with the pandemic. When someone feels as if they are not progressing, they can become easily overwhelmed. 

Spotify Wrapped showed how people love to gain insights into their personal lives. "People love to know about themselves, to talk about themselves,” explained Dyshel.

1
Screener Survey
6
Questions
34
Responses Recruited
Via Social Media
6
Remote Interviews

Conducting Research - Research Plan to Synthesis

Based on my previous research, I created a research plan to get primary research for user interviews.

I then sent out a screener survey via convenience sampling on social media (Facebook and Instagram) to sort out the required participant characteristics.

Participant Characteristics

  • Experienced major change in the past year with relationships, career, living situation, death of loved one, and/or other

  • Experienced feelings of insecurities with their accomplishments  

  • Expressed interest in improving mindset/situation

  • Willing to stick to a routine

Eventually there was synthesization of the data through affinity maps, empathy maps, personas, and problem statements.

Interviews

The final participants chosen were six women in their 20s who answered a series of questions relating back to the main research questions.

The participants were all interviewed over Zoom, including an audio transcription through Otter.ai. 

Synthesizing Research: Affinity Maps, Empathy Maps, Personas & Problem Statements

Affinity Maps

I analyzed the interviews to pick out the main quotes from each interviewee, in order to group the sentiments together and understand the relationship between the groups of data.

Empathy Maps

I developed empathy maps to create a shared understanding of user needs and aid in decision making.

The empathy maps were a visual way I could organize my insights, observations and quotes I collected from my user interviews to better understand my users’ pain points, goals, feelings, thoughts, and behaviors.

After analyzing the data, two clear categories emerged: those who were struggling and those who were able to appreciate their growth.

Each person interviewed contained sentiments of both.

Personas

Based on the two categories that emerged from empathy maps and direct quotes from the interviewees, I developed two distinct personas.

The personas helped me identify goals to make user-centered decisions, ensuring that I could refer back to them to keep me on track throughout the process.

After researching how to avoid bias, I used gender-neutral illustrations, names, and pronouns.

Problem Statements: How Might We's

Through the synthesis of my data from the affinity map, empathy map, and personas, I created How Might We’s (HMWs) off my primary insights.

HMWs were the best solution to turn these challenges into opportunities for design, because they made sure I was fully understanding the problem I was designing a solution for.

Tracking Your Progress
3. Ideate & Design - Brainstorming Solutions

Ideation

After creating the HMWs, I started brainstorming solutions based on each insight. After 43 sketches, I took the ones that encompassed each HMWs best and developed seven higher resolution screens with Balsamiq to narrow my focus.

Tracking Your Progress

User Stories

The next step was to implement what features should go into my design, without identifying how. I combined my HMWs, Affinity Map and Personas to identify my user stories. I prioritized the order of the user stories based on the Minimum Viable Product (MVP), to contain only the essential features an early customer would need to complete critical tasks.

I included user stories to let my users dictate the design, rather than trying to come up with a biased solution of what I thought was best.

Tracking Your Progress

Information Architecture: Site Mapping & User Flows

Tracking Your Progress

Site Mapping

Based on best practices for UX Design, I created my site map to ensure that each action a user would take would only be a few clicks away. The sitemap let me visualize the various pages I would need for the app. My first sketch, enabled me identify key features I wanted to include, based on my user stories.

User Flows

After considering all the ways users could navigate through my app, I identified two essential paths or Red Routes which were most critical to my design. The user flows allowed for a visual representation of a specific route that a user might take.

User flows are easy to explain without any technical jargon, identify how users would reach their intended goals, and can be done through simple iterations on paper.

Based off my research, adding an accomplishment and viewing progress summaries were the main steps users could take to track and appreciate their progress. Users could feel like they were doing something daily, and at the same time see short term and long term growth.

Beginning Phases of UI: Sketching & Wireframing

Sketching

To make my ideas tangible, I created sketches that would be tested and adjusted before making my higher fidelity versions of my designs. Using my Red Routes, I created sketches of the screens that made up the critical user flows that users will follow when using the app.

I initially sketched on paper, and then reiterated on some ideas, to showcase the next level of ideas. I combined ideas to simplify a process, developed a calendar idea, and used some inspiration from Spotify Wrapped, We’re Not Really Strangers, Google, Dribble, Woop Coaching App, My Empty Jar, and the Happiness Jar. My goal was to create an efficient user experience based on my site map and user flows. 

I decided the best way to synthesize my data was to create a virtual accomplishment jar. This way, users could virtually add their accomplishments to the jar, all while getting summary updates of their accomplishments.

31
Initial Sketches
77
Wireframes
Tracking Your Progress
Tracking Your Progress

Wireframing - Intermediate Step Between Sketches and High Fidelity

 

I created three iterations of 77 wireframe screens based on my sketches, while experimenting with layout, content structure, density of information on the screen, and UI patterns. 

I first developed low-fidelity wireframes, and then moved on to high-fidelity wireframes, to better communicate design details and functions.

I added a share button to the wireframes, since my primary research showed how people love receiving texts from loved ones out of the blue, while other daily alerts could be more stressful. 

As my design process continued, I kept a more minimalist approach, specifically reducing the opacity of the accomplishment jar, to focus on the core goals of the app: adding and summarizing accomplishments. 

The UI principles I employed included keeping users in control (allowing them to edit, move backwards throughout the app), having a clear next step (ensuring users could understand what to do as they move through a task flow, employing one primary action (making sure users understood what the call to action of each screen should be), and including a visibility of system status (inputting a progress bar under the different sticky notes).  

Design Systems: Brand Platform, Moodboard & Style Guide

Tracking Your Progress

Brand Platform

Creating a brand platform allowed me to make design decisions that were “on brand”.

The brand platform help set the foundation for how a customer thinks about and makes associations with Little Wins.

Tracking Your Progress

Moodboard

The vibe I was aiming for the moodboard was people embracing their true selves. The calming aesthetic reflected the brand personality and brand platform.

Similarly as Little Wins allows users to authentically showcase their unique progress and accomplishments, the moodboard reflected those who were doing the same in their lives.

The green color represented wellbeing and yellow represented inspiring creativity.

Style Guide

My style guide ensured that everything with my design remained consistent and efficient

Color

The colors I chose attributed to creativity and wellbeing, reflected the personality of the brand, created an easy-to-understand hierarchy, improved readability for accessibility, and enhanced navigation.

Typography

SF Pro Display, an industry standard, helped create a cohesive look. Additionally, research showed that users find statements written in serif more credible, which is exactly the sentiment Little Wins wants to display. 

Grid

I implemented a 4 column grid with a 12 px gutter to make the content accessible, while helping the viewer understand where to find the next piece of information within the layout.

Tracking Your Progress

High Fidelity- Enhancing the User Interface

I developed 26 screens for the final high fidelity mockups. 

I then worked out the granular visual details of the UI and translated the brand platform and style guide standards into a finished product. 

I moved the examples of types of accomplishments from the information button straight to the sticky note, to accommodate Jakob Nielsen’s 10 General Principles for Interaction Design. Humans have limited short-term memories, so I made sure users had easily retrievable information on the relevant screen, to reduce cognitive effort and load

I also chose to personalize the experience by including the users' name into the progress summaries. This personalization carried into the notifications users would receive when the reports were ready.

I reduced the amount of sticky notes on each page and reduced opacity for the remaining sticky notes, so that users could have a single focal point for each screen, and cater to the specific call to action. This use of emphasis drew the viewers’ attention to specific design elements.

Drop shadow and contrast of colors helped users to interpret visual hierarchy and interactive components.

My imagery made users feel comfortable, compel them to take action, and instill trust in the app.

4. Prototype & Test - Moving in the Right Direction

Prototyping

Using InVision to create the prototype, I made sure I was moving in the right direction, without fully moving into actual development. Prototypes made sure I could generate feedback from users and identify areas that were less user friendly, avoiding costly mistakes down the road.

Usability Testing Plan

I recruited five users to test my prototype via convenience sampling from social media (Facebook and Instagram) and Slack groupchats. I chose five users as research found that testing this amount would turn up 85% of potential problems in an interface. I conducted the remote moderated user tests to see whether or not my app would work as expected.

To start, I created a usability test plan, to narrow my focus during testing sessions.

Objective

  1. Can users uncover usability problems with adding an accomplishment?

  2. Can users uncover usability problems with viewing summaries?

  3. How do users feel after using the app?

Test Tasks

  1. Login and enter the app

  2. Learn how to use the app

  3. Add an accomplishment

  4. View accomplishment/progress summaries

  5. Navigate back to the home page

Participant Characteristics

  1. Five participants recruited via convenience sampling

  2. All must have had some changes over the past year

  3. All must want to improve their lives/mindset

Tracking Your Progress

Usability Testing In Action

I recruited my participants based off of the participant characteristics, developed a series of questions to ask each, and conducted the sessions over Zoom. 

Based off the interviews, I created an affinity map on the quotes I pulled out to uncover common themes.

While I did not discover any problems with my design, I had some minor improvements to make in my prototype.

Tracking Your Progress

Test Report

Based on the affinity map, I created a test report, to identify any challenges users had during usability testing. All the suggested changes had to do with the prototype, rather than the design itself.

Every user tested said the app was straightforward, easy to use, and could complete every task

I implemented any prototype changes into the final iteration.

Clickable prototype to emphasize user flow

5. Closing Remarks

Next Steps

If I were to expand this project, I would create all the remaining pages of the app, to fully complete the experience.

After receiving positive user feedback, I hope to continue this experience by expanding on the notifications portion. After doing more research, I would want to see how I could implement notifications, so users are reminded throughout their week about the good work they are doing.

Adding more notifications would keep the user engaged in the app, while keeping them up-to-date on when the progress reports are ready.

On the psychology side, I would like to research more about the importance of habits, and how I could display those benefits, as users would be using Little Wins daily. Research explains how habits release pleasure chemicals in the brain, and it would be insightful to see how I could enhance the ease of habit-making with the app.

Upon reflecting, I am looking forward to continue enhancing my user experience and user interface skills. I loved being able to see the entire process, and bring my initial concept to fruition, with an idea that could actually benefit users.

“We don’t really take time to acknowledge our accomplishments and progress. I think Little Wins could be a really cool way to appreciate that in our daily lives."
Brett, a Little Wins interviewee