New Feature Case Study

Square

“In My Library” Feature For The Yoto Card Store

Adding a New Feature

Check out the Prototype

Project Details

Role

UX/UI Designer, UX Researcher, Testing

Timeline

November – December 2024

Tools Used

Figma, Whimsical, Fathom, Google Suite, FigJam, Zoom

Project Background

The Problem

a Yoto player atop a case of Yoto cards with a young girl in a pink shirt drawing in the background.
Photo by Taylor Heery

Yoto bills itself as “the ultimate screen-free audio player for kids aged 3-12+.” and has a large e-commerce store where parents, family, and friends can purchase content. However, many users complain of purchasing the same card multiple times, leading to frustration and inefficiency.

To address this pain point, I explored a feature that would allow Yoto account holders to track the cards they’ve already purchased, helping them purchase more efficiently and avoid duplicates.

Competitive Analysis

 What They Have

  • Filterable shopping pages
  • General tagging systems to assist filtering
  • Some have account specific favorites and wishlists

Key Learnings

  • Tagging content that a user has purchased removes the work of tracking that separately
  • It would drive user loyalty
  • Help users organize and bring them back to purchase new content

See the full competitive analysis

By helping users organize and navigate their content, Yoto can demonstrate an understanding of both the joys and challenges associated with managing collections.

Interviews

I conducted 45 minute, remote user interviews with eight Yoto users over the course of a week.

I wanted to ask these main questions

How do users decide which Yoto cards to buy?

What would cause a user to abandon purchasing Yoto cards?

What I Learned

Using an affinity map I found the most valuable improvements would be:

  • Helping users navigate around cards they’ve already purchased more easily.
  • Retaining the existing functionality of the filtering system while making some improvements
  • Making the favorites list persistent across devices

See the affinity map

Research Synthesis

Problem Statements and “How Might We” Questions

Busy parents want to browse and track purchases more easily because they are already short on time and energy.

How might we simplify the browsing and favoriting process to help users save time and energy?

Exhausted parents want to easily share gift ideas for their kids because friends and relatives always ask for them.

How might we assist parents with sharing their kids’ favorite cards?

Personas

I combined information and quotes from my interviews to craft archetypes.

A black and white photo of a mom in a cable knit sweater and jeans, and her kid, labeled "Sophie James, 42. Spokane, WA" with text along the right hand side as follows: Archetype: The Neurodivergent Mom. Bio: Sophie’s daughter has ADHD and has trouble winding down at the end of her day. Sophie loves the Yoto player she got for her because it helps make that pre-bedtime wind down that much easier (and quieter!) However, Sophie also has ADHD and finds navigating the card store a bit overwhelming. “I never remember to use the favorites list because if I can’t see it in front of me, it doesn’t exist.” She likes to browse the store on her short breaks at work and can’t always remember what cards are already in her library. She feels exasperated that there aren’t better organizational options for someone like her and often abandons purchases because she can’t keep track of it all. Then, Needs and Goals: • organize cards to purchase • prioritize which content to buy • help daughter wind down for bedtime • track which cards she's already purchased. Then Motivations: •Maintain peace and quiet at bed time • Save time and money in the purchasing process • Get the best content for her daughter to enjoy. Then, Frustrations and Pain Points: • Unable to remember which cards were already purchased • favorites list not synced across devices • Can't recall when an item was added to list." Overlaid is a quote on an orange background which says "I had to clean up my favorites list by hand, because when you purchase a card it doesn't take them off the list."
A mom in a denim jumpsuit sitting and looking at a laptop with her son labeled "Rachel Galloway, 35 Asheville, NC." With text along the right reading: Archetype: The busy mom of two. Then Bio: Rachel has two amazing kids, Liam, age 9, and Ava, age 4 and a half, as well as a family dog named Ruffles. She works in a busy, downtown architecture firm. She loves the Yotos she has for her kids as it gives them independence and encourages their love of books. When she and her partner aren’t rushing from soccer practice to dance class they love to unwind with a glass of red wine. Her partner’s six siblings love giving Liam and Ava gifts for every occasion and are always asking Rachel for gift ideas. Her kids’ reading and interest levels vary widely so keeping track of what they want can be a challenge. Not to mention she often has to get them new cards at the same time or there can be a real blow up! Then Needs and Goals: • organize cards to purchase for each child • Look over cards list with partner • Maintain her kids' love of books • Hvae gift ideas when asked by friends and family. Then Motivations: • save time and energy • Keep track of her kids' differing interests • keep her kids from fighting with each other. Then, Frustrations and Pain points: • inability to maintain multiple favorites lists • Favorites list not synced across devices • Wants to share list for partner to edit • Can't share list when asked for gift ideas." A large quote on an orange background says: "I've had two different times I've checked out two days apart because I had a different kid in mind."

Focusing on the needs of my personas helped me clearly address their pain points.  I prioritized helping users organize already purchased cards to maintain brand loyalty

Ideation

Features Prioritization

I developed and prioritized a list of features

A prioritized list of features to add to Yoto's e-commerce site: An orange box that says "high priority" next to two items: "purchased icon" described as "some indication that a card has already been purchased by the user," and "sign in for favorites list" described as "attching favorites lists to accounts." A green box labeled "Mid Priority" with two items: "on your favorites list icon" described as "an indication that an item is already on a wishlist," and "date added to favorites" described as "tracking when items are added to favorites lists." and a gray box titled "low priority" followed by two items: "personalized recommendations" described as "recommendations based on previously purchased cards," and "notify if stock running low" described as "notification if a card on a user's favorites list is about to run out of stock."

