Intro

Spikeball is the leading brand for the net sport, roundnet.

The Spikeball App is where players can create and find local games and connect with the roundnet community. Hearing feedback about the product’s poor usability, unclear functionality, and inconsistent visuals, I took initiative to deliver a lasting solution.

Discover

Research Plan

I first began the process with creating a research plan in order to help define the target market and discover user behaviors.

Background

• The Spikeball App helps users search for games and tournaments in their area. It’s also a place to find rules, watch videos of how to play, post content, and find other players/groups. Many people struggle with finding others to play roundnet with and not everyone knows how to play. The Spikeball App bridges this gap but it offers several features and the layout is confusing and ambiguous to use.

Research Goals

• Understand user’s needs

• Compare and analyze with other app competitors

• Identify pain points of the current app experience

• Discover what feature users find most important

• Uncover challenges for users in the app

Research Questions

• Who is the target demographic?

• Why do players download the app? What are they looking for?

• What other platforms are people using to find people to play with? What do these platforms lack/do better?

• Does the app address the need of the market?

• What is not being used on the app?

• What are challenges people run into in the app?

Methodologies

• Market Research

• Contextual Analysis

• Indirect Competitor Analysis

• Survey

• Interviews

Participants

• Ages 17-45

• Roundnet players

• Spikeball App users

Market Research

I started my research by trying to gain a greater understanding of the current app market and target audience. I wanted to see how people currently meet up to play roundnet and challenges they run into during the process.

“Before use, capability mattered more to the participants than usability, but after use, usability drove satisfaction rates. As a result, satisfaction was higher with the simpler version of the product, and…the high-feature model was rejected by most participants” (Journal of Marketing Research)

It was clear that there was a large gap in the market for a roundnet app that can efficiently find, organize events and connect players that want to play.

Indirect Competitor Analysis

As there isn’t an existing roundnet app outside of the Spikeball App, I sought after indirect competitors and iOS apps that current players use to schedule their games. Based on my findings, I was also able to confirm that GroupMe was the top competitor. I then looked into assessing each indirect competitor based on app reviews and downloaded each on my phone to get a firsthand glance.

Common strengths:

• Simple to use

• Instant messaging

• No limit of users

• Polls, events features

Opportunities for growth:

• Ability to discover local roundnet games that are open for all

• Improved and easy to use UI

• Less clutter of unused features

Survey

For quantitative data, I sent out a survey to players in the roundnet community to gather information on demographics and app usage. Out of 89 responses, some highlights were:

User Interviews

To better understand the pain points and goals of our active users, I developed a script and interviewed active app users via Google Meet.

After collecting 96 data points from 10 user interviews, I created an affinity map to highlight 3 main takeaways:

1. Users lacked understanding

   • Users had to spend a large amount of time in the app to understand it’s capabilities because features were hidden or not intuitive

2. Users had difficult factors outside the app

• Finding places to play, especially during the winter, was a big challenge

3. Users downloaded the app primarily to play games and tournaments

• Users downloaded the app because they had trouble finding others with the same skill level or openness in their community (players were either brand new to the game or too elite to play with lesser skill levels)

• 8 out of 10 users first check for games or tournaments in their area when opening the app

• 7 out of 10 users don’t use the Learn tab

Define

User Persona

After going through interview recordings and identifying behavior/need patterns, I synthesized my research into a set of deliverables that will help to prioritize users in the design process.

In order to understand my key users better, I created two user personas based on my interviews. This helped me to further understand the emotional state of the user.

User Journey Map

Next, I created a user journey map to further visualize our target persona using the Spikeball App and what thoughts and emotions they would evoke.

This process provides a holistic view of the user experience by uncovering both pain and delight points throughout a series of interactions. It also speaks to how the user experience can be best optimized.

Current Design Audit

From there, I personally went through the app to audit and highlight additional opportunities for improvement. To start, I decided to focus on the Games tab as this was the main feature users found most valuable from interviews.

Problem Definition

Both user research and the audit revealed that the product’s functionality is unclear because there were too many features built-in. With local games, videos of how to play, rules, drills, a social media feed, and groups, the focus quickly became vague.

Users didn’t know what to use the Spikeball app for.

This led to:

1. Time spread across multiple screens

2. Confusion for the user which results in frustration, inactivity, or deletion of the app

I was able to learn from research that features focus on distinctive attributes and functionality focuses on serving a purpose well. The current app aided in solving the problem of finding players with the same skill level or openness to play but this functionality became overridden by features.

