Cardiola

‍

Platform

iOS

Roles

Product Designer, User Researcher,

Data Analyst

Tools

Figma

Challenge

Create an app that solves the problem of having to find new players for different sports

I wanted to improve my fitness but going on the treadmill dreaded the life out of me. I knew it wasn’t only me that had this issue and there it was. A problem. A problem that I wanted to solve. I wrote it down to make it very clear to myself. 

“People want to get fit. They dislike going on the treadmill and prefer to go play sports with friends. Either their friends are busy or they don't have any. If friends ARE available, the event organisation sometimes gets messy with people leaving in the last minute or one not paying for the venue.” 

And with that in mind, I began taking notes as well as searched for apps that may inspire me during the process.. Needless to say, I hit the jackpot. I found an app called “Find a Player” which was the ONLY app in the app store that did the exact thing that I wanted. Same idea, same categories.. I was in love.

Goals

For Redesign

• To facilitate a more engaging and seamless experience when it comes to exploring and staying connected
• To design a more personable and intuitive user interface
• To design through user empathy (HCD)
  

Understanding the Company

‍

Find a Player is a multi platform app designed to take the pain out of organising and finding players for sports, games & events.

The User Research & Data

Before I began my redesign project, I conducted interviews with 40 individuals to get a better understanding of who I am designing for. When choosing cardio, would you rather play sports with friends or go on the treadmill? If none, why do you avoid cardio, boring or lazy? These interviews were conducted either in person or via phone/video call.

Among the 40 Individuals I interviewed, there was 20 males and 20 females. The age of the male users ranged from 20 to 27 years old, while the female users ranged from 19 to 25 years old. 65% are currently college students or graduates with plans to pursue higher education. I felt like this was a fair representative sample of Instagram's current user base since 90% of Instagram users are younger than 35. Furthermore, 55% of all 18-29 years old in US are Instagram users. 

To make this even more interesting, 67.5% of the users I interviewed ranked Instagram in their Top 3 Most Used Application. 

Additionally, 72.5% of the people sampled uses their Instagram everyday.

And the fun continues—

I asked the 40 Individuals I interviewed to describe Cardio using 3 adjectives. What do they think about Cardio? How does it make them feel?

I asked the 40 Individuals I interviewed to describe Find a Player using 3 adjectives. What do they think about the app? How does it make them feel?

A total of 64 adjectives was collected

Top 3 adjectives used: Creative, Fun, and Simple

I also asked what they liked about Instagram and here are the top 3 reasons why

(1) its picture-based, (2) its easy and simple to use, and (3) it helps them stay connected. 

Part 1: The find page & the tab bar

Let's take a quick look at the current set up of “Find a Player’s” Find page. At first glance it looks like a well crafted app, however if we look deeper into things, we begin to see some real problems.

Problem #1: Consumption of 2 tab sections for 1 purpose

Straight after opening the application, users are met with a map that shows different sports within the area. I was made to believe that if I wanted to find a sport, the “Find” button would have all that information available for me, however when switching over to the “Live feed” section, I realized that it was exactly the same thing except in a list view. All other buttons served a different purpose but if you have 2 within the same tab bar that do the exact same thing, It comes to make it a waste of space so I decided to deal with that.

> For the solution:

I chose to integrate the list and map view into 1 button and brought the profile button to the tab bar in order to keep it even.

• Users would now know that both screens serve the same purpose and not be tricked into thinking the “Live feed” section serves a different purpose or contains different content.
• Knowing how commonly used “Instagram” is, Being able to place the “Profile” button on the bottom right makes users feel like they are not on a foreign app since the profile button is placed in the same location.

I took the idea of using a toggle button to switch between views from the app “Badi”. Similar to Find a Player, rather than users finding sports events, Badi is an app where users find properties to rent.

Problem #2: Overly complicated to navigate between events(Too many clicks)

When clicking on an event, you’re greeted with an overly long animation that quite frankly confuses the user with what’s even going on. It didn’t generate simplicity at all.

> For the solution:

Rather than taking the user to the entire event details page, I gave the user a preview of what the event consists of(i.e location, picture of area, cost and event handler) 

• Makes it easier for the user to navigate between events since his finger would be next to it anyway in comparison to having to go to the top left to close it.
• Lets users decide quicker which event to choose.
• Not overwhelmed with crazy animation
• Overall just a swift process

I took the idea of using an event preview from “Badi” and “Google Maps”. Why? Not sure yet, it just felt right.

Problem #3: Search feature was not user friendly

Here's the kick, I don’t want to have to think about how to use something, It should click to my mind straight away. What I press is what I'm given. But when using Find a player, they failed to do this, here is their process.

Side note: The process goes even beyond that, I got overwhelmed myself and navigated away :/

‍

> For the solution:

Just like google maps, I created a search bar that allows users to type anything they want such as “Boxing”, “Football”, etc and be given a page that shows those very sports. Yes, it was that simple.

• Simplicity for the user. What you click is what you get.
• Filtering/sorting is much more clear and visible in comparison to having it hidden in the search button of find a player.

‍

Part 2: The list view

During the data gathering phase, one thing that was clear was the confusion when using the live feed page. Users had several questions and did not understand the layout until I answered some questions for them. It was clear that this page needed some work to give users a better understanding of what it consists of.

