Introduction
Unseen Athlete is a website that is meant to help athletes gain recognition. It is both a social media platform and a news website. In many ways, it’s like a LinkedIn for athletes. Our UX and UI team worked with Unseen Athlete to deliver a modern responsive website that allows athletes to connect with coaches, talent scouts, as well as each other, while also providing news about the athletes featured on the website.
Meet the Team
As one of the UI designers on the team, my job was to create a style for the brand and to ensure that the website not only looks good, but fulfills the client’s business goals. The clients provided us with many assets from a previous design, and we used their logo and stuck to a similar colour scheme due to their preferences.
Research
Gut Test
We conducted a gut test with our clients to find out what they like and dislike in apps. We had approximately 20 different designs in total, and the clients had up to 20 seconds to decide whether they liked each one.
Our clients liked these designs the best. All of these had relatively dark backgrounds with colours that stood out. This meant that for our own designs, we should also have dark backgrounds with contrasting colours.
The Design Process
The Why — Design Inception
We settled on a central reason for the project, i.e. the Why. It was to give all athletes the same opportunity to showcase their skills within their sport.
With the Why figured out, we were able to move on to the mood, space, colour, shape, and movement.
Mood
We wanted the app to be appealing to athletes. As such, not only did the website have to be centred around social features and have an athletic feel, but it also had to be rewarding and special. On top of that, it had to be inviting, optimistic, etc.
4 Elements of the Visual Language
Space: Due to the website’s features, it had to be organized and connected. Most good websites also look clean.
Colour: Some variant of black and white are essential to most websites. We needed vibrant colours, and based on the gut test and our clients’ preferences, we chose orange and blue. The original design inception also included green as an alternative to orange and blue.
Shape: We wanted shapes that are reminiscent of baseball cards. Additionally, we decided that some degree of roundness would make the website feel more welcoming and sociable.
Movement: A website designed for athletes should feel active and smooth. It would also be nice for it to have colours and shapes that stand out from the rest of the screen.
Style Tile & Brand Guideline
We split off into three different directions so that the clients can be given a choice. We wanted to find out if the clients really would prefer a dark theme with a significant amount of orange. We also wanted the clients to have a choice between orange and primary green, which is an especially vibrant colour that would definitely stand out on a black(ish) background).
The mood boards led to three separate style tiles:
In the end, the clients picked out elements from all three mood boards. They preferred the reddish orange from the white/orange mood board and they also really liked dark backgrounds. While the green did indeed look enticing, orange won out in the end. However, they did choose to go with Trade Gothic, which is as typeface associated with athletics (seen on the Nike website) and featured on the green style tile.
After a few more tweaks, we came up with a style guide:
In addition to Trade Gothic, we decided to use Exo for certain parts such as the top nav. It pairs quite well with Trade Gothic.
User Testing
Wireframes
We added colours and graphics to the mid-fi prototypes to create hi-fi prototypes. We did run into a few hurdles along the way — the biggest one was that the mid-fi screens were late, so we had less time to do the hi-fi screens. Thankfully we were all quite efficient at choosing colours, drawing up icons, etc. and we were able to hand the project in on time.
Usability Testing
We conducted a series of tests for various pages and made changes accordingly.
Of particular note is the profile page. It was due to testing results that the tabs (experience/statistics/media) was ordered that way.
Prototypes
We created prototypes on InVision to showcase how the website functions:
Conclusion
The highlight of this project for me was crunch time towards the end. While our clients were always friendly and easy to talk to and the presentation went off without a hitch, it was on the day before the presentation that the team’s UI designers came together and hammered out all the details in the hi-fi prototypes with incredible efficiency. While it certainly wasn’t an easy experience, we discovered that we work in similar styles and that we could get quite a lot of work done fairly quickly as a team.
That being said, the fact that the mid-fi prototypes got delayed was a major disappointment. Moving forward, I will step in to help the UX team if they’re running behind schedule. After all, I have quite a bit of experience in UX, so I might as well use it toward the team’s benefit.
The app was well-received by the client, so with any luck, it will translate into satisfied users who actually use it to connect with talent scouts, coaches, and each other to advance their careers.
For future projects, I would like to create more interesting graphics with bold colours, and perhaps with a true dark theme rather than what amounts to a dark-coloured frame.