top of page
cover image.png

Fini

Improving User Engagement with an improved design

About Fini

Fini's mobile app is designed to improve wellness and fitness through group challenges for both personal and professional users.

When

Oct 2022 - Jan 2023

Role

Product designer

What

Mobile App (iOS)

Team

PM, iOS developer

Why

Internship project

Tools

Figma, Figjam, TestFlight

Why I made this project

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.

Frame 10.png
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.

Frame 132.png

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.

Frame 133.png
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.

Frame 134.png
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!

2211.w048.n005.440B.p1 1.png
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.

Frame 135.png
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.

Frame 136.png
High-fidelity design
Frame 137.png
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.

Frame 138.png
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)

Recording 2023-01-28 at 00.52.25.gif
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.

Frame 139.png
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.

bottom of page