Another secondary problem was performance. From the app store reviews, users complained about how much space the app was taking on their phone in addition to app bugs they ran into.

How Might We (HMW)

In order to be as effective and efficient as possible, I developed a guideline to kick off brainstorming. To generate broad creative ideas, I began with outlining “how might we” (HMW) questions:

• How might we ensure more people use the app?

• How might we help users easily find local games?

• How might we help users easily create local games?

• How might we help users easily attend local games?

• How might we increase awareness of the full product offerings?

• How might we increase value of the app to users?

• How might we help users to find similar skill level players?

I selected high level HMW questions to guide my brainstorming session for solutions. I spent about 2 minutes writing solutions for each that would solve our problem.

Develop

Navigation

I began the Develop phase by finalizing the architecture of the app via navigation. Previously, the app used both a bottom navigation and side hamburger menu to house settings and notifications. Learnings from my user interviews led me to redesign a single bottom navigation in order to remove hidden menus.

I also removed the social media feed to focus on the app’s best value: finding local games, as my research found that satisfaction rates are higher with a simpler version of the product. Chat was given priority as real-time messaging proved to be important for users to connect quickly.

User Flow

I was then able to create a user flow to showcase the main functionality paths of creating and attending a game.

Wireframes

With the user flow as my guide, I began sketching and brainstorming ideas for my initial wireframes. This helped me to quickly consider various solutions.

From here, I moved over to Figma to develop low-fidelity wireframes. This helped to visualize and have users test my early designs.

Deliver

Style Guide

With the app having no prior style guide in place, I created one for developers to implement. With the current app containing various font weights and sizes, users reported difficulty reading and distinguishing links.

I chose Poppins as the primary typeface to match the playfulness of the brand. For color, I went with clean neutrals, Spikeball Brand Yellow, and a complimentary accent of Sky Blue. The yellow evokes positivity which supports the brand image and color while the blue gives the feeling of trust and reliability.

Game Components

In order to help developers maintain consistency, I created a small library of buttons, text links, map markers, and game thumbnails.

I defined the logic of how each should be used and this made sure that areas like the map view remained consistent and legible at all zoom levels.

Prototype

Games is the home screen that first appears after login. Before, users were confused on what to do here and it took time to understand its features.

The new games design improves usability by:

• listing games with thumbnails and quick-to-scan information,

• icons to distinguish game type,

• visible horizontal scroll filters,

• option to sort by date or distance,

• and a floating action button to quickly switch between map or list view.

The game details screen previously lacked key information and visual hierarchy, resulting in ambiguity, inconsistency, and unused screen space. The new design solves this with:

• a preview of guest list numbers,

• disappearing event banner on scroll,

• color contrast,

• confirmation card upon rsvp,

• showcasing event host information, and

• consistent text styling.

app walkthrough (main flow)

Testing

I tested the usability of the main user flow using a high fidelity prototype on 3 remote users to gather feedback.

My main goals during testing were to:

• evaluate overall usability,

• note any difficulties or confusion,

• and collect feedback on ease of app features and navigation.

Users reported higher satisfaction in using the new design compared to the old. In particular, the process of finding and attending a game was much easier to use.

Performance

Lastly, after hearing complaints about how the large app size on user phones, I led the initiative to decrease the app size from its original 1GB to a more manageable 53.7MB with the Lead Mobile Developer.

Lessons Learned

I knew this was a challenging project. It meant reorganizing the app architecture and the majority of the screens. Even though this was only the tip of the iceberg, I was able to set a design system in place for a more stable foundation.

Although I parted ways with Spikeball before being able to fully launch, the success metrics I would have tracked would be:

• number of active and new users,

• number of games created and attended,

• and the app store rating.

Even though this was no small task, the investment for the future design and development team to clarify the app functionality and share one design system was well worth it.

As with any project, there are things I wish I would have done differently.

• Accessibility 👁🤳

  Due to the tight timeline, I was unable to take in more consideration for accessibility but would have loved to include a dark mode option. As one of Spikeball’s brand values: Be intentionally inclusive. This includes designing for equal accessibility to all.

• Functionality first, features second ☝️✌️

  Through this project, I was able to learn how features focus on distinctive attributes and functionality focuses on serving a purpose well. This project aimed to solve the ambiguous functionality and I had to remind myself not to become too fixated on smaller features.

• Challenge every assumption 🤔💭

  The biggest lesson learned was to challenge every assumption I had backed with data. It’s easy to go off my own empathy or assume what the target user would prefer but I learned to trust the data to empower my design decisions.