Empowering Little Voices: A Kid-Centric Makeover for SodaSpeak

Improving the onboarding experience for new users of the SodaSpeak app and making it easier for younger users to interact with.

SodaSpeak, founded by Nicky Chang, is a kid’s messaging app that prioritizes privacy and healthy tech habits. Having a background in internet security, Nicky originally created SodaSpeak as an app for adults with a focus on privacy. However, it was later repositioned for children. Concerned about the impact of texting on communication skills and the addictive nature of notifications to children, the team aimed to create an app to address these issues. They provide resources for parents on introducing devices to children and designed the app to have no addictive notifications. SodaSpeak encourages voice communication by limiting text messages and offering unlimited voice messages.

Project Details

Timeline: 10 weeks

Stakeholder: Nicky Chang, Founder of SodaSpeak

Project Duration: December 2022 - February 2023

Tools: Miro, Figma, Zoom, UsabilityHub

SodaSpeak was at a big inflection point

SodaSpeak was:

A highly secure WhatsApp alternative for adults, founded about 5 years ago

Soda speak is becoming:

A family messaging app restaged for parents and kids with a mission to encourage more talking and less texting

The company needed UI help to meet its new objectives

I gathered everything I learned from the brief and the stakeholder interview to create guiding principles for this work. I landed on these four “how might we” statements that I returned to any time I needed to make decisions about my designs:

How might we…

Help people better understand what the new SodaSpeak is for

Help increase paid users

Help users understand the feature set of Sodaspeak

Help users understand the subscription options

I began my process with research

What I did

Survey of N=50 parents

Surveys revealed that parents would not let their kids have a messaging app at 4-8 years old (SodaSpeak’s target audience), instead closer to 10-12 years

I sensed that I was going to need to design an experience that was going to work for very young children (as is the stakeholders’ wishes) while also making the look and feel more mature should older kids decide to use it.

Heuristic Analysis

I relied on design heuristics to begin critically thinking about improvements that could be made. I found issues related to:

  • Consistency and Standards

  • User freedom and control

Additionally, the contrast of text color and background color on some screens brought up accessibility concerns.

What I learned

Simplicity is paramount. As an educator with a background in designing experiences for children, the more I interacted with this app the more I had an intuition that this was not going to work for little children.

While this UI must work for all ages, I needed to design for those who will struggle with it the most - kids.

I landed on 4 key design objectives

I created these 4 key design objectives from a combination of my experience in the stakeholder interview and from the heuristic analysis.

1

Make the design simpler and more kid-friendly

A heuristic analysis yielded that many aspects of the UI were not user-friendly.

2

Encourage kids to use voice messaging while using the app

This is one of the main tenets of the app itself.

3

Make parenting resources offered within app more discoverable

Again, from the heuristic analysis, there is content within the app that is poorly categorized and organized.

4

Improve understanding of how the subscription plans work

The Founder Nicky Chang expressed in the stakeholder interview that this was something that could be addressed.

Here’s how I validated my solutions

Early Talk Button Sketches

My first sketches included the big talk button. I started formulating ideas for how to communicate the functions of the voice feature with more visual directions to help younger users understand how to use it.

Chat Flow Idea Generation

I then began generating early ideas for the chat flow. In the spirit of encouraging voice rather than text, I wanted to de-emphasize the keyboard and give the voice chat button more prominence on the screen

Low Fidelity Wireframes

During usability testing, I checked low-fidelity wireframes to make sure users understood what each button meant. The goal was to confirm that users were naturally drawn to the 'Speak' button. The feedback helped refine the design for a more user-friendly experience.

The good stuff

Design Solutions

1. Make design simpler and more kid-friendly

Opening Animation

2. Improve understanding of how plans work

“Choose a Plan” Flow

Before

ok

Even though the plans page had a lot of directions to help users understand, stakeholders mentioned that customers consistently had trouble understanding how the plans work.

Additionally, there is a problem with accessibility standards with the pink text on a blue background

After

Better

I decided to create interactive visuals that responds as the user makes changes to their plan.

Parents can easily compare what is included in the free vs paid plans. They can also see that they are the account owners, and can see the price change when a child account is added.

3. Encourage kids to use their voice, not text

Optimize for Voice Chat

Before

Broken

There were a few problems with the original chat feature:

Design Heuristics issues:

  • User Control and Freedom. The voice recorder did not predictably work. At times it would simply record, other times it would record and transcribe. Additionally, the directions to use the voice recorder are written, and young children might not be able to read those directions.

  • Consistency and Standards. The 24 at the top right corner is not a button, but it is underlined, implying that it is a button.

After

Better!

Since the whole point of the app is encouraging kids to choose voice messaging over text messaging, and the target age is very young (some pre-reading level), I designed with these specifications in mind:

  • Prioritize the voice chat button in the visual hierarchy

  • Animate to indicate when buttons are in use

  • Do away with written directions

4. Make key resources offered more accessible within the app

Resource Page

Before:

Overwhelming

The old experience placed educational articles in the onboarding screens never to be found after sign-up. This is a big departure from UX consistency and standards.

After:

Organized

My new design organizes the SodaSpeak branded articles, as well as other curated content into one easy-to-find page.

Finally: putting it all together

Prototype Tour

Try out the prototype for yourself!