How can we redesign the Magic 8 Ball to help people working from home relieve stress through humor?

Before coronavirus struck, you were a social butterfly who enjoyed dressing up for work. Now you find yourself using the bathroom as your extended office.

If you can relate to this scenario, then know that you’re not alone.

The Kaiser Family Fund found that an overwhelming majority of survey participants had reported not leaving or rarely leaving their homes since the start of the pandemic. The prolonged physical disconnect from friends and communities has led many people to report feelings of isolation, uncertainty, among other tolls on mental health. 

My role

UX and product designer
Collaborated with three teammates

Key Challenges

Behavioral analysis 
Content design
Establish a design system
Accessibility 
Animation

Our Solution

KiA, an amusing AI companion who provides funny answers to users’ questions with the goal of alleviating stress. The KiA platform also supports an open Q&A forum in order to dispel feelings of isolation and foster community.

During these times of great uncertainty, it may seem counterintuitive that KiA app is inspired by the Magic 8 Ball, a classical lighthearted toy of chances rather than science. Yet, the classical popularity of this toy suggests that, for many people, even receiving a simple response to one’s worries and doubts is a solace. Therefore, my team and I designed KiA to benefit from the communicative characteristic of the Magic 8 Ball, but not without obvious enhancements such as a rich database of AI customized answers (as opposed to the Magic 8 Ball’s twenty responses) and generous spreading of humor. 

Research

Our first step was to survey our direct competitors, one of them being Ask 8, a digitalized magic 8 ball. Through using SWOT analysis to map out its user reviews on the Apple App Store, we’ve identified: 

  • Strengths: simple and intuitive in design, color coded answers, and good animation.
  • Weaknesses: numerous Ads, inaccurate answers, easily decipherable answer patterns, slow response time, and update of system statuses after the user input the question.

For our App to comprehensively address our users’ emotional needs, I expanded research into the aggressively growing market of mental health tech. I discovered Woebot, an AI that uses cognitive behavioral therapy (CBT) to improve user’s mood. Similar to Ask 8, it interacts with users through Q&A.

  • Strengths: clean interface and the information it provides is scientifically backed.
  • Weaknesses: users are frustrated that they cannot input questions other than the pre-selected options, they also can’t access other features without first completing an initial chat.

Survey

From the competitive analysis, we have decided that our next step was to gather quantitative data to gain a purview into our potential user’s areas of stress as well as their existing coping strategies. The survey recorded a total of 114 responses. I used Excel pivot tables and polynomial regressions to analyze the data.

Key results:  

  • Respondent demographics are centered around the 25-30 and 31-35 years age groups, with a majority being single female working from home.
  • The top concerns of our participants are financial security (87%), physical health (75%). and mental wellbeing (72%).
  • People are mainly coping by exercising (50%) and focusing on hobbies such as knitting and gardening (48%) . Social media interaction has risen.
  • Essential workers and stay-home workers with kids have self-reported a higher medium score in their stress management abilities (3.6 and 3.7) in comparison to the unemployed and stay-home workers without kids (3.1 and 3.2).

 

The result revealed that people are feeling most uncertain about their financial stability and their physical health. Their main coping method is to divert their attention to other activities that required high concentration but less brain processing power.

User Interviews

Conducting an user interview was a crucial step for us to connect all the dots between our market research and the survey. We have sent out interview invitation to all survey participants and five people joined2 working from home with no kid, 1 working from home with kids, 1 essential worker, and 1 unemployed.

“There is a commitment that the apps assume of you”​​

– A.,interviewee

The interviewees have validated our findings in the competitive analysis regarding the challenges in user engagement with a mindfulness app. Many have previously tested out or are currently infrequent users of these self-alleviating apps. However, users often abandon such Apps because they disrupted daily routines and many pressed for engagements with daily tasks which made the users feel guilty if they didn’t complete them. Moreover, a majority of them prefered an App that is humorous. Humor brings immediate results to the user, what else inspiration could sound preachy and guidance requires long term commitments that may become a mental burden.

“Knowing your friends are still there...Knowing that they don’t forget you is nice”

– Z.,interviewee
The interviewees have revealed that one of the main reasons they signed up for social activities, such as online exercise classes, is so that they can maintain a social connection with their classmates via Zoom. So even though people are mentioning other coping mechanisms as the top method – it usually has social elements to it. We wanted foster such a connection in the App as the magic 8 ball is usually a very solitary activity.

Pain-Points and Opportunities

After cross-analyzing the quantitative and qualitative data through using affinity diagrams, we have narrowed down the research findings and defined the pain-points that people are currently facing during their journey:

  • Covid-19 has rattled people’s daily life and plans. Beyond the immediate aftershocks of loss and uncertainty, many existential questions are slowly emerging to which people don't really have the answers. They can’t really find an effective way to move on from those questions and refocus on the present because they are having minimal social interaction with people, and most technologies don't provide meaningful destruction
  • People end up abandoning many stress-relieving apps on the market when they don’t experience an immediate positive change or if the apps require too much time commitment

Our respondent’s feedbacks also revealed opportunities for improvement:

  • A simple and easy to use app that doesn't require too much of learning
  • Full of humor, because laughter is the best medication
  • Be connected with both the online and off-line community

