Fini

I carried out user interviews to gather feedback on the app and found out that the current Discover feature was not user-friendly. This motivated me to redesign the feature to enhance the user experience.

User interview

I conducted user interviews among people who like to join challenges and attend online events using Zoom and Google Meet.

User interview

Competitive analysis

I analyzed three other competitors who focus on wellness and fitness to find out what we can learn from them and what we need to stay away from.

Wellnesscoach

Stridekick

Communities

All three apps use images to facilitate an easy understanding of the content. They also use a clean layout and color scheme to attract users.

Good

There is no way to search for specific fitness challenges or groups to join (Stridekick). Tags are not sufficient to find the workout that the user wants (Wellnesscoach).

Bad

Competitive analysis

User story

I held a brainstorming session with the PM and developers after conducting user interviews and analyzing competitors to ensure that we avoided any technical issues during the redesign process. We identified the most important features to focus on, and I created user stories for each of these key features.

User story

Flow diagram

To outline all necessary functionality, I created a flow diagram of the new discover page that users can easily navigate and understand.

Flow diagram

It’s time to start designing!

With all the research and planning complete, I can now begin bringing our new discover page to life. I have a clear understanding of what our users need and want, and I have a solid foundation to work from. However, it's important to remember that this is just the beginning!

Low-fidelity design

I created low-fidelity designs for the new discover page, using sketches and wireframes to communicate the overall layout and functionality of the page. This allowed me to quickly test and iterate on different design options before moving on to higher-fidelity designs.

Low-fidelity design

High-fidelity design: Alignment and grid

After completing the flow diagram, I began designing the main screens of the discover page. To ensure consistency in the design, I established a 4 pt grid system and used it as a guide while creating the high-fidelity designs.

High-fidelity design

High-fidelity design: 20 + screens were created

Once the flow diagram and grid system were established, I began creating high-fidelity mockups for the discover page, our primary feature. I redesigned over 20 screens, ensuring consistency and attention to detail throughout the process. I also worked closely with the project manager and engineers to ensure that the design met the necessary technical requirements and underwent QA testing.

High-fidelity design: Prototypes

I connected my high-fidelity designs into a clickable prototype to demonstrate how the different screens interact with each other and to assist engineers in understanding the flow and functionality of the design. (Clickable prototype)

Prototypes

Accessibility check

Once the high-fidelity design was complete, I conducted an accessibility check to ensure that the design met WCAG AAA standards, specifically focusing on incorporating more gray colors to improve its aesthetic and make it more visually appealing for our product rather than catering solely to users with visual impairments.

Accessibility check

Reflection

I faced several challenges during the project, one of which was that I am only a designer, so I had to teach myself both UX and UI design. However, through this process, I learned how to communicate effectively with my team and think logically about the design process. Another challenge was the lack of usability testing sessions, as our development team was still building the necessary systems, such as sorting and searching. Despite this, I am looking forward to conducting usability testing in the future once these systems are in place.