BuddyDeck
Overview
Challenge
Due to the lockdown, social distancing had been limiting the college students to maintain exercise routine. Thus, the project is to explore ways to help them stay healthy during the pandemic.
My Role
User Research
Human-Computer Interaction
Visual Design
Team
Chris Tae Seo Lee(Me)
Catherine Pan
Trisha Guttal
Leo Liang
Time
1 month
Problem
College students find it difficult to coordinate exercise schedules with their friends and motivate themselves to exercise during the pandemic.
Solution
Design a social workout mobile app featuring multiple card decks that users can select for their workout. The user will follow the workout activities on the cards during the game, available in both single player and multiplayer modes.
Solution Preview
Schedule and Host a Game
Since you and your friends are busy, you can schedule a game ahead.
BuddyDeck respects the users' time, and we want the users to efficiently schedule a time to exercise with their friends.
Select a Game Deck and Invite your Friends
You can select a card game deck to play with your friends
Working out alone is lonely for the college students during the pandemic, so you can invite your friends to play workout decks.
Take turns to exercise with your friends
Enjoy exercising with your friends by being given a set of exercise cards
BuddyDeck has multiple set of random exercise cards to make the users move and exercise with their friends. Take turns to workout. After a game, you can see your result and progress!
Process
1st Sprint
For the first sprint, I was teamed up to follow the HCI approach and design a product. The steps were user research, ideation, design, prototyping, usability testing, and evaluation.
2nd Sprint
For the second sprint, I individually revisited the product with 2 approaches:
1) revisiting the major UX and usability issues from the first sprint that weren't feasible at the time.
2) making the product into a more viable one in the actual market (treating the product as if it's a real one)
User Research
User Interviews and Affinity Diagram
We've set our target audience as the American college students who have exercised or attempted to exercise since the beginning of the pandemic. Thus, we tried to contact everyone we know for the virtual interviews. After the interviews, we’ve consolidated the interview data into different categories. Our goal was to explore the current motivations, practices, challenges, and needs of target users as they maintain an exercise routine during the pandemic.
User Insight
👫The lower the intensity of the workout, the more likely that participants choose to exercise in social settings. Similarly, the higher the intensity of the workout, the more likely it is that participants choose to exercise individually.
👩💻 Participants are motivated to exercise, but have limited time due to their other commitments, such as academic responsibilities.
😩Working out at home is more convenient for our participants. However, it restricts the variety of exercises participants can do due to limited space and facilities.
🏃Some participants place heavy focus on the social aspects of exercising, while others solely care about self-improvement.
Now, meet Emma
As a team, we've utilized the user insight to create a user persona to have every teammate on the same page.
Emma Lorenzen is a 20-year-old junior at Cornell University. She studies Biology in College of Agriculture & Life Sciences and lives in a 2-storey home in a neighborhood 5 minutes walking distance away from Cornell’s campus. She shares the apartment with 4 female housemates, each having her own room in the house. Emma has also grown to deeply prioritize her friendships, but it’s been harder ever since the pandemic and school started.
Her End Goals are...
-
She records her deadlines and workout sessions on her calendar app.
-
She wants to feel healthy both physically and mentally.
-
She wants to coordinate running schedules to enjoy time and catch up with her friends on the weekends.
Product Ideation
We individually sketched out ideas and consolidated them to become one product. Interestingly, our Ideas were divided into Before Workout, During Workout, and After Workout; it helped tackle all the insights from our user persona.
We wanted to create a social workout app that would help users to schedule a workout card game with their friends and show them the results and progress of fitness.
Product Sketches to Task Flow
The sketches were just ideas, so we needed to connect the dots to create a overall task flow of the product. Then, we divided the tasks to each other.
Prototyping
This is the very first version of our prototypes that we mainly focused on. We used this to test the users on a virtual call.
List and Filter Flow
Gameplay Flow
Two Major UX Issues
Although we found many UX and Usability issues, here are two major design issues we've tackled on.
List & Filter UX
The users were confused about and lost on the list screen when they were trying to discover preferred card decks. The users wanted to explore a variety of card decks they choose from without trying to dig through the list.
Vertical to Horizontal Screen
We found a dramatic shift from vertical to horizontal view was rather distracting for the users. We initially went with the horizontal view for the gameplay experience since our product is a social fitness that features game-like cards. The horizontal view usually fits with the games for the better visibility.
Introducing BuddyDeck V.1
As we tried to look for the most feasible solution within the timelime, this is what our product, BuddyDeck, looked like when we wrapped it up.
Search and Filter
Gameplay Screen
Revisiting BuddyDeck V.1
I gave myself more personal time to work on BuddyDeck after the final deliverable. First Usability Testing was conducted to evaluate and adjust feasible, fast solutions.
Thus, I revisited the prototype to make it more viable as a product in the market and to bring bigger UX and usability changes that tackle the issues we’ve mentioned in the evaluation process.
List & Filter Iteration
The users once mentioned that they wanted more diversity on the first list page and wanted to explore more. I went back to one of the interviewers and asked few more questions to clarify what information was valuable for them when choosing the card decks.
List & Filter Final Design
Changing from List format to Exploration format
Gameplay Screen
Two things were considered in this iteration:
1) We found that the users were struggling to adjust to the dramatic shift from vertical to horizontal screen once they start the game. I made the design into vertical format for smoother experience.
2) Our final deliverable was designed for one mobile phone, but I realized that using one screen to play with the users' friends were rather distracting and pointless. I made BuddyDeck gameplay experience available on multiple devices. Thus, I added a "Waiting Room" screen for the users to get ready to start the game. And also, the users take turns to exercise.
Gameplay Screen Final Design
Visual Clarity and Smoother Experience
Branding Strategy
Encouraging the right way to interact with friends via our product
The project started off with the intention to motivate the college students to exercise by socializing with their friends during the pandemic, but I realized there's no warning for the safer social exercising. Therefore, I wanted to strategize how I should be approaching the users as a brand during the pandemic. To avoid misinformation on random websites, I did research on CDC website for the correct ways to exercise and socialize with friends and families.
I added few caution tutorial screens before starting the game with friends for safer and healthier BuddyDeck game experience during the pandemic.
Finding the balance between "social" and "fitness" aspects by using illustrations
From abstract to realistic illustrations, I sketched out several styles of illustration to investigate which style fits BuddyDeck more. The challenge was to find the right balance between "social" and "fitness" aspect of the product to approach the users.I decided to go with this style of illustrations because it was a good style to represent the right posture but also has a warm feelings that could encourage more social aspect of BuddyDeck.
Additional Changes
Deck Detail Page
The user wanted to see what cards were in the deck to know what exercises they can do beforehand. After adding the card list, the content needed to be more exposed on the screen. Thus, I combined Scheduling and Start Game Now together for better visibility of content.
.png)
_gif.gif)
Additional Changes
Scheduling Flow and Modules
The visual consistency was lacking in the previous design, so I made some minor changes in the UI and overall flow of scheduling experience.
Before and After of flow and UI designs below
Schedule and Host a Game
Since you and your friends are busy, you can schedule a game ahead.
BuddyDeck respects the users' time, and we want the users to efficiently schedule a time to exercise with their friends.
Select a Game Deck and Invite your Friends
You can select a card game deck to play with your friends
Working out alone is lonely for the college students during the pandemic, so you can invite your friends to play workout decks.
Take turns to exercise with your friends
Enjoy exercising with your friends by being given a set of exercise cards
BuddyDeck has multiple set of random exercise cards to make the users move and exercise with their friends. Take turns to workout. After a game, you can see your result and progress!
Reflection
Intentionality
Intentionality behind the designs were so important, including the illustrations on the products. I’ve learned that the illustration is not for the purpose of beauty but for the faster and visual understanding of information among texts.
Compromising
Shifting the vertical to horizontal was the lesson to learn because I had to compromise our initial thoughts and the user’s reaction to the shift. We thought the horizontal view can give the users more “game” themed experience, but it turned out to be distracting. I took personal time to make the dramatic changes since it wasn’t feasible within the given timeline.