Product design
Case Study: Redesigning SportsYapp Mobile app.
Improving the user experience of a sports app that connects Sports fans all over the world
DURATION
5 Weeks
ROLE
User Research
UX & UI Design
Style guide & UI components
Interactive prototype
Tools Used:
Overview
SportsYapp is an app built to provide personalized sports experience curated exclusively for sports fans, while creating a game-like atmosphere that keeps the user not only engaged, but addicted to the surreal feeling of being a part of a “Game Day”. SportsYapp’s vision is to connect and engage sports fans all around the world.
My client comes from the sports reporting industry, and she has a sole vision of providing a social platform for sports fans to share their support and energy wherever they may be.
The Challenge
The old application wasn’t getting enough engagement. Users were dropping off a lot, some downloaded but couldn’t onboard. The conversion and retention rate was low. Some app store reviews, prompted my client to push for a redesign.
The Process
The two diamonds represent a process of exploring an issue more widely or deeply (divergent thinking) and then taking focused action (convergent thinking). This structure is used to understand customers and their problems and explore creative and innovative ways to solve them.
Discover: User Research
Kicking it off
Since I’m not into sports, I started out doing desk research, reading articles, and watching videos to get a better sense of how sports apps work, to gain every possible knowledge required to design the best experience for my target audience.
Going further, I had meetings with the client. We brainstormed and assessed the existing product, and discussed additional features we would have and how they would work. In all these, I noted my clients’ biggest concern was that the app wasn’t engaging enough given its low user engagement rate.
The UX phase began with getting to know the users and their behaviors and the research goal was aimed at getting a clear idea of the problem as it directly affects the users, and to uncover their needs and frustrations.
I created a survey form and shared it with sports fans and some sportsYapp users (My client paid a few users to fill the form). Had a virtual interview with about 3 sports fans to understand their thought process while using the app. I observed their behavior and the frustrations in the process.
For my quantitative research, I created a survey form tailored specifically for sports fans to know their views and experience with using the mobile application and other similar applications and to know their pain points and improvement suggestions. And for my qualitative research, I interviewed 3 sports fans. Some of the questions I asked in the survey are as follows;
- What their preferred sports app was?
- Why they prefer it?
- What challenges they were facing and what improvements they wish the app could provide?
- Asked them about the issues they may have encountered with recent sports apps over the past year.
- Asked them to identify issues with the existing sportsYapp mobile application and a lot more
And during the interviews, I walked my users through the app and tried to figure out what they couldn’t do right, where they got stuck or had issues in the app. This was done to;
- To gather unbiased user opinions
- To find issues with complex flows
- To get the insights to help create a better overall user experience
Some pain points Identified during video interviews include;
- Poor/Difficult onboarding process
- Difficulty in understanding the UI
- Nothing fun and engaging
- Poor navigation
User Personas
To support my thought process and to ensure that I don’t create a biased solution, I used the data gathered during the research process to create two personas that would serve as a guide for me to keep the design process user-centered since they had varying goals and needs, and to make better design decisions.
Persona 1: Fans who are very dedicated to their supporting team and want to be as engaged as possible, they love sports a lot and want to explore.
Persona 2: Fans who are not extreme sports lovers and tend to prioritize community connections more.
Going through their feedback from the research, I figured the importance of allowing fans to have multiple access points and incentives for posting shots.
Competitive Analysis
This helped me understand what competitors are doing right, their strength, their lapses, and weakness, but most importantly a way to improve a product to achieve a competitive advantage for both the business and customers. I carried out an analysis that carefully compares different sports applications that are similar to sportsyapp and equally analysed the business features and requirements intended for SportsYapp, to see how this research can help in improving the experience for the users. I also looked at the reviews to ascertain their user’s painpoints. Some of the apps I looked into include;
- Fancred
- Yahoo Sports
- Ballpark
- Stats24
- ESPN, etc
Although these platforms share similarities in terms of functionality, they still differ in a lot of ways. One major difference is that they don’t provide a way to directly match with or start a conversation with other sports fans who follow the same teams or are in the same location as you.
Define — Goals defined
The goal was to redesign the existing app to improve a sports fan’s overall experience, create an aesthetically pleasing UI, and include additional features to provide more value to its users. To make the app fun and engaging, make interaction with other sports fans easier, and introduce features to drive more engagement: These features are;
- Game audio-chat rooms; Think clubhouse/Twitter spaces but for sports/games as they happen!
- Game prediction; Users get to predict winning teams and scores for games before it starts and before it ends.
- Match feature; Just like in dating applications, the app matches and recommends two users who have the same location follow/support the same teams and games.
- Direct messaging; This means users can now have conversations with each other on the platform.
- Coin incentive system; Here users receive coin incentives when they like, comment, post shots, predict games, etc and when their coin gets to a certain amount, they receive rewards.
UX Auditing
A crucial step I took for the redesign was to audit the Old design to Identify issues with the flows, User Interface, general usability and accessibility, etc. The idea wasn’t to renovate the design entirely, the idea was to improve on the existing design with an introduction to new features.
I also performed a heuristic evaluation based on Nielsen’s heuristics to detect usability issues that may occur when users interact and identify ways to resolve them. This helped with a lot of valuable insights and ideas used to narrow down a roadmap. I placed this step after user research because I wanted to re-evaluate the features with the business goal and user needs in mind.
Develop— Wireframes and Iterations
At this phase, I sketched out some options on how I could improve the existing design and resolve the above-mentioned problems. I got to iterate on the sketches and then converted to Mid-fidelity wireframes, this made the visual design process easier and faster.
Understanding game-day experiences
The next step taken to better understand our users was to understand how their game-day experience works.
Since this app focuses on game-day interactions, I needed to consider how to enhance the experience for onsite fans' and bring the live-action closer for offsite fans.
Let’s look at the problems discovered!
Based on the insights, I noticed the app's core goal, which is bringing fans closer to each other on game day, wasn’t engaging enough. Fans only get to follow each other and view posts of each other but they don’t directly interact, there’s no group or forum for fans to connect with each other. so I can say it’s not meeting user’s goals . Before the redesign, the only interaction between fans is on game days when they get to take photos and video shots of the game to post on the virtual field of the game for other fans to see.
Onboarding/sign up
Problem: The problems discovered are gotten From my personal experience as a product designer and research insights from sports fans and other users; the problems and their solutions are explained below:
- There is no onboarding flow to introduce new users to this app and its features.
- Lack of visual consistency in the buttons made it harder for people to verify the authenticity of actions being communicated.
- Users don’t have the flexibility to setup their profile later: This could scare potential users away
Solution:
- Designed an onboarding using the combination and progressive onboarding approach to help the user ease into the app’s experience. Instead of bombarding them with everything at the start, provided users with just enough information to keep things moving; This approach ensures that the user is enlightened and knows what to expect at every point.
- Maintained consistency across the onboarding and sign-up.
- Provided an option to skip the profile setup in case they weren’t willing to do it at that point to enhance user retention
Bottom nav
Problem:
- The old bottom nav isn’t so effective because people find it difficult to post. Here, for a user to post a shot, they have click multiple times to go into the “game day’’ of a game which makes it harder for them. First-time users find it difficult to figure out how to post and where to post from.
Solution:
- Made the home, discover, game rooms, Chat & profile pages accessible from the bottom navigation.
- Clearly understanding that navigation is generally the vehicle that takes users where they want to go, tailored my navigation to help them get there faster by adding a Floating Action Button for the most important user action on this app which is “posting shots”.
Home page
Problem:
- Visually, the interface doesn’t look great, starting from the hierarchy, contents, structure, etc.
- The home page takes up so much space just to show the games leaving other interactive parts of the app out of the picture.
- There are no quick links to make it easier for a user to perform primary actions once they get on board.
- The sports Icons without an assistive text to them makes a user think twice before choosing a game and confuses people who are not familiar with each sports icon
Solution:
- Added a Floating Action Button in the bottom nav for users to be able to easily post shots.
- A search icon for users to easily make quick searches
- Added the name of the sports to each sports icon for easier identification so a user doesn’t have to think twice to select a sport they like with reference to Steve Krug’s book Don’t make me think.
- A date picker was added so a user can still find games according to date.
- Since we’re trying to drive more engagement, we included a points rewarding system which works in a very simple manner: Users get to earn coins when they actively engage and post shots. So their coin wallet which sums up the total coins they have earned over time appears on their home page.
- Users can also start their predictions right from their home page.
- Most Important actions were included on the home page and it was designed in form of a feed (like facebook feed) for better engagement and interactivity.
Discovery page
Problem:
- The discovery page doesn’t do enough discovery for the user, because here you’re discovering games and only games.
- The discovery page lacks consistency, consists of different cards for games, which is also different from the card for games on the homepage. This leaves the user thinking if they’re all the same game.
Solution:
- Users can discover games from both teams they follow and teams their friends follow. This is because some users like to see what other people are doing, finding games their friends are following enlightens them, and that enlightenment is needed to keep them engaged.
- Users now get to discover prediction analysis for games; this is to help motivate them to predict games.
- Users can now discover their matches and new teams to follow; This is to enable them to connect with more people on the platform and follow more teams to see more games.
- Made all the game cards consistent across all pages. This helps constantly prove a user’s assumptions about the user interface right, creating a sense of control, familiarity, and reliability.
Search Page
Problem:
- There are no filters and sorting options to facilitate the search for a user even a quite well-crafted search query may not be enough as it will bring out too many options in search results.
- The bottom nav in the search bar can be quite confusing for a user because it is not required for a search that works like a modal.
Solution:
- I provided tabs for sorting so users don’t have to leave the search results page while switching between preferences. In this case, filters would support the interaction flow and allow users to tune their search better between teams, locations, and games.
- Removed the bottom nav since it isn’t required in the search process.
Profile Page
Problem:
- The supposed input fields on the edit profile page do not look editable. The length of an input field should be in proportion to the amount of information expected in the field. The size of the field acts as a visual constraint for the user.
- The input field on the edit profile page doesn’t look like an input field and is likely to confuse a user. Google quietly changed its material design text fields in 2017 after discovering many users didn’t know they could interact with this type of input.
- The horizontal scroll that shows the team name on the profile only works for a limited number of teams, Doesn’t work well if a user follows over 5 or more teams.
- There’s no way for a user to know the total number of shots they have posted over time and they can’t also see the total number of shots posted by others. (Just like seeing your number of tweets and retweets on twitter)
Solution:
- Put the labels above the fields to improve the way users scan the form. Using eye-tracking technology for this, Google showed that users need fewer fixations, less fixation time, and fewer saccades before submitting a form.
- Used the top-aligned labels because they provide more space for labels. Made them large enough to display the user’s entire input (E.g for people who have long names and all).
- Removed the horizontal scroll that shows the team name since it wouldn’t work for a large number of teams.
- Added a way for a user to see their total number of shots over time and the total number of shots posted by others.
The Chat feature
Since we’re trying to drive more engagement, we included a direct messaging system that allows a fan to directly message another fan. Now Fans do not only have an option of following an individual they like, but they can also connect directly with them.
Just as they do it in dating apps, they also get matched with users who share the same locations, interests and follow the same teams as them.
Audio-Chat feature
This is one interesting part users seem to love the most. An audio-based chatroom where sportsfans can have both audio-chat and text-chat. How does it work?
Pretty similar to clubhouse/twitter spaces; users get to create and join rooms. Each game has only a single room, this means if a room has already been created for a game, you can only join and request to speak and if it hasn’t been created, you can create it.
Users can navigate between text and audio. Sounds fun, yeah?
This is another interesting feature. In betting shops, people predict games and either win/lose. While some other people just want to see the prediction of others and from there, they would know which team has a better chance (But the truth remains, higher winning prediction doesn’t guarantee actual winning).
Users who predict, receive coin incentives which are automatically added to their coin wallet. How they get rewarded?
They are required to gain a certain amount of coins, after which they stand a chance to win free game tickets, team merchandise, gift cards, etc.
I could also call this app, social media for sports fans and game lovers.
Deliver - Tests, updates and constraints:
During our tests with real users, we noticed there was a positive feedback on the redesign however most people still had a common need to enjoy the app better. According to them, they would still have to use other sports app for Live chat and Live streaming, Which still defeats the purpose of sportsyapp.
After a few months of building, Testing and Iterating, my client decided to add the live chat feature due to high demand/request from testers, and also because she doesn’t have the resources for Live streaming games yet.
We also encountered some bugs in the game chat rooms, users complained of the chatroom not being efficient.
Users can join live chat for any game easily, even for games without rooms, Live chat is automatically created for every game happening Live. The Live streaming would be for the v2 of the app when my client must have acquired the necessary resources.
My client also recently rebranded to ‘red’, being that the color red is usually associated with sports and has been proven to put athletes at a distinct advantage. So the V2 would most likely be coming with updates to the brand colors.
GamedayNEwhere on instagram
Impact
While the development and tests are still going on, so far during tests we’ve discovered:
- Advanced usability.
- More people enjoying the application.
- Improved User experience
I’ll be able to measure more impact in numbers after official launch
Learning :
- In-depth analysis of the design decisions is really vital to make sure you’re fulfilling your user's needs.
- I got to understand the common UI and UX paradigms.
- Small changes in design can make a huge impact on the whole user experience.
- I worked on a lot of iterations to arrive at the right solution. During this process, I realised that there’s nothing like too many iterations because the more you iterate the more chances of the best solution.
- As a UX designer my thoughts need to remain user experience driven and user research data based. Good UX begins in data and continues in data. Fixing bad UX is much more expensive than doing it right the first time.
Hello, I’m Omah and I create exceptional experiences that align your business strategy with your customers’ needs. I am a curious person who loves to contemplate the design of life and everyday things. I plan to keep articulating my experience and thoughts here on medium. I am always open to feedback and discussions. . . If you’d like to reach out, follow me on Twitter to have a chat. You can also check out more of my work on LinkedIn Behance
❤️ Thanks for reading!
If you liked reading this article, you may also like my other case study Redesigning GT bank mobile app