‍
When creating list views, it is essential to give the user just enough information to make him decide whether he wants to select it or not. On top of that, putting the right information creates a better user experience as a whole. Having most feedback about the listing being negative, I decided to identify the problems and work on them.

Problem #1 - Unnecessary information within listing

From using shopping apps like “Amazon” and “eBay”, the structure is pretty obvious. Photo, Name of product & most wanted details. Those 3 things are enough to help the user decide on clicking the product or not. However, on Find a player, rather than having a photo of the area/venue, they decided to put the day of the week and the time.. I never really understood this, why display the same information twice? Date and time in a box, and again below the event name.. I thought I could free that space and put something more useful within it.

Furthermore, the search button was a white and blue circle which looked almost the same as the “Open spots” feature. It looked obvious to me that the button was fairly hidden.

Solution:

Solution:

I decided to use the boxed space to display a picture of the location of the event, I then placed the time of the event within the details as shown below. To confirm if this was the right decision, I decided to do conduct usability testing:

Usability test results:

14 out of the 15 participants that I interviewed preferred this style in comparison to the other. Having a photo of the event helped make a decision for users as plenty of people decide by the way things look. Furthermore, due to the amount of positive feedback on the display of time from “find a player”, I chose to also integrate it in my design but in a different format.

By changing the color and making it bold, users can see it first thing and make a decision straight away. (Stands out on white background)

• I also removed the “Open spots” button as I didn't want the box to look overly cluttered.
• The map view button was placed instead of the search box in a blue color helping it stand out more in the white background.

Part 3: View listing

When viewing a listing, the layout plays a very important factor

Player view

‍

Owner view

‍

Problem #1: Poor structure

The overall layout of the screen was insanely confusing, 60% of the people I interviewed claimed that they had no idea what was going on in the page and described it as “messy”. I saw exactly where they were coming from and decided to give it a redesign and make it look more user friendly. Having poor structure confuses the user and pushes him away from using the app any further.

The solution:

There were a few things I added to the redesign:

1. Swipable photo at the top
2. Details in listed order
3. Call to action button at the bottom

I was able to construct this by obtaining ideas from apps such as “Eventbrite”, “Fatsoma” and other event apps. With the newly built design, I experimented with the people I interviewed, and 94% of people claimed that my design was laid out neatly and easier to understand. 

• By having something easier to use, users will be more inclined to use it (LOL no sh*t sherlock).
• Having photos of the area helps users make a decision since photos drag people into the product
• Having the ability to save an event for later allows the user to not feel pressured into making a decision straight away.

I integrated the payments and team selection inside the event group chat to give the admin more simplicity and have everything more compact. Users can access this by also pressing the “Manage” Button on the screens above.

Part 4: Creating an event

Creating an event on “Find a player” was not entirely hard, however I do believe it could’ve been done quicker and in a more structured format.

Problem #1: Difficult to make previous adjustments

To go from the screen on the left to the screen on the right, I'd have to tap the top left 4 times.. This doesn’t make things ideal for the user, in fact when testing the creation of an event with the people I interviewed, 80% of the users claimed the process to be confusing and lengthy. With that feedback, I worked on a solution.

> For the solution:

Now I could’ve just changed the process so that you can swipe to go back, however I wanted to do something different. I came across an app called racketpal and saw that the creation of an event was a few scrolls and all was done. I wanted to make something similar. 

Having the match name is the first thing on people's mind along with what sport they want, therefore I decided to put them both towards the top.

I integrated “Player Rating” and changed the color of the boxes to their level of difficulty. (Green - easy, Light orange - Medium, Red - Hard)

I put the create event button big at the bottom and made it fixed whilst scrolling. When they haven't filled the section in, the button would not be a lower opacity meaning you cannot press it, whilst when there is enough details, the opacity would be 100% indicating that enough information has been given.

Usability test:

I tested this method of creating an event with my interviewees and received 100% positive feedback with most stating to adore the simplicity of having “everything on 1 screen”.

If a user makes a mistake, he can easily scroll up and make adjustments.

Problem #2: No sense of satisfaction when making an event

When making anything, I always want to feel some sort of reward for doing so. By not having a reward, the user doesn’t obtain a dopamine hit which in return pushes him away from creating more events.

Success page:

After the event was created, I presented the user with a success screen. After complimenting them for what they did, I put 2 buttons either 1 to view the creation they made or 2 to invite people to their creation. Why? All is centred to bringing more people. Having them have a sense of satisfaction inclines them to create more events which draws more people together.

‍

‍

Summary

‍

Going into this project earlier this January, I knew this would be the perfect opportunity for me to hone my design skills as it was something I always talked to myself about doing. I want to pursue a career in product design so I figured the best way for me to learn would be to just throw myself into a project, and go from there. Looking back now, that is a complete understatement. Within the last two months, I was able to learn all the things I set out to learn in order to deliver this project and so much more. I think one of the best thing about the learning and creation process is that you come to curate your own. You learn what works, and what doesn't. You learn how to do things faster, better, and more efficient. You learn random things along the way while trying to learn about the thing you're actually trying to learn. And the cherry on top of that is that it doesn't end—
the learning process is continuous.

Sketches and Wireframes

‍

‍