top of page
stripes.png
image.png

2020 UX/UI Case Study

My 8 Ball

A fun and engaging app that brings the classic toy into the digital age.

Introducing themed, custom and location based answers to help you make decisions.

rainbow.png

Design Roles

Deliverables

Tools

Timeline

Research
User Testing
IA
Wireframes
Branding + Identity
Competitive + Behavioral Analysis
User Survey + Interviews
Personas

User Stories + Flows
Wireframes
Branding + Style Guide
Usability Testing
Hi-Fi Clickable Prototype
Figma
Photoshop
Google Suite
5 Weeks

Collaborators

Team of 4 UX/UI designers

Overview

The My 8 ball app was designed from research through hi-fi clickable prototype. My 8 Ball is an IOS mobile app that brings the classic toy into the digital age by introducing themed and customizable answers and the ability to connect with other existing apps such as Google Maps and Netflix to help make decisions alone or in a group. It’s nice to count on good humor and practical solutions to help us through uncertain times.

What's the problem?

People need a fun and engaging way to help them make up their mind.
Home - Swipe Between Categories.png

The Solution

My 8 Ball app seeks to bring an element of nostalgia and playfulness to help take the difficulty out of decision making.
It offers the original Magic 8 Ball experience, adds themes, the ability to customize answers, and connect to apps to choose things like where to eat or what to watch.
It can be used solo or with a group.
rainbow_edited.png

User Research

The initial hypothesis was that people seeked a glimpse of the future in times of stress or uncertainty, leading towards spirituality and mysticism when thinking about the app’s purpose.
However, in-depth behavioral and competitive research reoriented the creative direction to a more light-hearted playful approach. An initial user survey provided 300 responses to questions about decision making.

77%

70%

63%

29%

77% of respondents had trouble making decisions.
70% of respondents have used a Magic 8 Ball.
63% of respondents appeal to chance when making decisions.
29% of respondents have used mysticism to help make decisions.
User interviews revealed that people had mostly used an 8 ball for fun. It is used it to answer all kind of questions; from topics on love and friendship, whether to go out or stay in and even for investment advice. Interviewees revealed trouble with making decisions big and small, group consensuses and getting children to adhere to choices.
rainbow.png

Competitive Analysis

Competitive analysis revealed a weak market in terms of offerings, with users mostly abandoning similar apps because the functionality was limited or too ad saturated.
Popular features on similar products were a voice reading the answer and the ability to shake it as you would with a physical Magic 8 Ball. This information was incorporated into our app primarily for the accessibility it provided for those with disabilities.
SWOT analysis was also done on various iterations of the physical product. It’s very popular in the classroom and at home with children. It’s often given as a gift and creates a strong nostalgic response in adults.
A recently released retro design by Mattel proved favorable with customers. Users like the physicality of the object; how it feels in your hands, shaking the ball, and the excitement of waiting to learn ones future from the die “rising up from the murky depths.”

This feedback drove design decisions involving shaking the app, visual style choices and additional functions not found with competitors.

Scenario: The user is with their children but they don't have any activities planned. The children are restless or bored.

Empathize

Research revealed a vast range of archetypes but the most frequently found were those who had or worked with children. Insights from interviews and behavioral research influenced the user personas and journeys.

“I want to have a fun way to help me and my family make decisions that no one can argue with.”

Joel

• 48, Project Manager

Frustrations

• Joel agonizes over making decisions, even small ones. Though initially enthusiastic about something, he will hesitate when it’s time to confirm.

Goals

• When making important decisions, Joel considers first how it will affect the family. Consulting with his spouse has the greatest influence in his decision making process.

• Primary relationships:
Wife and 2 Kids

“I appreciate that I’m seen as dependable but it’s exhausting to always be the one who has to make the plan.”

Christine

Frustrations

• Her friends see her as reliable but this has its drawbacks. Christine is always expected to make the plans, reservations and coordinate activities. She finds this tiring.

Goals

• Christine values the time she spends with her partner and friends. She likes when group decisions are uncomplicated and she appreciates when the technology required for an activity is straighforward and easy to use.

• 29, Middle School Teacher

• Primary relationships:
Engaged, no kids

Scenario: The user is with their children but they do not have any activities planned. The children are restless or bored.

Ideate

My goal at this stage was to play with ideas, functions and a rough visual design.
Multiple variations of sketches came together in this basic layout which allowed for moving into wireframing and a more detailed user flow.
​Team brainstorm sessions over the sketches helped us come to a consensus on features and functions.
ideas.jpg
Based on the personas’ goals, frustrations and stories, I created a flow that addressed both their needs.
rainbow%201_edited.jpg

Build

Moving into wireframes and mid-fi prototyping was a quick process. Their main purpose was to test functionality and basic understanding of flow rather than visual aesthetics.
Due to time constraints, we were forced to move quicker than desired into mid-fi prototyping. This variation was tested with 5 users. They were also asked to provide input on app and category naming based on explanations of each area and feedback on functions they found useful.
Users were intrigued by the theme option. The chat function was dropped as users felt that it was not something they would engage with. Some button designs were vetoed in favor of more recognizable variations.
All users expressed initial confusion about the purpose of the app and requested a more detailed and auto-loading onboarding experience.

Branding

Each team member created an individual mood board to express ideas. We then voted on elements from each style; a 70’s vibe was the clear winner.
It also plays on a popular package redesign for an anniversary edition Magic 8 ball from Mattel.
Colors were pulled from the mood boards with some adjustments to help them pass the accessibility test.
Typographic choices were also a team effort.
Each member researched and presented their favorites. Fredoka was ultimately chosen for it’s playfulness and game-like feeling.
Raleway was paired for the body text for simplicity.
All icons and buttons conform to IOS standards and were user tested for clarity.

Hi-Fidelity

Based on user feedback from mid-fi testing, the app launches with a detailed onboarding experience.
2 rounds of user testing was performed on the hi-fi prototype. Additional changes to text copy for clarity and an instruction bar at the top of each screen was incorporated.
“Haha, Yoda!
I love this!”
The theme and app based categories proved especially popular. Users liked that they could use the app to help them decide where to go or what to do.
“I would love to
use this with friends.

It helps take the
stress out of
picking a restaurant.”

Reflections

Creating this project from scratch proved to be a rewarding and challenging experience.
Being forced to work completely remotely, unable to share ideas with the team in real time or meet with users in person required a lot of flexibility and quick thinking. But it allowed for a broad range in users from various locations and backgrounds ultimately providing higher quality data.
If given more time, I would have liked to experiment with a simpler visual interface. In hindsight, more user testing with earlier prototypes might have allowed for clarifying functionality and saved time and work in the hi-fi stage.
bottom of page