Context
overview
Note: as this app is still in development, only assets that have been made public will be shown in this case study.
What: An application designed to improve spatial awareness and decision-making in youth football (soccer) athletes. Two components: a mobile app (iOS and Android) intended for athletes to use and train with; and a web-portal for football club administrators to gauge their players’ interactions with the app.
Company: ProInstinct
Role: UX/UI designer, usability tester, graphic designer, videographer, sound designer
Timeline: August 2020-Present.
Tools: Figma, Sketch, Premiere Pro, Logic Pro, Illustrator, Photoshop, pen & paper, various sound instruments
Platforms: Mobile (iOS and Android) and Web
Users: Youth football athletes (ages 12-19) and football coaches/club administrators (ages 35-50)
Background
I joined the project in August 2020. A lot of the mockups had already been created by a previous member of the company. I was first brought on board to create a design system and UI library based on the existing assets. This later evolved into a role where I redesigned screens, created new ones, as well as doing video and sound work to better communicate the app’s purpose.
What is it?
ProInstinct is a project by former professional football player and author Leigh Sembaluk. It is based on the thesis that, in team sports, one of the things that separate an average player from a great one is their spatial awareness and ability to use it to create opportunities. In short, the app seeks to improve athletes’ ability to scan their surroundings and make effective decisions.
Screenshot of the iOS App Store Screenshots. Image is too big for a high-res option.
How does it work?
The app offers different sets of exercises that target specific techniques, each set with varying levels of difficulty. The exercises are to be performed against a wall. The player places their phone at an angle toward them that is specified by the exercise. Each exercise is timed at 3 minutes. During the timer countdown, different types of visual stimuli are presented randomly. The player is instructed to react in different ways when these appear: one stimulus instructs them to dribble the ball in one direction; and another stimulus in the opposite direction.
Process
Overarching Goals:
After having worked on the project for a while, I can most effectively distill the overarching goals into the following themes:
UI Library: to consolidate all the design work that had already been done into a coherent UI library;
Graphics and Feel: to create graphic assets and screens that communicated a consistent feel to the app;
Usability: to better communicate the exercise instructions
Each of these goals came with a subset of smaller goals that were made clear only after engaging with each. I’ll address each in turn, and briefly elaborate on how these evolved into more specific tasks.
Some notes on updating the typography for the web portal
1. UI Library
When I first joined, I was instructed to create a UI library based on the existing UI assets. The purpose of this was to have a central location at which the developers could access any and all assets they required for the development of both the mobile app and the web portal.
Challenge:
It became clear that there was a lot of redundancy in the design - especially with regards to typography. There was a whole slew of different typefaces and fonts that made the systematization of the UI library very difficult. Another challenge was that working prototypes of the mobile app and the web portal had already been built based on the existing mockups. If I came into the project and immediately decided to overhaul everything at once, that would require a huge undertaking for the developers - surely a tough pill to swallow.
Solution:
Here’s what I ended up doing: I first consolidated all the existing assets into a UI library along with the typography. To the best of my ability, I looked at the function of each font and typeface and classified them accordingly in a document. Then, in collaboration with one of the developers, I went through the mockups and the typography and removed/replaced the type categories that we agreed were redundant. By removing typefaces and redundant fonts, we managed to reduce the typography complexity for the web platform by about 30%. A similar procedure is underway for the mobile app.
2. Graphics & Feel
Challenge:
The previous designer had done a lot of great work in setting the overall tone and feel for the app: it was minimalist and sat at the intersection between flat and non-flat design. However, I felt like there was more room to create graphics and iconography that relied more on football imagery. I wanted the design to bear in mind that the user base for the mobile app was youth athletes between ages 12-19. This is a big age range, where each year can reflect a very different disposition and maturity. The challenge for me was to replace and create new assets that were fun but not patronizing, while maintaining the same aesthetic.
Solution:
I decided to lean heavily on the football imagery wherever I could. As for operationalizing fun: I wanted some humor and volume to the graphics, but not so much that they seemed juxtaposed to the flatter design elements of the UI. Assets were largely flat, but with a fair bit of shading to imply depth.
One of the designs I came up with
3.0 Usability: instructional videos
We tested out the mobile app prototype with youth football players back in Winter 2020. The players were instructed to choose and perform an exercise, without prior priming from the team as to how it worked, where they were supposed to place the phone, what the stimuli meant, etc. While this was done, I and the rest of the testers observed and took notes.
Challenge:
One of the clearest trends in the data after usability testing was that the users were largely unable to follow the instructions. This meant that the major challenge was to make the instructions more clear. The instructional videos that were on the prototype at the time of testing were proof-of-concept videos made by the founder to serve as placeholders. Moreover, they were filmed with a single camera at an angle perpendicular to the instructor performing the exercises in the videos. This angle made it hard for users to see where the phone was placed (the angle), and when the stimuli occurred. It became clear that the instructional videos were at the heart of this app’s usability: to improve the user experience, the videos had to be improved.
Solution:
I came up with the idea of having multiple camera angles, where the primary angle would be a bird’s eye view shot directly above the instructor with a drone. There would be auxiliary cameras: one placed on top of the wall, and one on a tripod to the side (similar to the first videos). This bird’s eye view would allow for a more intuitive understanding of the angle of phone placement (as the drone angle created a de facto unit circle). We filmed all the exercises from these three angles, as well as a dedicated intro video to make the placement and stimuli semantics clear. Once we had the raw footage, I added overlay animations and text to explicate the instructions.
Screenshot of the sound design process
3.1 Usability: sound signals
Another usability aspect was the addition of sound to the exercises. The purpose of the sounds was to demarcate the beginning, middle and end of an exercise.
Challenge:
The main challenge was to make the sounds as noticeable as possible - to have them cut through, say, a noisy outside environment.
Solution:
First page of the document I used for testing. For this first page, the first section would be covered up, so as to not prime my memory.
The solution required a couple of iterations, and the final iteration ended up borrowing a lot of the methods I used in the preceding iterations. My first few iterations were all mostly synthesized. I tuned everything to C (as that tends to be the note used in most devices in the West - whether it be phones, microwaves, trucks reversing, slot machines). But for maximum sound propagation, I wanted to see if I could make use of constructive interference to physically amplify the signal, as well as more psychoacoustic techniques to achieve a similar effect. I ended up stacking a bunch of synths (with different waveforms) playing the same fundamental frequency, as well as acoustic instruments doing the same. This was done to create constructive interference. I also added yet more synths and acoustic instruments playing different modes (multiples) of the same frequency, e.g. a third up, an augmented fourth up, an octave up/down. Some of them would be tuned to equal temperament at A = 440Hz, whereas others would be slightly sharp or flat - just to see whether that would make the sound more noticeable to the ear.
I would create slightly different versions of these - some with more instruments, some with less. To test which one worked best, I would bounce an audio file containing all of the different versions playing in alternating sequences. I made the audio file loop through the different sequences long enough that I could not remember which specific version was playing at any given moment. I would write down on a piece of paper what the order of the sequences was, then I left it for a few days (with the hopes that I would not remember the order). Some days later, I went outside and played the audio loop, took notes on what I thought sounded good or bad, then referred to my piece of paper to determine which iteration I had semi-blindly determined to be the best.
I later revised this process, but with audio recordings of a coach blowing an actual pea whistle. Similar to the first iterations, I would reinforce the recording with a bunch of synths and other acoustic instruments. Then I went out and tested it again.