Yada Magic Blocks
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.
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
Yada (iOS App and Web)
Product Design, UI/UX, User Research
1 Design (that's me!)
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.
As the only designer, I led the design process using a human-centered methodology within business strategy, budget, and engineering constraints.
Growing alongside our users
How are teenagers using the app today?
- 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.
"Interactive" threads are the most engaging.
Threads featuring number games or sharing external/rich links start emerging and dominating engagement.
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:
More visuals leads to more engagement.
Average 2.35 photos per post, but engagement increases significantly with # of photos
Users want creative & interactive tools
77.6% of all request were motivated by creative and social needs.
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.
• 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.
• 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.
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.
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.
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.
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.
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
User Flows & Wireframes
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
Several iterations later...
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...
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.
The more eyes on a design, the more it’s exposed to varying opinions, experience, and critique — and this can only ultimately improve it.
Be prepared for unexpected challenges and ambiguity, but a trusted process can help your team out of the toughest blockers.
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.