Reimagining the Fitness experience

Designing a pickup sports game feature for the Uplift app

 

Role

Product Designer

Timeline

January to May 2020

Team

2 Designers

3 Engineers

1 Product Manager

Skills

Product Thinking

Interaction Design

Visual Design

Tools

Figma

Framer

Zeplin

Overview

Uplift is a fitness app created by Cornell App Development, a student-run, open-source, app development team. Currently, it provides information on Cornell gyms’ hours and wait times, full schedules of fitness classes, and facility and equipment details. In the fall of 2019, Uplift averaged 750+ monthly users.

I worked in a team of 5 students including 2 designers, 3 engineers, and 1 product manager to design a new pickup sports game feature with the objective to make the student fitness experience more valuable and increase user engagement.

I designed for the 3 main features which I’ll go into detail about:

  1. Game Feed

  2. Game Details

  3. Game Creation

Final Prototype

This walks through the final prototype of the pickup sports game feature.

 
uplift-full.gif
 

the Problem

Research

Uplift was first launched in 2018 with the goal to empower Cornell students with the tools to pursue a healthy lifestyle…however, a healthy lifestyle looks different for everyone. Currently, Uplift is only able to target students to pursue a healthy lifestyle through attending fitness classes or working out at the campus gyms.

When speaking to Uplift’s current users and potential new users through interviews and form feedback, it was clear that Uplift is only valuable for a particular type of user and it is not very engaging, interactive, or personal.

Actionable Insights

  1. Uplift loses its significant value to students after they familiarize themselves with gym hours and class times.

  2. Almost all students are incentivized by others to stay active on campus.

  3. Many students want to play sports with others but find it difficult to find new people to play sports with.

  4. Students think that fitness apps like Uplift don’t feel personal or engaging.

Brainstorming Features

Screen Shot 2021-02-05 at 1.06.49 PM.png

Feature 1: Habit Tracking

✅  Encourages engagement on a personal level

✅  Scalable

❌  Doesn’t provide community engagement

❌  Engineering constraints

 
Screen Shot 2021-02-05 at 1.13.36 PM.png

Feature 2: Notifications

✅  Feasible

✅  Fits easily into the current app

❌  Low impact

❌  Doesn’t encourage new interaction

 
Screen Shot 2021-02-05 at 1.15.12 PM.png

Final Feature: Pickup Sports

✅  Opportunity for creating community

✅  Scalable

✅  Encourages user engagement

❌  Depends on network effects 

Final Problem Space

After analyzing the feasibility and impact of multiple different features including habit tracking and push notifications, we chose a pickup sports game feature.

Students want to play sports with others, but they are unable to do so because there is no centralized forum for students to find others who are interested in playing sports.

Goals

  • Allow students to connect with others through playing sports.

  • Develop a student community on the app.

  • Increase user retention rates by providing a dynamic feature that students have to check in with.

Part 1: The Game Feed

Who’s down to play? Browsing available games to join.

The game feed is the first screen a student sees after clicking on the new Sports navigation tab. It allows a student to browse available games and join them. The main components of the feed are the game cards that display the most important information of each game (Game name, time, location, number of players) and a join button to allow students to join the game. This game card could be clicked on to view the game details (Part 2!).

Below is an overview of my game card iterations.

card exploration final.png

The final card design has a simple information hierarchy that highlights the most important information at a glance. The “Join” button demonstrates a clear call to action to join the game. Uplift’s yellow brand color was carefully used to highlight when a game card was joined without being visually overwhelming. This card was added to Uplift’s design system.

Final Game Feed

This prototype shows the final Game Feed interaction.

 
feed_gif.gif
 

Part 2: Game Details

When and where? Viewing details and joining the discussion.

After a student clicks on a card in the game feed, they are able to view the game details screen which displays more detailed information including game name, location, sport, creator, date and time, a join button, number of players and player names, and a discussion section. This discussion section is essential to this feature: by adding an opportunity to engage with others in the platform, pickup sports can build a community on Uplift.

Below is an overview of my game details iterations.

game details explorations.png

The final iteration has an organized information hierarchy through spacing and visual treatment. The Players section is expandable, as shown by a triangular carat, and the Discussion section mimics a social media platform comment section. One tradeoff of this iteration is that the triangular carat is not in the existing design system.

Final Game Details

This prototype shows the final Game Details interaction.

 
gamedetails.gif
 

Part 3: Game Creation

Ready to take initiative? Creating a new game.

From the game feed, a student can click on the upper right corner to initiate a new game of their own. The game creation flow involves a form that takes in all necessary information for a new game. Sections with many options such as Sport and Location are collapsed by default and are expandable. The Players section required the most iterations and user testing.

Below is an overview of my iterations for the Game Creation Players section.

game creation explorations.png

Through these iterations, I explored how to display the number of players using different copy, interaction design, and visual treatment. After conducting user testing with 5 users with Option 1, it was clear that “Number of Players” alone was unclear as to whether it was referring to the number of available spaces in the game or the total number of players. We pivoted to a more visual design that clearly communicates what information it is displaying, but it was rather visually overpowering. In the final iteration, the information is communicated clearly and concisely to the user. A tradeoff is that it is not as appealing visually.

Final Game Creation

This prototype shows the final Game Creation flow.

 
create.gif
 

Reimagining the Campus Fitness Experience

Final Prototype

Now that I’ve gone through my process, here is a final walkthrough of the pickup sports game feature.

 
uplift-full.gif
 

Looking forward

Results

Due to the shift to virtual learning, the release of the pickup sports game feature and further beta user testing has been postponed until future notice. We hope to release the feature by May 2021 with a marketing campaign. Our goal to increase Uplift’s user engagement to consistently 1k monthly average users.

Learnings

When designing for an existing product, the design system is key.

Since Uplift is a launched app, I worked with an existing design system that I considered throughout every step of my process. I evaluated whether elements from the design system could be used, whether my designs fit into the system, and what design components should be added to the system.

Communicate constantly.

This was my first experience working within a cross-functional team of designers and developers. It was essential to communicate constantly to understand feasibility constraints, express ideas, and build a positive team culture.

Things don’t always go according to plan.

Our original goal was to launch the new sports game feature by May 2020, the end of the spring semester. Unfortunately, COVID-19 and the shift to virtual learning has postponed the launch of the feature until further notice.

Finally, creating with other students is joyful.

Building apps with other students to improve the community around us is an impactful, fulfilling experience. My favorite part was participating in weekly critiques with other designers where I presented my work and gave feedback. I can’t wait to see what’s in store with the wonderful people of Cornell App Development.