the road to tokyo
It's the summer after the worst of COVID-19, and the world's eyes are on one event: Tokyo 2021. This mobile narrative follows the paths of five young athletes projected to make the Olympic games.
Skills: UX design, content design, design research, product management
Tool: Adobe XD
Designer: Tom Quinn
First, I needed to define the target audience, research the space and create the content
Target Audience
Gen-Z Americans who are interested in the Olympics but not fanatics.
Gen-Z because the athletes featured were all under 21 years old.
Not fanatics because the article would not provide in-depth information on each athlete.
Research
I downloaded the Olympics and the Team USA apps to see what content each design featured. I liked the use of icons on the Olympics app but thought the lack of details on athletes could be improved on. Similarly, I liked the colors on the Team USA app but found it hard to navigate due to the amount of pop-up ads.
Required Content
Thinking about the target audience, I wanted a product that is exciting, easy to read, simple and inviting. That is why I choose to highlight photos on each page instead of text. There are a few sentences about each athlete for background but most of the page features photos and designs that reduce words and emphasize faces and figures.
Next, I had to decide on the color scheme and font style
The colors were important to creating unity throughout the article. There are five main colors: blue, yellow, black, green and red. These are taken from the Olympic rings. In order to make the screens more inviting and subdued, I faded the colors in InDesign by setting the background opacity to 25%. For consistency, I kept the same color (blue) for each of the headlines and matched everyone’s individual color (arrows to their page and the hamburger menu). It worked well that the USA colors are in the Olympic rings, however, I chose the color blue as a constant throughout the article because it also represents America, and these are all American athletes.
The final color decision is on the first and last page. I chose a photo of a sunrise on the first page to signify a new post-COVID-19 era for the world. The final page includes a dark photo with the Olympics to inform the reader that the article has ended. The Century Gothic font was chosen because it is easy to read and the bold keeps the same structure but is clearly bolded.
Then, I began the design process
I began with a flow chart and story board to organize my ideas. I wanted an opening page with a lede sentence that led into a main menu where the user could navigate directly to any athlete. Each athlete's page was designed with consistency and a dynamic photo of them coming off the screen.
Next, I created these designs in Adobe XD
Using photoshop and XD, I translated the designs from paper to the screen. Then, I prototyped the file and created components to emulate a true user experience if built out by a development team.
Finally, I presented my app in a design review
In front of about 20 people, I was given a chance to present and defend my design decisions. This defense gave me experience advocating for a user-centered design to high-level stakeholders. After receiving feedback, I spent a week iterating on the designs and found a balance between the feedback and my original thoughts for the design.