Fall - Winter 2022
Motifit Website
Creating a flexible platform that encourages individuals to maintain their fitness progress.
PROJECT DETAILS
OVERVIEW
My Role
UX/UI Designer
Duration
August - November (4 months)
Tools
Figma, Maze
What is Motifit?
Motifit is an online based platform that helps effectively create and organize fitness activities while also allowing folks to share their goals and progress to a greater community.
THE GOAL
We've noticed that individuals currently rely on many methods to track, guide, and boost their motivation to maintain their fitness hobbies, but they are often decentralized. The goal of this project is to build a flexible platform that enhances the user's experience with scheduling fitness activities, creating goals, and sharing progress.
Image Placeholder
RESEARCH
Finding focus with competitive analysis and user interviews
COMPETITIVE ANALYSIS
Understanding what works & what doesn't
We wanted to analyze the products currently exist on the market - taking into account useful tools and lacking features to further fuel the discussion of impactful steps we could take to create an expansive website that embodies all the key features.
USER INTERVIEWS
Empathizing with our users
The objectives for these interviews were to determine users' motivations, understand common pain points, and discover the tools users utilize to track hobbies. We conducted a series of moderated interviews with 5 participants over the course of 3 days. Here are the insights we synthesized:
Sustaining a new fitness hobby is difficult because there is a lack of accountability.
Finding fitness groups and activities within a certain vicinity is time consuming and daunting.
There is an expressed desire for a way to obtain curated content specific to the person's interests.
Visualized progress is necessary for continual motivation.
People enjoy and rely on the relational aspect of pursuing a hobby.
Progression of a fitness goal is often measured by the frequency of time spent on it and the mastery of a specific skill.
HOW MIGHT WE'S
Focusing on our user's needs
With the insights gained from our preliminary research, we used them to guide the questions that addressed user needs and create potential solutions. The question framework "how might we” helped focus and encourage our design attention on opportunities and generate targeted ideas.
HOW MIGHT WE
Make planning a schedule for hobbies be an easier, more rewarding process?
HOW MIGHT WE
Help users feel confident about measuring and sharing their progress for a hobby online?
HOW MIGHT WE
Help users find and connect with resources to supplement their hobbies?
HOW MIGHT WE
Make planning a schedule for hobbies be an easier, more rewarding process?
HOW MIGHT WE
Help users feel confident about measuring and sharing their progress for a hobby online?
HOW MIGHT WE
Help users find and connect with resources to supplement their hobbies?
HOW MIGHT WE
Make planning a schedule for hobbies be an easier, more rewarding process?
HOW MIGHT WE
Help users feel confident about measuring and sharing their progress for a hobby online?
HOW MIGHT WE
Help users find and connect with resources to supplement their hobbies?
HOW MIGHT WE
Make planning a schedule for hobbies be an easier, more rewarding process?
HOW MIGHT WE
Help users feel confident about measuring and sharing their progress for a hobby online?
HOW MIGHT WE
Help users find and connect with resources to supplement their hobbies?
USER PERSONAS
Creating actionable insights of our user's behaviors
We created two distinct personas to help ground our decisions in real user needs, goals, and expectations.
IDEATION
Understanding the goals of our target users and uncovering issues that need to be resolved.
INFORMATION ARCHITECHTURE
Synthesizing the sitemap
Leveraging the insight gained from the user's mental model, we organized a rough guide of how the website would function. This helped us understand the basic hierarchy and relationships between each page.
USER FLOW
Uncovering potential issues with the user journey
Our user flows are based on two end goals: finding and joining a group and creating a new fitness goal. We found clarity on what needed to be designed and tested by translating the user needs and goals into these user flows. Most importantly, this process helped us focus on creating a user-centered experience that is both cohesive and simple.
Creating and Editing a Fitness Schedule
Finding and Joining a Fitness Group
WIREFRAMES
First mockups and iterations of the web layout
We created two distinct personas to help ground our decisions in real user needs, goals, and expectations.
VISUAL DESIGN
Building the brand of Motifit
Through our visual design, our goal was to convey progress and energy. We gravitated towards color themes that were bold and exciting, building a brand that portrayed fluidity and transparency to support the message of collaboration.
Brand Values
ENERGETIC
INSPIRATION
COLLABORATION
PROGRESS
DYNAMISM
Color Palette
Brand Elements
PROTOTYPE
From our high fidelity wireframes, we created a prototype to prepare for usability testing. This prototype showcases 2 solutions : finding and joining a group and creating a fitness goal.
TESTING
Developing iterations from feedback on our usability testing and preparing the final prototype for handoff
USABILITY TESTING
First mockups and iterations of the web layout
After polishing our prototype design, we conducted 5 moderated test using the program Maze. Here are our findings:
Goal 1
Find and join the San Diego Hiking Club
4 of 5 participants completed task
Time to complete task was under 2 minutes
Most mis-clicked page was the log-in
Goal 2
Create a new goal and invite a friend
5 of 5 participants completed task
Time to complete task was under 2 minutes
Most mis-clicked page was the log-in
AFFINITY MAP
First mockups and iterations of the web layout
Our usability testing pointed to key revisions that must be made in order to gain user trust and reliability in the product. Creating a new goal and adding a friend task was a success, and had no misclick rate once users got past the fitness schedule overview page.
One user found success in using the search bar to find groups. The other three users completed the task by filtering with the tabs.
PRIORITY REVISIONS
First mockups and iterations of the web layout
We proceeded with the following features to improve the “finding and joining a group” flow:
Add a filter function in the search bar to make the interface more concise and for users to be able to apply the specific filters they want for their searches.
Create more contrast between the bottom navigation menu and the active screen in order to indicate higher prioritization for its function.
Make active icons in the bottom navigation more distinct from the non-active icons by iterating on weight/fill/color.
Move the calendar and list icons to the right of the “Overview” title on the fitness schedule page to make the screen look more concise.
Take out the log-in screen from each of the task flows
Iterate on the “current goals” cards so that the information does not overwhelm the users by looking cluttered
SIGNIFICANT TAKEAWAYS
What I learned throughout this process
LISTEN TO YOUR USER
In the initial research stages, I found it more vital to listen to the users during our interviews rather than assuming solutions. They will often provide the reasons as to "why" a design decision should/should not be made.
ITERATIVE DESIGNING IS KEY
It is always important to keep iterating on a design in order to have as many options to choose from. My mentor gave me a friendly reminder to sketch before digitizing - it is important to do the low-fi designs first!
RESEARCH BASED PRIORITIZATION
Prioritizing what you should design/focus on should always have the user's goal in mind.
LISTEN TO YOUR USER
In the initial research stages, I found it more vital to listen to the users during our interviews rather than assuming solutions. They will often provide the reasons as to "why" a design decision should/should not be made.
ITERATIVE DESIGNING IS KEY
It is always important to keep iterating on a design in order to have as many options to choose from. My mentor gave me a friendly reminder to sketch before digitizing - it is important to do the low-fi designs first!
RESEARCH BASED PRIORITIZATION
Prioritizing what you should design/focus on should always have the user's goal in mind.
LISTEN TO YOUR USER
In the initial research stages, I found it more vital to listen to the users during our interviews rather than assuming solutions. They will often provide the reasons as to "why" a design decision should/should not be made.
ITERATIVE DESIGNING IS KEY
It is always important to keep iterating on a design in order to have as many options to choose from. My mentor gave me a friendly reminder to sketch before digitizing - it is important to do the low-fi designs first!
RESEARCH BASED PRIORITIZATION
Prioritizing what you should design/focus on should always have the user's goal in mind.
LISTEN TO YOUR USER
In the initial research stages, I found it more vital to listen to the users during our interviews rather than assuming solutions. They will often provide the reasons as to "why" a design decision should/should not be made.
ITERATIVE DESIGNING IS KEY
It is always important to keep iterating on a design in order to have as many options to choose from. My mentor gave me a friendly reminder to sketch before digitizing - it is important to do the low-fi designs first!
RESEARCH BASED PRIORITIZATION
Prioritizing what you should design/focus on should always have the user's goal in mind.
Want to build something together? Let's connect!