English Ladies’ League
My Role
UI/UX Designer
Duration
3 months
Content
Project Overview
1. Understanding the user
-
User Research
-
Empathy Map
-
Personas
-
Problem Statement
-
User Journey Map
-
Competitive Audit
2. Design
-
Paper Wireframes
-
Digital Wireframes
-
Low - Fidelity Prototype
-
Usability Studies
3. Refining a Design
-
Mock Up
-
High-Fidelity Prototype
-
Accessibility
4. Going Forward
-
Information Architecture
-
Responsive Design
-
Takeaways
-
Next Steps
The Product
English Ladies League is a one-stop shop for womens’ football, designed to improve access to the game for players, help clubs to grow, and to connect local communities.
The Problem
Womens’ football lacks tools to connect players and clubs at grassroots level.
Responsibilities
Conducting interviews, paper and digital wire framing, low- and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating designs. Translating the design to a website.
The Goal
Design an app that connects women with the local football community.
1. Understanding the User
-
User Research
-
Empathy Map
-
Personas
-
Problem Statement
-
User Journey Map
-
Competitive Audit
User Research: Summary
I created a survey, which I shared in Facebook groups, requesting participants. Users who completed the survey were invited to interview; allowing me to create empathy maps to understand the users in greater detail.
The research survey identified two primary age groups (13-18 and 19-30), and that all users have smartphones that could access the app designed.
User Journey Map
2. Starting the Design
-
Paper Wireframes
-
Digital wireframes
-
Low-fidelity prototype
-
Usability studies
Paper Wireframe
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
Digital Wireframes
Following initial ideation, and paper wireframe drafts, I created digital wireframes as initial app designs.
I focussed on making key features accessible, such as the ‘Find a game’ section (example shown).
Filtering option to match users need.
Providing map to show where users can find games in their local area.
Easy access to app features from global navigation
Usability Study: Parameters
Study type: Moderated usability study
Location: London, remote
Participants: 5 participants
Length: 30 minutes
Usability Study : Findings
These were the main findings uncovered by the usability study:
Adding / Creating a game : Users would like to find an easy way to find and create games.
Geolocation search options:
Users want to be able to search by town / postcode - not just their immediate locale.
Course purchasing options:
Users identified a 'buy-now' style option would make buying courses easier.
3. Refining a Design
-
Mock Up
-
High - Fidelity Prototype
-
Accessibility
Mockups
Based on the insights from the usability studies, I added a search bar at the top of the screen for users to search specific areas to find games on a single page.
Before Usability Study
After Usability Study
Mockups
Before Usability Study
A plus button was added to create games, moving users through a simple flow which captures key details when adding matches (location, time, cost).
After Usability Study
Accessibility Considerations
Clear labels for interactive elements that can be read by screen readers.
Consistent Navigation
ensure that repeated components occur in the same order on each page of a site.
Used icons to
help navigation
easier.
4. Responsive Design
-
Information Architecture
-
Responsive Design
Site Map
With app designs completed, I designed a responsive website. I used the sitemap to guide the organisational structure of each screen, ensuring a consistent experience across devices.
Responsive Designs
The designs for screen variation included mobile and desktop devices. I optimised the designs to fit each device and screen size.
Take aways
Impact:
Users shared that the app would practically help finding and creating matches.
One quote from feedback was “the app couldn't make getting involved in football simpler.”
What I learned:
This design taught me that taking a consistent approach, being empathetic to user needs and adapting the design accordingly allowed me to create a relevant and useful solution for users.
Next Steps
Add more educational courses for users to learn more about the game.
Conduct research on how successful the app is in improving access to the game.
Adding functionality for users to purchase matchday tickets.