Interaction Design Project: Sports World App

Over the last 10 months I’ve been studying the Interaction Design Specialization by University of California, San Diego with Coursera, which has 7 courses and then a capstone project. In this article I would like to share with you the amazing journey I’ve had while working on the capstone project, and to tell you about my design story of the Sports World app, a personal assistant that manages your favorite sports events.

Problems I wanted to solve

Every morning, when I was having coffee with my co-workers, they were discussing all kinds of sports events, games and articles while sharing their opinions about them. I was wondering to myself: “How do people search for the sports events they are interested in? How do they follow important games? How do people share their feelings with other fans following the game they were watching?” These questions led me to build something that would help my friends solve these problems.

So what is Sports World, anyway?

The goal of the Sports World app is to give the user a simple and intuitive way to view information concerning their favorite sports, while creating a social and a collaborative experience.

I conducted interviews with co-workers, who define themselves as heavy sports events consumers, and observed them performing the same activities on their own laptops and smartphones: 1) searching for the sports events they are interested in; 2) following up on the game/sport event they are interested in; and 3) sharing feedback with other fans.

During these observations, I found more than 15 design breakdowns and opportunities, but I decided to focus on a few concrete user needs that the Sports World app can solve:

1) The user needs a way to make sure they don’t miss games that interest them, the games that they search in the internet.

2) The user needs a way to see all upcoming games in calendar view.

3) The user needs a way to avoid spoilers for games that were recorded before being watched.

Storyboarding, Paper Prototype, Heuristic Evaluations

Well, the time to start thinking about the application design and implementation had come.

I started with storyboarding options that helped me to describe the steps from start to end, to complete the user flow.

Here is one of the storyboards I used in the design:

Storyboard of the Join a Friend feature.

This storyboard makes perceptible a potential feature in the Sports Word app, providing the user with a convenient way to join their friends to watch a game in the pub.

Next step was building a paper prototype based on the storyboard and conducting the Heuristic Evaluations on the prototype, in order to highlight any usability issues.

Paper prototype of the Join a Friend feature.

Running in-person testing on the paper prototype.

After conducting paper prototype evaluations, I understood that users don’t want to search for the sport events they are interested in every time, but rather they want to configure the app once and then get updates on the most interesting things for them. This lead me to think that I should spend more time researching what users need to configure in the app, to get the maximum benefit for them and then reflect these needs in the Settings and Profile screens.

Analysis of Heuristic Evaluations gave me the confidence that the navigation model in my app, where we have many unrelated views, is correct. However, there were a lot of usability problems discovered at this point, and so I built a list of changes to be made in the digital prototype.

Digital prototype, In-person testing

Now it was time to start building an interactive digital prototype. Developing the fully fleshed out prototype with the full application structure should have taken more time than the 2 weeks that I had. Therefore, in the prototype I implemented all the screens and user flows that covered the two major features we discussed above.

During my work on the prototype, I had the chance to test it with my friends and then with my classmates. The live user tests found a lot of usability issues that were addressed and resolved before A/B testing.

The person observing a list of friends who are going to watch a game in the pub. He didn’t understand how he could join them. For him it was not obvious to open a friend’s page and then to join their activity.

A/B Testing

For the A/B testing, I wanted to see if a different design of the “Schedule Recording” action in the Event screen would speed up task competition time, when the user wants to schedule a game for recording.

I used UserTesting.com to run two versions of the prototype where 2 users worked with the prototype featuring the initial screen (Version A), the other 2 users — the redesigned screen (Version B).

Two versions of the Event screen.

The test results analysis showed that there wasn’t a statistically significant difference between versions A and B. In both versions, the users tapped on the button after about 2 seconds of arriving in the Events screen. The overall feedback about the app functionality was positive. Here are some quotes from the A/B testers:

- “I liked the sleekness of the design”

- “As a person who does not own a TV (and does not plan to), the ability to record live TV events on a phone is a really cool concept”

- “It was very easy to navigate and self-explanatory”

- “I liked how the particular buttons were easy to find”

In conclusion

Below is the final version of the prototype’s main page and a few others:

Prototype Link (use the Axure RP Extension for Chrome to preview it): http://zwl76v.axshare.com/#g=1&p=overview

Video explaining why you should use Sports Word app: https://www.youtube.com/watch?v=pegqWKqoQmU&rel=0