The leading sport community app connecting members based on preferred activity & skill level.
Case Study
Active Buddy is a digital app designed to help community members find partners based on preferred activity and skill level. With simple but powerful tools, users are able to find their perfect match and spend more time getting active while building meaningful connections.
Role
Role: UI/UX Research | Visual Designer | Branding + Strategist | UX Writer
Timeline: 8 weeks (Sep - Dec 2021)
Platform: Android
Tools: Figma + Invision
Highlights
Primary + Secondary Research
Persona development + Experience Mapping
Sketching + Wireframes
User Testing
High Fidelity Prototype
Challenge
Diving into existing data
While research shows that people are more likely to feel more motivated, be more adventurous, and be more consistent when working out with a partner, finding someone with similar interests and skill levels can be a challenge for many community members.
Current platforms like Facebook groups and Reddit threads are difficult to navigate as users have to wait for a response and using multiple platforms can be frustrating.
Additionally, some apps are unavailable in Canada or are only catered towards specific sports making it a difficult process for users to easily find other community members based on their preferred activity and skill level.
To confirm my hypotheses and learn more about user perspectives, I conducted interviews with peers who partake in physical activity at any level. This allowed me to gain valuable insight on common frustrations, goals, and behaviours which I grouped into three main themes.
Mental Health
Communication
Connection
How Might We Statement
Focusing on the theme of connection, how might we help community members find and connect with exercise partners based on preferred activity and skill level?
User Persona
From my secondary research and interview insights, I developed a user persona to represent my target audience and highlight key frustrations, goals, and behaviours of the user. With the experience map I created, I was able to identify opportunities during Jeremy’s end to end experience with a currently available platform.
Experience Mapping
Following Jeremy’s persona, I created an experience map outlining Jeremy’s journey in order to discover opportunities of a digital solution.
Task Selection
Connect to a community member
Core Epic
Keeping the goals and needs of Jeremy in mind, I developed a set of 30 user stories under 5 epics to help me decide how to create a solution that will be of value to my target audience. In order to create a minimum viable product, I reflected on Jeremy’s main pain points and focused on the following core epic: Connect to a community member.
Primary User Story
As a community member, I want to find other members online on one platform so that I don't have to use multiple apps to find people to play with.
Task flow
Once I finalized my core epic and user story, I developed a task flow to clearly show the specific task of connecting to a community member by filtering users based on preference in order to find the perfect partner.
Sketch Ideation
It all starts with pen and paper
With my main task flow, I started sketching out my ideas including pages and functions I wanted to create a platform that would meet the user’s needs. I pulled inspiration from my competitive analysis and UI inspiration board by noting down areas that I could improve upon with my app. One major improvement I wanted to highlight was the ability to filter users based on preferred activity and skill level and further connect with members by multiple outlets within the app.
Mid Fidelity Wireframes
After completing my sketches, I made wireframes of each screen to get a better idea of the overall flow and layout. This step was important in helping me visualize the constraints of my screen that I did not consider during sketching. Keeping constraints in mind with use of grids, I revised the wireframes to accommodate spacing for different elements on each page.
Usability Testing
Exploring the user’s journey
With my digital wireframes, I created a user test plan to obtain insight on my app’s flow, content, UI, and interactions. From two rounds of user testing, I was able to obtain real time feedback that I implemented to not only improve my designs but also enhance the overall user experience.
Scenario: Users were asked to step into the shoes of Jeremy, a proactive individual interested in increasing his physical activity levels and conduct a few tasks in order to connect with a community member based on his preferred activity and skill level.
Wireframe Revision 1
Wireframe Revision 2
Brand Development
“Products are made in a factory but brands are created in the mind”
- Walter Landor
Keeping this quote in mind, my brand development began in my head by establishing a set of keywords that my brand embodies. With these keywords in mind, I wrote out a ‘More A than B list’ for my brand and started building out my mood board using Invision.
more playful than serious
more casual than professional
more friendly than strict
more simple than complicated
more modern than old fashioned
Mood board inspired by keywords
Exploring Colours
Wordmark & Logo Development
By exploring what’s already out there on the market and keeping my brand identity in mind, my final two brand name options were ‘Active Pal’ and ‘Active Buddy.’ Since my competitive analysis covered ‘Racket Pal’ and ‘Tennis Pal,’ I decided to go with ‘Active Buddy’ to make my brand slightly more distinguishable. As my brand is more casual and modern, I ultimately chose Avenir Black and by flattening the text and playing with vector points, I was able to generate a unique word mark for Active Buddy. As I included a tennis ball in my word mark at the tittle for the ‘i’, I incorporated this into my application icon as well to ensure my brand is consistent and memorable. I added the tennis ball element to the bowl of the letter ‘b’ and created my final app icon below following android constraints.
High Fidelity Prototype
Let’s get active!
The user has the ability to login with various options and is led to the home page where users are able to find a partner, view their upcoming events, and see nearby members.
Find your perfect match!
Once the user has applied filters based on their preference, they are able to select a profile and view important details. In addition, users can invite, chat, and add to friends by tapping the FAB button.
Keep your events organized!
Once the user has sent an invite, a confirmation is shown and the user has the ability to view their events by tapping ‘View.’ All events are organized under ‘Upcoming’ or ‘Pending’ and an interactive drop down menu further organizes the pending events to clearly highlight the efficiency and value my app has to offer.
Marketing Website
To create a marketing site that would offer real value to future users, I highlighted areas that would serve the most purpose to my target audience. Using engaging copywriting and keeping my marketing site consistent with my brand identity, I created both a mobile and desktop viewport keeping responsive design in mind. Through peer feedback and the use of a design prioritization matrix, I created a web content flow diagram to show how the site would flow between mobile and desktop.
Key Learning
Iteration is key to innovation
Discovering opportunities for innovation design and intervention is crucial for providing optimal user experience. By breaking down our project into 3 major steps, I was able to learn the value of iterating our work and understand that testing is a continuous process.
Be open to change
As UX designers, we must be open to constructive feedback and be comfortable with the ambiguity that comes with design. While building out my app, there were often times I wanted to stick with one idea or one design because it’s what I personally liked. However with the practice of usability testing, I really understood the importance of designing for others.
Build on what we know
Applying previous concepts we have learned will help us rationalize our design choices and become better UX designers. Throughout this project, there were a lot of uncertainties when learning new concepts however, incorporating what I learned from previous concepts into the next has helped me feel more confident as a UX designer.
What’s Next?
The future of Active Buddy involves building out the rest of the app to make it a fully functioning digital solution. Once I have the final prototype with all features and functions working including animating some elements, I would conduct user testing to gain additional feedback before moving onto development and a launch plan. Although I designed for Android, I would love to develop the app for iOS since iOS accounts for 53.66% of the market (Statista 2021) and excluding iOS users would significantly reduce the potential of Active Buddy’s reach. After launching, I would observe and monitor trends by collecting both quantitative and qualitative data and learn from feedback to implement design improvements.