See the full MoSCoW Prioritization

Information Architecture

User Flow

I created the user flow that I planned on prototyping: filtering out purchased cards

A user flow for the hero path of how a user would filter out their purchased cards or the alternative path where they browse all cards.

Lo-fi Sketches

Through user feedback and feasibility analysis, I prioritized an “In my Library” indicator and the ability to filter out those cards while browsing. I sketched on ways to hide purchased cards in the existing drawer menu, as well as catalogued what flags already existed on the site

Sketches of ideas for adding a feature to the Yoto e-commerce site.

Wireframes

Mid Fidelity Wireframes

I created click-through mid fidelity wireframes, so I could test the usability of the purchased flag icon and a “hide cards in my library” toggle

A digital wireframe of the Yoto e-commerce store with an "in my library" flag on a few cards
A digital wireframe of the Yoto e-commerce store with the "filter and sort" drawer menu open. Included with other options for sorting is a "hide cards in my library" toggle at the top of the menu.

I also tested the toggle on the main page but users preferred it inside the drawer menu.

A digital wireframe of the Yoto e-commerce store with a "hide cards in my library" toggle on the main page, just below the existing "yoto club" toggle.

Prototype

High Fidelity

I created a high fidelity, click through prototype starting with Yoto’s account login modal

I recreated the Yoto card store and added the “Hide cards in my library” toggle in the existing drawer menu

The Yoto e-commerce store with the "Filter and Sort" drawer menu open. A "Hide cards in my library" toggle appears above other "sort by" options below.

During mid-fidelity testing, I discovered that a small “purchased” flag icon wasn’t as noticeable to users as intended. To improve visibility, I designed an “In My Library” overlay to indicate which cards users already owned. I also added a hover state that temporarily removes the overlay, allowing users to view the cover art unobstructed if desired.

Two images of "The Wild Robot" Yoto card for sale. On the left, titled "Purchased Indicator": a slightly whited out version of the cover with the words "In My Library" overlaid on the image. On the right, titled "Hover State": the regular cover image with no overlay.

User Testing

Goals

  • Evaluate whether users can navigate the task with a low error rate
  • Gauge the feature’s ease of use
  • Gain qualitative feedback from Yoto shoppers

Methodology

I completed five remote, moderated user tests. Each participant was an actual Yoto user. All sessions were recorded to be able to refer to user comments and body language.

A yoto player sitting atop a case of Yoto cards with a sticker book and basket of colored pencils in the background.
Photo by Taylor Heery

Feedback

What's Working

100% of participants were able to complete the task with zero errors in one minute or less.

Participants found the “In My Library” overlay delightful and expressed that it was a feature they would love to have.

One participant even suggested that she might not hide her library; she enjoyed seeing which cards she had while browsing.

Participants viewed the feature as clean, efficient, and beneficial to their Yoto card store experience.

Some Thoughts from Participants

“Super useful and really well designed”
– K.M.

“Please make this!”
-E.C.

What Needs Improvement

  • One participant mentioned that the toggle’s placement at the very top of the drawer menu made it slightly out of her line of sight.
  • Three participants initially scrolled past the toggle before returning to it.
  • The visual hierarchy between “Hide cards in my library” and “Sort By” made the toggle harder to notice.
  • The toggle’s proximity to the “X” button in the drawer menu caused users to overlook it.

Iterations

The Yoto e-commerce store with their "Filter and Sort" drawer menu open. A green arrow points to a "Hide cards in my library" toggle that is slightly lower than previously and in a heavier font.
  • Based on feedback and observations, I identified the need for better placement of the toggle to improve visibility and ease of access.
  • I adjusted the hierarchy of elements in the drawer menu to ensure the toggle stood out more.
  • I hypothesized that moving the toggle further away from the “X” could help users more easily see and interact with it.
See the prototype

Key Takeaways

Reflection

This project reaffirmed the power of user-centered design in enhancing digital shopping experiences. By implementing simple but effective tagging and filtering solutions, Yoto can create a more seamless and enjoyable purchasing journey for its customers.

Through my research, I identified several potential solutions to enhance user efficiency, but I had to carefully prioritize those that would deliver the most value to both users and the business. I quickly realized that a complex tagging system, which could address the limitations of the wishlist feature and track which cards users had already purchased, would be too intricate and waste development time. I focused my efforts instead on optimizing the user’s existing library, which my research indicated would have the most positive impact on the user experience.

This simple feature would have a significant impact on user satisfaction and brand loyalty particularly for a growing company like Yoto. This improvement, though modest, could yield outsized benefits for customer retention and engagement.

Two Yoto players and a number of Yoto cards, some in a storage case
Photo by Taylor Heery

Future Considerations

Having a deep understanding of the Yoto ecosystem allowed me to easily connect with users and their needs. During this project, I observed that Yoto updated their wishlist system from being browser-specific to account-specific, which was one of my original feature ideas. This change reinforced that I was on the right track in terms of addressing the needs of Yoto’s users.

Several future opportunities could enrich the Yoto experience, such as introducing the ability to create multiple wishlists or enhancing gifting functionality. These features would add even more value to customers, creating more versatile and personalized experiences for users.