About the Project
The Design process
Overview
MotionMatch is a comparison app for discovering all sports activities around a location.
The Challenge
The project was born after my passion for sports. Over the years and living in different cities, I've noticed that when people want to commit to regular exercising they struggle to find information about all the activities around their location, or they find it in a way that is incomplete, unreliable and not comparable.
Practising sports is exciting, there should be a more efficient way to discover this world! ;)
Approach & Context
Following the Design Thinking process, I was responsible for the entire development process, including: user research, wire framing, prototyping, UI design and usability testing.
Project
-
Solo project
-
5 months long
-
Case study
Tools
-
Google Forms
-
Usability Hub
-
Balsamiq
-
Adobe XD
EMPATHIZE
Problem Statement
“Sports enthusiasts need a better way to compare information about all the sports activities around because they want to plan more efficiently their sports lives.”
Hypothesis
“We believe that by creating a comparison app to discover all the sports activities around a location, we will help sports enthusiasts to take better decisions in their sports lives.”
Market Research
To learn about the situation of the market and the current players:
Competitive Analysis
I checked all available apps for finding sport venues, specially focusing on the ones actively working in Europe.
I analysed them by several characteristics like: partners' network size, financial investment, business model, growth, communication and social media efforts.
UX Analysis
I also analysed their mobile apps focusing on the UX side: usability, navigation, features, technical advantages/disadvantages, compatibility and identified their differentiation factors.
 |  |  |
|---|---|---|
 |  |  |
Conclusions
The competitive and UX analyses showed that existing sport browsers are focusing on booking venues or sport passes, in some cases lacking a good user experience. There's a place for an app focused on a previous user need of discovering and comparing sports activities, working as a meta search engine.
User stories
Having done the above analyses was critical for creating the firsts user stories.
User Research
I continued to the user research phase where I performed user surveys and interviews.
Surveys
Through user surveys I was able to quickly reach quantitative data within my target group, specially focused about people habits when it comes to sports. I gathered valuable information about the users main motivations, preferred sports, regularity, decision factors to enrolling in an activity and more.
Some interesting findings of the surveys were that before enrolling on a new activity sports enthusiasts:
• tend to base their decisions just looking up on Google or relying on recommendations from friends/acquaintances.
• consider the most importante variables for the decision are the location and the price.
These insights were in line with my main hypothesis and encouraged me to keep digging with further user research.
Interviews
Through interviews I was able to get qualitative data, which I analysed with affinity maps.
I learned a lot about my target users' behaviours, frustrations and needs.
The analysis not only left me a good bunch of insights for future features but also let me clearly visualise at least 2 kinds of "sporters"(users) with different goals.
Personas
The conclusions of the user research were the base for shaping my user personas. Meet Anna and Max!
DEFINE
User Journeys & User Flows
To start the analysis for the flows, I created realistic scenarios and user journeys for Anna and Max.
These journeys were the base for drawing up user flows.
Sitemap
At this stage, I was able to start focusing on the information architecture of the app, so I used card sorting to define my site map.
IDEATE
Wireframing
With my main flows in mind I started drawing some low fidelity wireframes in paper first and later passed them to mid fidelity in Balsamiq. Simultaneously, I reviewed many known apps with similar flows as mine in order to get some inspiration.
I increased again the fidelity of the wireframes in Adobe XD.
PROTOTYPE
Prototyping
Once I already had a good idea of the main screens, and I created a mid fidelity prototype. Below you can see an example of the first approach for the searching and filtering feature.
EVALUATE
Usability Tests
On the evaluation phase I tested my prototype conducting 6 usability tests (moderated remote) using Skype.
The goals were:
• To determine if users understand the basic app functionalities and the value it provides,
• To observe how users navigate and find information about sports activities
Apart from some demographic and open-ended questions, I required users to complete 3 scenario tasks. Each of the tasks were meant to test one of the following flows:
• Searching and filtering sports activities
• Contacting the activity organiser
• Saving an activity in favorites and managing promo alarms
Analysis
I gathered my notes from the sessions and organised them with affinity maps on the board. This helped me to visually spot patterns of behaviour between users. I prioritised the issues with an error scale, using a rainbow sheet to determine which were the most crucial usability issues.
Issues & suggested Solutions
• Issue 1 > Participants didn't know at first how to filter the results (high severity)
Suggested Change: Add some filters from the beginning when user defines the activity and location.
• Issue 2 > Participants got distracted/confused with "Motion" button (medium severity)
Suggested Change: Rename the first 2 sections of the bottom navigation bar with clearer wording.
• Issue 3 > Participants assumed the top right icon was an options’ menu (medium)
Suggested Change: Avoid a button for transition to a list view.
• Issue 4 > Participants return to activity details after messaging or saving (medium)
Suggested Change: Replace the 2-options for an "ok" button which returns directly to the activity details
• Issue 5 > Participants felt annoyed by the question/step "ready to search?" (low severity)
Suggested Change: Redesign this screen with relevant filters
Click here to see the full usability test plan and test report.
Conclusions & 1st Iteration
The findings of the evaluative research were fundamental for the evolution of my project. I conducted the first iteration of my app based on this findings and my ideas on how to fix each of the issues on the functionality.
For example, in the issue 1, 33% of users had problems understanding how to filter the results. Although other users had less or no problem finding the filters, I considered the issue with a high severity due to the relevance which the filtering feature has for the whole project. Therefore, I decided to re-think the whole flow of searching and filtering.
I also reviewed my previous user research and found out that according to users the most important factors for selecting a new sport activity were the location and the price.
With this criteria in mind, I decided to add this 2 variables as "quick filters" at the beginning of the search flow. Further more, I reduced the amount of clicks in the flow and I added more user friendly commands in the form of buttons, sliders and switches.
Issues: 1 - 2 - 3 - 5
Flow: Searching and filtering activities
Peers Feedback
After this iteration I validated the changes with my peers and mentors.
The new flow with the quick filters not only reflected to be a more simple and intuitive way of searching, but it also offered more control to the users by giving the option of advanced filters (if needed).
Flow: Searching and filtering
Polishing the Design (2nd iteration)
Now that I knew I was stepping solid ground, I was ready to start focusing on more graphical sides of the app.
I conducted a new and important iteration of the app adding the visual aspects. I considered emotional design criteria for selecting the colors and followed known design guidelines (like iOS HIG and Material Design).
Click on the link to see the complete design language system and the style sheet.
 |  |  |
|---|---|---|
 |  |  |
Screens Evolution
On the images below you will find the explanations of the last iteration together with the evolution of the screens along the design process.
 |  |  |
|---|---|---|
 |  |
Collaboration (3rd Iteration)
At this stage of the design process, it was very important to receive further feedback from peers and mentors, and also to conduct a Preference Test. They gave me new ideas and helped me to spot issues on my design, especially related to fonts/icons sizes and contrast.
With all those in mind, I immersed myself in a new iteration to make my app accessible for as many users as possible, focusing on colors, contrasts and decreasing the cognitive load on some screens.
