Elmoiz
Elshiekh

👈🏾
Back

LAEB
Wearable

Designing an Apple smartwatch football performance tracking application for amateurs, where they can record and track their football game performance data.

Type
Mobile & Wearable application
Company
LAEB (Start-up)
Role
UX/UI Designer
Year
2021

Overview

The problem:
Amateur football players are using running apps on their apple smartwatches to track their football performance. Where running apps capture the same physical data used in basic football analysis. The interpretation of the data is what differs in the activity. Where it does not produce clear football performance indicators.

The goal:
Is to allow the recording of more relevant football data and produce clear football performance indicators, that the amateur player can use to assess and improve their performance on the pitch.

The responsibilities:
I have been given the responsibility of designing the UX and UI of the Apple smartwatch application, user research, wireframing, user flow, and prototyping.

Saleem app

User Research

The user wants to know everything and only what they want

In-person interviews with amateur football players are looking for a way to assess their performance on the pitch, where they can see an actual measurement of their performance, but not every information is relevant, and even relevant information in a lot of cases does not translate well to tangible information the player can easily understand and benefit from.

User pain points:
1
Input
Too much negative information regarding incidents makes the user anxious.
2
Memory
It's hard for the user to know if they can trust the information they see.
3
Relevancy
Too many notifications assuming what the user wants to know can induce more anxiety than a sense of safety.
4
Goals
Too many notifications assuming what the user wants to know can induce more anxiety than a sense of safety.
Persona:

The user is a young professional who is a football fan and an amateur player. Who is looking to improve his performance on the pitch using his wearable without the need to buy a dedicated expensive tracker for football matches only, but none are made to fit the application, as they don't show proper information and lack ease of use.

Ahmed Elfadel
Age: 28
Family: Single
Education: Engineering degree
Hometown: Doha, Qatar
Occupation: Electrical engineer
Excelsior!
Goals
- Organizing his day and finding his state of flow.
- Improve his football skills.
Frustrations
- Tech that does not work.
- Information that does not lead to results.
About
Ahmed is a young professional who is a big fan of football. He enjoys watching football matches and cheering his favorite team Arsenal. He also likes playing football with his friends in the neighborhood league. He is always looking for ways to stay healthy and improve his performance by documenting his progress.
User journey map:
Actions
Changing wearables
Start the app
Changing screens
Remembering goals
Analyze
Task list
- Remove the wearable they have.
- Wear a dedicated running wearable.
- Making sure that other wearable have enough charge.
- Find the running app.
- Start the running app running wearable.
- Making sure the app doesn't stop with pace change.
- Changing the screen during the match to look at relevant information.
- Remembering the times for each goal.
- Record the time for each goal.
- Extract data from the tracker.
- Compare the time of each goal with the data timestamps.
Feeling
Annoyed that he needs to change and check the other wearable.
Anxious that he needs to start it before the start of the game.
Annoyed that he needs to change screens to look at relevant info.
Stressed that he will forget the exact time for each goal he scored.
Annoyed that he needs to extract and compare each event.
Improvement
opportunities
Using the same wearable.
Dedicated football application.
All relevant info needs to be glanceable.
Goals need to be entered with one tap.
Goal data needs to be recorded on the app.

Wireframes
Design

The wireframe of a minimal movement at a high pace.

Taking the time to draft iterations of each screen of the app. Ensuring the elements making it to digital wireframes are well-suited to address the user pain points. As the initial design phase continued, I made sure to base the screen designs on the feedback and findings from the user research.

- Touchpoints need to be big.
- Having both the options to swipe and tap.

Saleem app
Usability Study:

Following the user when they are playing a game, the user is always running and moving during the match so all of the information recorded needs to start with the start of the match and end with it. During that time inputs by the user should be kept to a minimum and information should be easy to glans at once, without the need to go through menus or other screens.

1
Time of recordings
all of the information recorded needs to start with the start of the match and end with it.
2
Swipe and tab
inputs by the user should be kept to a minimum and Have both the options to swipe and tap.
3
No menus
All information should be easy to glans at once, without the need to go through menus or other screens.

Refinement
& Mockups

Based on the usability study findings the user is looking for glanceable related information without going through menus.
The final high-fidelity prototype presented a cleaner user flow that met the user's needs for stress-less information. Also, the use of graceful degradation helped utilize small real estate.

Saleem appSaleem app
Accessibility considerations:
1
Colors
The use of a unified buttons colors that are sure to contrast with background.
2
Icons
The use of icons to help make navigation easier.
3
Text to image
Provided access to users who are vision-impaired through adding alt text to images for screen readers.

future steps
& Takeaways

Impact:

The app makes users see more into their performance without the need for a lot of input.

One quote from peer feedback:
“Everything at a glance I like it”

Lessons Learned:

I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.

Next steps:
1
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
2
Conduct more user research into adding more manual data entry points on the watch.
3
Research more effective information that can be displayed, and categorize them based on the benefit to the user.