Persona

As a way to converge all the research findings into one human experience, we created Keisha Wright, an urban-dweller working as a marketing professional. She enjoys hanging out with her friends, taking long walks in the park, going to the beach, and trying new food.

The pandemic has disrupted her routine and social activities. She now works from home and feels uncertain about the state of her professional career. If she loses her job, she would be forced to make a series of decisions on readjusting her living situation and lifestyle. Even though she knew that catastrophic thinking won’t help her to perform better at the job or increase her value to the company, she can’t stop the little voices in her head that are asking all these “what if” questions. She needs an outlet to dump all these stressful questions so that she can refocus on her job and her present life.

User Journey

The problem that Keisha might have encountered when first interacting with KiA:

  • = Pain point

User story

To address the problem statement and Keisha’s pain points, the top priority is to provide a simple and fast onboarding process so that new users can experience immediate benefits of our Q&A features. Returning users can also expect an increasing satisfying experience each time they reopen our app because we constantly refine the accuracy of our responses. Users may also choose to spread their humor throughout the forum.

Flow chart

We then created a scenario for Keshia to navigate the main feature “Ask KiA” based on her goals. The basic Q&A flow allows users to ask a question and receive an answer without any hustle. Unlike our competitors, we improved our app’s accessibility by allowing users to input their questions through voice recognition. To overcome the limitations imposed by the Magic 8 Ball’s repetitive and chance-driven answers, we incorporated AI technology to scan the users’ inquiries for keywords that are then accurately mapped to pre-programmed sets of funny answers.

Keyword mapping

This is a sample of how inquiry keywords might activate our answers. Keywords are identified based on trending concerns expressed by test users, mainly financial and health related. For questions that lie outside the keyword map, KiA would direct users to the forum.

Tests and iterations

4 rounds of testing
16 total different participants

Once we have defined the MVP and user flow, I led the way in building the UI and prototype through a Lean-like framework.  By time boxing the process of brainstorming, rapid prototyping, and empathy mapping, we moved fast and efficiently to meet our goal of testing the improved prototype weekly.

Through Crazy 8, we have identified the key elements for KiA such as the text field and answer display. We decided to skip the paper prototype as our team was collaborating virtually.

In the first usability test, we asked the users to: 

Ask KiA a question > Get an answer > Share the answer > Visit the forum > Create a post > View a thread > Comment on the thread

However, we then learned these instructions would defeat the purpose of creating an intuitive app and stressed the users because they have to perform tasks. So we scrapped our first script and went with this:

“You are getting anxious by the number of uncertainties in life; you want to divert your attention to something that helps you to alleviate this feeling.” We then ask them to explore KiA while thinking out loud.

Throughout the iterations of Ask Kia, I have discovered that:

  • Users are eager to ask questions right after the app is loaded. They also prefer a minimal and calm interface.
  • “Home” has different meanings to different users. While some can easily identify the home buttons as a way to go back to ask KiA more questions, others mistook it as a way to return to the onboarding screen. In response, I have morphed the home button into a shape that resembles the silhouette of KiA to allude to its Q&A function.
  • Accessibility drives aesthetics. In version 3, users have pointed out that the yellow CTA button didn’t contrast well against the background. Unable to find a suitable color replacement, I explored other visual variations and arrived at version 4. I then conducted an informal A/B testing. The testers showed immediate positive reaction towards the new version and they were able to identify the CTA button faster.

In the Forum feature, I have learned that:

  • Most users are observers rather than active posters when it comes to using the forum because their first instinct is to click on the “search”, “mine/all” and “sort” tools. They explain that they want to know if the forum already has topics they are interested in.
  • A simpler layout can enhance the browsing experience and shorten the decision making process for the users. I removed secondary elements, such as the bookmark icon button, and made the primary buttons (“search” and “create a post”) appear closer to the user.
  • Users want transparency and assurance. As a UX designer, I seek to design a safe environment for the people to express themselves and to ensure that KiA continuously foster a relaxed and positive environment.

All feedback generated during formative Usability tests were crucial to improving and iterating the product. Most of the necessary changes were applied when the product entered the final prototyping stages.

We get it. Life’s tough and your existential shoes are just too tight. KiA’s here to untie those shoelaces and throw them into the ocean.

When designing for KiA, my team and I are committed to provide an experience that is intuitive, functional, scientific, calming and joyful.

I led the effort to develop these words into visuals while ensuring that all design elements comply with the iOS Design Guideline. I established a design system that unifies the visual presentation across all prototypes, branding materials, and PPT presentations. I also taught my teammates how to use the library and component features in Figma to improve our work efficiency.

Logo

Wordmark logo used a modified form of the Berlin Sans FB typeface.

Mood board

Color Palette

Colors are inspired by the radiant hues that one would see at sunrise. These colors are psychologically proven to evoke positive emotions.

Gradients add warmth and help enhance the feelings of calmness, coziness and safety.

I conducted accessibility evaluations against the Web Content Accessibility Guidelines(WCAG) to ensure that all colors have a contrast ratio of at least 3:1. I also used the color blind checker in Adobe Color to ensure that all users can distinguish the changes in color.

Buttons / Grids

Typography