Run Club
Connecting runners with the global run community
With thousands of running groups across the globe, Run Club makes it easy to discover and connect with running groups wherever you happen to be. Can't find a running group that works for you? No problem! Run Club makes it easy to create your very own running group and share it on our global platform for the world to discover.
​
From Tracking your runs, to discover or creating your very own group, Run Club makes it easy to find your new run family!
Project type: Mobile App & Responsive Website
(case study)
Timeline: Jan -June 2021
Created in: Figma
Role: Product Designer
The Problem
Where to begin?
Running is like that secret sauce... once you know, you know, but when you don't know how or where to begin, finding a running group can be a daunting task. There's no official listing for running groups and maybe you're just in town for a few days. Maybe, you just moved to a new city, or across the globe! There are so many barriers to finding the amazing running groups that are all around us.
The Solution
Run Club
Woof addresses numerous user frustrations by creating a simple, streamlined approach to the dog adoption process. Woof makes finding your next four-legged friend a breeze with its clear navigation, vibrant interface, and easy application process.
Exploratory Research
Diving in
At the discovery phase of my project I conducted exploratory research in the form of interviews and surveys. Research was conducted on five individuals (two males and three females) ranging in age from 35 - 68. With the data gathered I created empathy maps and user personas to better understand the users I was designing for. Through this research I was able to determine that users wanted a clear process for dog adoption with some helpful features like filters but not so many options that the process becomes busy or complicated.
Key Insights
Users want easy to use navigation menus
1
Users want a clear adoption process
2
Users would like useful options such a filters, but not so many that the interface becomes busy or complicated
3
Many users feel that it is more ethical to adopt as opposed to buying from a kennel
4
User Personas
Laying the foundation
At the outset of the project two aggregated personas were created based on exploratory interviews and surveys. One such persona was Benson, a 35 year old marketing consultant that feels lonely when his partner is out of town. Referencing user goals and frustrations throughout the entire product development process ensured design choices were aligned with their needs, like having filters in place to find dogs that are hypo-allergenic.
​
User personas were focused on four core attributes: personal details, goals, frustrations, and story. The ability to reference those four categories was particularly helpful while working through customer journeys, creating research goals, ideating on UI features, and prototyping. Feelings of loneliness, the desire for companionship, and a clear process for adoption became the foundation we would build on.
​
User journey's and empathy maps were also pivotal in guiding our future design choices and keeping us focused on user needs and pain points.
Paper Sketches
Starting the Design
Sketches were an integral part of the design process for the Woof website. The ability to rapidly flesh out multiple iterations of key pages was crucial in regards to finding a layout that aligned with user needs.
​
One of the challenges we encountered at this stage of the design process was a tendency to avoid making users scroll down a page. Looking at other designers layouts and visiting several websites I admire was extremely helpful in overcoming this roadblock.
​
At this stage of ideation we were still very much exploring the look and feel for the website. Thankfully sketching is a quick and efficient use of time so it didn't take long to settle on an aesthetic that we wanted to move forward with.
Early sketch of the Woof Homepage
Usability Study Findings
Diving into the data
After we built the low-fidelity prototype we conducted a usability study to gather valuable user data which would enable us to further refine our designs.
Study Parameters
Study Findings
Low Fidelity Prototype
Early Designs
The original low-fidelity prototype outlined the user flow of: browsing dogs for adoption, selecting a dog, viewing their profile, and lastly, filling out and submitting a completed adoption form.
​
At this stage I was able to test the flow with users and gather valuable data about their experience navigating through a basic mockup of the app.
​
One of the key takeaways from the research I gathered here was that I needed to scale the size of the content down so users could see more without scrolling. By doing this and adding in a few subtle visual cues, users found it easier to find the additional content below the fold.
Mockups
Finalizing Designs
Our usability studies were instrumental in shaping the finalized mockups that would be used in the High-Fidelity prototypes.
One area where usability studies were particularly useful in making refinements was the homepage. Feedback such as content being below the fold and content scaling factored heavily into final designs. Below are side by side comparisons of the low-fi and hi-fi versions of the homepage.
Desktop versions
Mobile versions
High Fidelity Prototype
High Fidelity Prototype
The high-fidelity prototype was built in Adobe XD. Check out the fully interactive version below. The user flow for the project is adopting a small, teenage, male dog – Try it out below
Interactive High Fidelity Prototype
Accessibility
Equitable Design
The Primary and secondary color pallet used on the site meet WCAG 2.1 for Accessibility in regards to contrast. This ensures people with limited or low vision will have an easier time discerning text.
1
Headings with different sized text were used for create clear visual hierarchy.
​
Images were tagged with Alt. text providing users who are visually impaired with a richer experience.
2
Landmarks were used to help users navigate the site, including users who rely on assistive technologies such as screen readers.
3
Takeaways
Impact
Our target users shared that they found the website easy to navigate, intuitive, and visually pleasing. Usability testing between low and high fidelity prototypes revealed the important role colour plays in helping users navigate web pages. Additionally, time on task and drop off rates were markedly improved between the low and high fidelity versions of the site. Lastly, all users that partook in the system usability scale said they would use the website in the future and enjoyed the experience.
Final Thoughts
This project was inspired by the massive influx of people who adopted dogs during the covid-19 pandemic. Digging beneath the surface to uncover peoples motivations to adopt and the challenges they encountered along the way was incredibly interesting for me. From a human standpoint the desire for companionship during such a socially isolating time was a key motivator for adopters, particularly single adults and couples who live in the city.
​
From a design standpoint, the biggest takeaway I had from this project was how transformative adding colour to mockups and prototypes can be for users. The influence of colour was profound in the way that it created visual queues and affected their ability to navigate effectively.