JTBC Seoul AR Marathon | App Design, UI/UX
The JTBC Seoul Marathon was initiated in 1999 to celebrate the 1988 Seoul Olympics. It is an event open to all, with performances to enjoy afterward. During the Covid-19 pandemic, the marathon was held as a virtual race via a mobile app. This app, integrating AR technology, is called AR Marathon, and it enhanced the excitement and sense of achievement associated with real-world marathons. The AR Marathon also helped people release the frustrations and anxieties incurred during the pandemic.
Year
2020 (Professional) 2022 (Personal)
Role
Research, Empathy Map, Storyboards, Wireframes, UI/UX design
Tools
Figma, Adobe XD, Adobe Photoshop, Adobe Illustrator
Project Background
My participation in the 2020 JTBC Marathon Project as a designer ignited my passion for augmented reality (AR). As a result, I decided to develop an AR Marathon app as a personal project after the completion of the JTBC project.
Keywords
Project Goal
Implement AR technology to evoke a sense of accomplishment in virtual marathon participants, mimicking a real race environment.
Develop an accessible AR experience that enables runners to feel as if they are part of an actual, pre-COVID marathon, engaging with all other participants.
Empathy Map
Storyboards
Wireframes & Iterations
Initially, the AR function was used only at the beginning and end of the marathon. However, through several layout iterations, I introduced an AR navigation function available throughout the marathon.
Based on various user scenarios, I refined the user experience to make each step of the marathon more intuitive. This was necessary because I discovered that marathon progress could be confusing and difficult to navigate for users.
To better understand and connect with the feelings and thoughts of users during COVID-19, I used an Empathy Map for thorough analysis. This helped me create solutions that truly meet their needs
Using a storyboard, I aimed to visually demonstrate how real users could interact with our product. This approach allowed us to intuitively understand their behaviors and emotions.
I created a smartwatch layout that displays important information for marathon runners who may not be able to use their smartphones during the race.
Final Wireframes
During the marathon, runners can check messages and the remaining distance via notifications on their smartwatch
AR Marathon
Receive real-time directions with AR Navigation
Community
After completing the marathon, participants can share photos taken at the AR Gantry on the feed with others
After completing the race, participants can take a photo at the AR Finish Gentry and receive a medal
My
People can check their own records and view others' rankings
Takeaways
During the COVID-19 pandemic, many people experienced feelings of isolation and disconnection due to social distancing measures. I personally found that my happiness was directly linked to my interactions with others, which led me to create the AR Marathon. My goal was to provide users with a sense of accomplishment and connection through social interactions with other participants.
To make the marathon app as user-friendly as possible, I streamlined the flow and focused on the AR function section. I also designed the user interface to evoke feelings of joy and achievement, using visual elements such as starting lines, cheering flags, finish lines, and medals. One of the most challenging aspects of the design process was combining AR with message functions. So, I conducted multiple experiments with different wireframes to determine the optimal layout for each screen and function.
In addition to the app's core functionality, I also considered the specific needs of marathon runners using smartwatches. I researched which information was most important to prioritize on these devices and determined the most effective layout for runners during the race.