Clickable prototype to emphasize user flow
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.
Empathizing With The User
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:
Can people appreciate growth experienced from the past year, despite facing changes and challenges?
How does progress tracking alleviate feelings of insecurities?
How often do people need to be reminded of their progress to realize/understand their growth?
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.
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.
Figma, InVision, Miro, Balsamiq
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.
Via Social Media
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.
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.
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
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.
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.
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.
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.
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.
Information Architecture: Site Mapping & User Flows
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.
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
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.
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
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.
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.
My style guide ensured that everything with my design remained consistent and efficient.
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.
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.
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.
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.
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.
Can users uncover usability problems with adding an accomplishment?
Can users uncover usability problems with viewing summaries?
How do users feel after using the app?
Login and enter the app
Learn how to use the app
Add an accomplishment
View accomplishment/progress summaries
Navigate back to the home page
Five participants recruited via convenience sampling
All must have had some changes over the past year
All must want to improve their lives/mindset
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.
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.
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.