WORK         ABOUT         PLAY


Is there an alternative way to make virtual workouts more memorable and exciting? Stay connected with those you love and have new virtual memories, just as easy as real life when you can't be with them.





Runmill

UXUI
2022

We live in a world where social video call has become the primary platform for social interactions. The sedentary activities by the pandemic have increased engagement rate with physical activity. 
Runmill is a platform that builds a private network composed of the people you value the most with consistent and straightforward interaction when running on the treadmill. 












Why Running?





Solo Workouts are Unmotivating

Without the commitment required from a group, exercising alone can be unmotivating.
Demand to Workout has Increased

Increased demand for exercise due to sedentary lifestyles and lack of face-to-face social interaction. (COVID-19)
 Absence of Social Interaction

COVID-19 has drastically changes how humans interact. Since indoor activities don’t get any limitations, people prefer to run on a treadmill rather than running outdoors. AR experience will enhance the social connection. Real motivation comes from other people.








How might we help people work out together regardless of location and time zones so that they can stay connected and create stronger personal relationship?










Solution


With a augmented reality running application, users are able see the three-dimensional sights or interactive videos when calling. This will enhance the reality with memorable AR videos and game-like features; Rumill is the most engaing way to workout. 







Stay engaged while running





Share Music

Share the current playing music and strengthen the social bond. 
Encourage Each Other

Getting motivational quotes on running experiences.
Automated Transcripts

Transcripts are delivered with powerful tools for the communication while running.
Save Moments

Screenshot your memories and save/share them.












Enhance your running experience






Congratulating the Moment

Users receive the congratulating notification when hitting the milestone.
Nearby Friends Notification

Users getting notified when their friends are nearby.
Detecting Physical Activity

Users receiving the notification when the treadmill doesn’t detect the movement.











What value does AR bring?


The Global AR Market size is expected to rise at a market growth of 46.3%. With the help of augmented reality, a virtual image can be superimposed on a real-world view of the user. Runmill shows how AR will transform our workout routine in the future. Also, fitness apps grew by nearly 50% during the first half of 2020.









Business Plan










Competitor Analysis


The direct and indirect competitors made me understand none of the fitness apps were heavily relient on AR experience. Many of the fitness apps only focus on accomplishing the task by oneself. This product will be focusing on having exciting experiences with others in a playful vibe with an AR experience.
 










Persona











Storyboard


Storyboard helped me know when users get engaged in certain moments while getting to know the frustrations they might be facing at certain moments.








Information Architecture










Design Principles



Simplicity

Simple and clear navigation with intuitiveness. Our product has an obvious UI that users can easily find what they are looking for.

Consistent

Maintaining consistency is important across the board.  Our product reduce the cognitive load and make the interaction smooth with consistent UI.

Fun

Our product provides seamless experience in the virtual space. We enhance the running experiences by adding fun adventures and gamification features.










Stylescapes











Style Guide


After doing research on design elements, such as color, typography, and compositions, I came up with a styleguide that would provide the best user experience for the users. The design elements and the style scape reflect the fun parts of the Runmill.

Considering the audience, the app is very fun with pops of color.  The bright colors show the fun and engaging experience the Runmill offers.










(from left to right) Day Mode, Dark Mode, Grid System



            






User Testing


I have conducted user testings by iterating the design to better understand how users interact with the app to better enhance their experience.









“I think it is clear and the app is focused on certain features that doesn’t make a product obscure.”

- Clara, Design Student

“Viewing places in AR is interesting and sounds fun to explore.”


- Yeni, Medical Student

“I am a heavy Spotify user. I really liked that I can share music with my friend while running.”

- Jun, Student










Key Learnings


User testings made me realize there were several flaws in the structure and user experience can be more friendly.











Revised High-fidelity Wireframe


1. Sharing Moment

  • Users wanted to see customized backgrounds so I decided to add a background of the place they ran together.
  • Being able to not only share the moment but also save the moment to the archive.







2. Pop up & Drop shadow for bottom navigation

  • Pop up was to be pulled down according to the users’ use.  I changed the default state because users found it difficult and unnecessary to cut off the bar.
  • Bottom navigation had the same color as other UI elements so users faced confusion. I decided to clarify the difference and put a drop shadow to differentiate bottom navigation from other elements.







3. Having two Different Layouts when Running

  • Users were more interested in AR experience of seeing the views.
  • When the bar tab is opened, not only made the layouts different but also added more contents to differenciate the layouts. 
  • Users wanted to be focused on the training and the record instead of seeing the avatar of themselves; showing the video of their real face is enough.







4. Clarifying UI

  • Users faced frustrations since they wasn’t sure which button to click to, I clarified the UI. Yellow button would lead users to start running at a random destination while the card indicates the users to click and choose a specific place that they’d love to run.











Journey of Runmill



01 Explore
Users can search for specific places that they want to explore in two different mode. Users can change between globe mode and list mode for their better experience in selecting the places. The users can pin/like places and save them for running in the future.
The map shows entire places to have virtual running. Users can like places on the map and save them for future workouts.









02 Run
The home features (Explore, Run, and Profile) the overview of the running experience. 

Encourgament boosts performance. Users can navigate and explore the destinations with whomever they want. They can customize their running experience by selecting differnet views that they want to see from the place.











03 Invite Friends
Users can select thoever they want to run with. 








Apple Watch helps users quickly get access to the app while running.








Responsive Web











Key Takeaways



  • I took my graphic design background and applied it to the project and also learned researching,  design thinking process, and understanding the users’ experiences. Because clarity is so important for UI, creating a design system from scratch was a challenge. 
  • Having very detailed style guide helped me go through the design systems systemitically and consistent, considering the users’ experiences.
  • Users do not access buttons or features as I’ve expected. It is important to keep in mind to make features accessible.










Next Steps


  • UI to be more user friendly and consider the users’ experiences more.
  • Setting a goal for users who want to focused on specific goals. 
  • For the returning users -> the app suggesting what should the goals be.
  • How to end a run.







Make memories virtually across screens.


Connect Your Loves Whenever, Whereever while Workingout


@DOAHKWON