Yada Magic Blocks


Overview

On Yada, our creators create short-form blog posts in the form of tappable cards. Our job at Yada is to empower our creators to continue to craft expressive and fun content for their readers.

Problem

Today, our creators compete for the attention of their fans across many different social and entertainment platforms. While this abundance of media content has provided more choices than ever before for readers, it has pushed us to continually seek out new ways to innovate the Yada medium for our users.



Solution

I designed Magic Blocks, a product performance innovation that allows users to enhance their threads using a collection of interactive media components. With Magic Blocks, users can create interactive stories, games, and more. This feature was launched in 2019 and is live today. Get Yada for iOS

Client

Yada (iOS App and Web)

Timeline

6 Weeks

Role

Product Design, UI/UX, User Research

Team

4 Dev
1 Business
1 Community
1 Data
1 Design (that's me!)

Tools

Sketch, InVision Studio, Principle, Zeplin, Amplitude, Metabase



A new way to express yourself
Use Yada Blocks to interact with one another.

Yada blocks are completely interchangable, add them the same way you add photos. And just like photos, you can add up to 4 on any card. Interact by simply using a holdtap.




Customize to your liking
Stay in control of your aesthetic and voice.

Limitless personalization so that you can make your threads stand out and reach the right readers.




Made for creativity
Infinite combinations and use cases, all waiting to be explored.

Embrace your inner creativity. Discover your voice and aesthetic through our presets, or use your own.




My Contribution

As the only designer, I led the design process using a human-centered methodology within business strategy, budget, and engineering constraints.

process

Research

Setting Goals

Before I started, I scheduled interviews with stakeholders to better understand Yada’s challenges moving forward. Once I understood the big picture, I put together a roadmap and set broad goals for the new feature launch.

Growing alongside our users

The community had grown exponentially since our first launch, but it was obvious that our format had not grown alongside our users. We knew that we had to innovate in order to compete with the larger social giants vying for our users’ attention.

How are teenagers using the app today?

Data Analysis

I began by digging into behavior data and content trends. I also reviewed support tickets to gather direct user feedback. Data quantified the trends our team was noticing in the app.

  • Using Postsql/Metabase, I queried our database to understand aggregate trends in content, like topics and thread metrics. I then used NLP to thematically cluster content data.
  • Using Amplitude, I tracked user activity like engagement time and content completion.
  • Upon reviewing ongoing community support data, I was also able to recode feedback to reveal key themes in the underlying motivations of their feedback.

Data-driven Insights

"Interactive" threads are the most engaging.

Threads featuring number games or sharing external/rich links start emerging and dominating engagement.

example of interactive thread content on yada

example of interactive thread content on yada

Too much demand for a small supply of content.

Despite the demand for interactive threads, they were not created often. Even more surprising is when you compare the frequency of categories to their engagement:

example of interactive thread content on yada

More visuals leads to more engagement.

Average 2.35 photos per post, but engagement increases significantly with # of photos

frequency versus engagement of photo counts

Users want creative & interactive tools

77.6% of all request were motivated by creative and social needs.

frequency versus engagement of photo counts

User Interviews

At best, data cannot teach you about users’ motivations. At worst, data can be misleading. A robust research strategy embracing both data and individual experiences in the understanding phase. To validate and uncover more insights, I conducted interviews about thread creation and reading. We created 3 cohorts representing experienced creators, new creators, and readers. Each group offered a unique perspective of our medium.

example of interactive thread content on yada

photo of user research session

power creators interview questions

Qualitative Insights

Creatively Driven

• Creators’ main benefit is the ability to express themselves creatively. Readers identified “clear creativity” as the primary definition of a high-quality thread.
• Visual aesthetics are valued as much as content. Creators use third-party apps to create personal fonts and find images that match their visual persona.
• If a post did not contain creative visuals, readers would immediately stop reading.

Difficult for Newcomers

• Newcomers lack guidance about what content readers wanted, and become frustrated when their threads go unread.

Fundamentally Interactive

• Readers engage with threads in-person with their friends. (e.g. following guides, discussed results, and trying hacks.)
• Creators continually seek new ways of interacting with their followers. They solicit requests and feedback through messaging and anonymous third-party apps.
• Creators create group chats where they discuss and interact with threads. Often, they collaborate on shared threads.

Making sense of it all...

Our users are limited by the creative tools offered. They lack the guidance and tools to create compelling content, which makes readers feel frustrated because they can't find content that interest them. This leads to reduced retention.

user personas

Brainstorming

Diverge

I brought these findings back to our product team and we got to work exploring solutions to support our users’ creative and social needs. I developed three reframed “How Might We...” questions to broaden our thinking. We took advantage of our unique backgrounds, making this process iterative, fast, and lead to better solutions.

how might we questions

how might we questions

Competitive Analysis

To start, I compiled a thorough review of our competitors to find gaps among existing products. I paid special attention to the features and social graph each platform offered, to ensure we were introducing a new, compelling innovation that enhanced our value proposition. This renewed our understanding of our value proposition and bridged our product development with business goals.

how might we questions

how might we questions

Evaluative Design

To aid our ideation, I collaborated with our community team to catalogue all of the innovative ways users had been hacking our format so far. This allowed us to easily refer back to underserved use cases, while imagining future use cases.

how might we questions

Converge

Next, I used an anonymous vote to lead a discussion about the impact and cost of our top ideas. After many more discussions and testing, we moved forward with launching 3 new tools and completely refactoring threads to integrate the new Magic Block system for future tools.

product features

Building our roadmap

After consolidating notes, I put together a full design brief that outlined the project goals, stakeholder comments, user stories, and key deliverable dates for the project. We reviewed it with the engineering team and made sure that everything we outlined was within scope. Once this was approved by stakeholders, I began design development.

1. Develop a UX system for magic blocks that can be applied to future media types
2. Define a visual system for magic blocks

UI/UX Development

Sketches

Sketches are ideal for early ideation because anyone can easily contribute. I led several sketching sessions with the business and engineering leads. After exploring many ideas, we used our individual experiences in business, design, and engineering to converge on a final concept.

sketches

User Flows & Wireframes

Afterward, I worked individually to refine the user flows and bring our concept to life. I developed many iterations of flows and wireframes, critically weighing the UX tradeoffs for each. Once I had thoroughly explored each option, I presented my proposal to stakeholders and engineers for feedback.

user flows

Prototyping & Testing

I tested the product at various stages of development, and documented the findings to refine navigation patterns, interactions, and visual communication.

  • Lo-fi prototypes were tested with the stakeholders weekly to get feedback on the functionality, content, and interactivity of the product. At medium fidelity, I collaborated with engineers to ensure feasibility.
  • Prototype User Testing - I brought an Invision prototype for users for task completion testing and feedback. Internally, I modeled complex interactions with Principle for our team to test and refine.
  • Beta Testing / QA - We brought a live version to select beta creators/readers within the Yada communit

Engineering Handoff

Lastly, I prepared design specifications and used Zeplin and Notion to share with development. I was on-call during development to address questions about the design, or to make revisions in face of engineering complications.

Several iterations later...

product features

Impact

Our entire team was proud to share our work to much excitement from our users. Magic Blocks allow creators to further express their creativity and interact with readers, all while improving the ease of creation and feedback for novice creators. The final result is a flexible, intuitive, and empowering creative tool of endless applications. Here are just a few examples of the content being created today...

product features

product features

Challenges

Identifying the problem & advocating for users
A robust research strategy was needed to correctly identify opportunities for innovation. Moreover, a strong, evidence-based proposal was needed to convince stakeholders the importance of insights.
Planning & prioritization
Success required the full cooperation and excitement of our team. It was imperative that we all aligned on a shared vision to ensure we delivered a quality product in time.

Project Learnings

Collaboration
The more eyes on a design, the more it’s exposed to varying opinions, experience, and critique — and this can only ultimately improve it.
Process
Be prepared for unexpected challenges and ambiguity, but a trusted process can help your team out of the toughest blockers.
Ownership
When designing individually, you must be diligent and committed to your practice. Self-management is key when collaborating across teams to ensure a successful, timely launch.