home.jpg

Recess

Pickup Game Coordination Mobile App

 
 

RESEARCH | WIREFRAMING | UI DESIGN | BRANDING

DETAILS - Group Project - Spring 2015, Carnegie Mellon University

ISSUE - As kids we had recess we had time set aside to be active, play and run around. As college students no one helps you be active, its up to you. We are consumed by work and at times forget the importance of being active even for an hour. There is a need to connect students and create a community.

SOLUTION - Recess is a Mobile App, that gives easy access to a community to help facilitate physical activity by creating games and personalizing the app to Carnegie Mellon. Recess allows students to create pickups games based on the community around them.

 
 
 
 

User Research

We distributed a survey to CMU students to determine needs and the demand for such an application. Our survey asked questions about what activities students preferred, how they connected with people to workout, and whether they wanted a separate application or one integrated with Facebook. The results showed that while many students worked out alone, the ones who played organized sports tended to use Facebook groups or text to find people to play with. They would usually create or join games a couple hours or days in advance, but sometimes they would also go directly to the court or field and join who was already playing. In cases where the court or field was empty, they would be frustrated and either ask more friends to join or go home. We created affinity diagrams to see where the responses overlapped.

We created personas to understand the different users across different college campuses. We created 4 user personas to detail out the potential issues or personalities that may utilize Recess. Primarily students who had the desire to particpate or become active would be more motivated to join the community of Recess. User intent was an important component as we couldnt force students to join a community. By creating the different user types, based on our campus interviews and conducted research, we were able to better understand the needs of users to create a successful activity experience and community to utilize.

 
 
 

Ideation Process

Our first design was motivated by the idea of creating an application to connect people without too many extraneous features. We started by sketching out a workflow for the entire system. We separated the users into two groups: browsers (people looking for a game to join) and creators (people creating games). In the end, our first wireframe designs allowed users to build their profile with their goals and interests, create events, look for events, connect with users to be active, and reconnect with previous encounters.

 
 

Core Features

We brainstormed a list of possible features for our pickup game app as a group based on user research (see below), and we chose a set of those features to implement in our first mid-fi prototype.

Sports Bulletin a calendar which served as the Home Page of the application and presented all of the games as events throughout the month. We wanted our system to allow browsers to easily sift through all of the current games and filter based on their interests. Users can join a game or view them in more detail by clicking on it.

Event Creation we discussed what type of information was necessary for each event and came up with sport, time, date, location, minimum players, and difficulty level. The difficulty level field was added for players who set personal goals to find people to help them reach those goals. For example, an amateur weightlifter hoping to strengthen their biceps could connect with an expert weightlifter on Recess.

Nudging feature where users could Nudge people they have worked out with before in order to motivate them to be active or invite them to workout together again. Notifications to allow players to know when time has been created for their favorite sports. Using notifications of times allows them to be aware without searching through all of the information.

User to User Interaction each user is required to create an account utilizing their email, password and optional profile picture. They can click to be able to nudge other users, message the user or see their information such as favorite sports, skill levels, and past games attended.

 
 
 

Wireframing and User Testing

Our first prototype was created out of paper. Throughout the semester we created 5 different iterations and ran 10 different user tests. We took notes on each users comments, gathered their ideas of improvements, and prototyped another version to continue to solve potential user issues. We utilized the transitions of Microsoft PowerPoint to make our prototype emulate the interactions of our final application.

 
 
 

UI Design/Branding

Branding and developing the design language for Recess, as well as laying out the app's elements on Xcode's Storyboard were my primary responsibilities for this project. Since our team ultimately wanted Recess to have a playful and motivational feel, we incorporated bright shades of yellows and blues in our logo. To offset these vibrant colors, we added a darker asphalt blue. Recess’s logo reflects the app’s main purpose, which is to encourage users to be active and play sports with those nearby who want to play as well. We based much of the style of our app’s elements from the components in Flat UI’s free user interface kit, because we thought this framework best suited the playful mood we wanted to invoke in Recess.

recesslogo.png
recessColorsFinal.png
 
Final Designs for the app focusing on the 1) Login page 2) Sports Bulletin 3) Users Home

Final Designs for the app focusing on the 1) Login page 2) Sports Bulletin 3) Users Home

 
 

Implementation

Due to our deadline we were limited to feature building and had to adapt based on our developers timeframe. Screenshots of the developed app can be found below:

 
Signing up for App

Signing up for App

Filtering by Sport

Filtering by Sport

Creating a new game

User Profile

User Profile

Joining a game

Joining a game