Kids Register

Sports Web App - UX/UI Design

I re-designed a web application, aimed at sporting academies for children. This system lets admins organise and manage accounts, courses, events and promotions. Designed using Sketch and prototypes created in InVision.

Project Overview

What I Did:
UX/UI, icons, user flows, wireframes, research and branding

The Client & Brief:
We Make Footballers are a UK football coaching franchise and a client of a design agency I worked for. I was asked to re-design Kids Register, their web application which allows other sports academies to  organise and manage profiles, courses, events and promotions. They also wanted to encourage other sports academies to purchase a subscription to this service.

The Problem/Old Design:
Below are examples of the application’s old design. It was messy, inconsistent, confusing and rushed. The brand colours were not used and the colours that were implemented competed with each other and wasn't used semantically, making navigation difficult. Because of all this, the client was struggling to pitch the platform for other companies to use.

Research Findings:
I conducted meetings and would liaise with stakeholders and developers to gain an insight into the original platform. I asked about feedback provided by the potential clients that they pitched to, clarifying the importance and hierarchy of content and what the team felt the main problems were with the system.

From this I discovered:

  • Financial Reports - Potential clients said data was cluttered and squashed. It wasn’t made clear to team members that results can be exported into a csv format, which was important to them. Developers found tables hard to implement due to lack of wireframes originally supplied.
  • Accounts - Majority of potential clients said it would be more useful if they could see children account details with their parent’s details together. Some mentioned that it was hard to find parent contact details.
  • Calendar - Potential clients found it hard to understand how to use. Team members wanted it to show more activities such as upcoming sporting events and start and end dates of promotions.
  • Dashboard - Some potential clients wanted to be able to see comparisons on the performance of the different locations where their academies are held. They also wanted to see monthly info. on earnings, signups and promotion performance. Team members wanted more of an overview on what activities are occurring on a daily basis.
  • Usability & Overall Look and Feel - Majority of potential clients were not comfortable browsing data without understand the meanings of the colours used. Team members found it difficult to select various options as they were very close together. They also wanted a Help/FAQ page, as navigation was unclear many times. Team members found it difficult to select various options as they were very close together. A couple of members originally found it hard to distinguish some options on the navigation bar as icons were duplicated or made similar to each other i.e. sometimes they would select Courses instead of Events.

Planning, Sketches & Wireframes

Wireframed concepts of dashboard and user journeys for how sports academies can manage profiles and courses.

Visual Components

I adhered to the colours used in the logo, whilst also expanding upon them by using different saturations for hover and active states.

I also created extra colours for primary and secondary navigation. Brand colours were used semantically to simplify overall user experience i.e. green represents success and save functionality, whilst blue represents hyperlinks and editable content.

I created sets of icons, that use a rounded style to reflect on the children and to create a friendly and practical theme. Icons were also provided with labels to clarify functionality.

Final Design
(Managing Accounts)

Blue underline links are included in data tables to allow easy access to a profile and email parents directly. In the selected profile section the parent info. is displayed next to a list of his/her children, whereby the user can view payment history, current courses and events a child is participating in and payment statuses.

Final Design
(Managing Courses)

Courses are categorised by location and the selected course provides an overview of criteria the child needs to fit in order for him/her to be registered. The child is automatically added to the register once payment has been completed.

Final Design
(Dashboard)

This Month's Summary:
A modular dashboard design that implements widgets that highlight overall company performance such as total earnings. These are colour-coded with green representing an increase and red representing a decrease. When the user clicks ‘More info.’ they will be navigated to the Reports page where they can be provided with more visual data.

Today’s Activities:
A summary of all courses, events and promotions that are occurring. The user can click the blue link to access the selected item for more information. There is a toggle action that allows the user to see a monthly calendar overview of activities.

Performance of Locations:
Compares the course and event ratings, revenue and attendance. Course and event data is separate using a simple tab system.

Colour Blind Test

I used an online tool to render how web pages could be seen by a user who may suffer from different types of colour blindness.

Approx. 1 in 12 men (8%) and 1 in 200 women in the world are affected. In Britain there are around 3 million colour blind people (about 4.5% of the entire population). To help solve issues with colour blindness for this project, I relied on:

  • Limiting the colour palette as having fewer colours leads to fewer instances for confusion.
  • Using high contrast
  • Using icons on buttons and navigation to help the user identify functionality without relying purely on colour

Learning and Takeaways

Involving Developers from Start to Finish
Developers appreciated being shown wireframes and prototypes as well being asked about project constraints, feedback on solutions and time/difficulty they would have for implementing design ideas.

Communication with Stakeholders
I benefited from involving stakeholders from beginning to end, asking about issues they had with using the application and what functionalities/content are the most important. I found it useful to also show them basic concepts to check if they were happy with the solutions.

It Would Have Helped to be able to Communicate Directly with Potential Clients
Due to project timeframe and lack of availability from the potential clients that the company originally pitched the web app to, I was limited into gaining additional info. on user feedback. This was due to me joining the team after this happened. Rather than being able to setup a focus group or meetings, I had to rely on creating an email survey, which only a few people replied.

I also compiled all original feedback the company received from the clients. I then spoke with all team members team to check to see if there was any missing info. but also for their personal feedback for when they first originally used the app.

Available For Work

If you’re interested in working with me or want to know more about my work, please feel free to get in touch!

Contact Me Back to Portfolio