voiced
Helping users move from free to premium effortlessly
Voiced, an article-based media app, was initially a freemium-only app, but the business aimed to introduce a premium tier to increase engagement and revenue. The challenge was designing a smooth, intuitive upgrade experience that encourages users to adopt premium features effortlessly, without disrupting their existing freemium experience.
Designing a Smooth Upgrade Flow for Voiced
Voiced is an article-based media app that delivers curated stories, news, and articles in a personalized, engaging format. Originally freemium-only, the app introduced a premium tier offering exclusive stories, offline reading, and an ad-free experience. The challenge was designing a seamless upgrade flow that encourages users to adopt premium features without disrupting their existing freemium experience, clearly communicating the value of premium content while keeping the app intuitive and enjoyable for all users.
MY ROLE
Led the end-to-end UX process for the Voiced premium upgrade, including desk research, competitor audit, heuristic analysis, sketching, wireframing, high-fidelity design, prototyping, and usability testing to validate and refine the upgrade experience.
tools used
Figma, Zoom
phase 1 - Plan & Research
I started by devising a project plan to outline goals, deliverables, and timelines, and a research plan to structure methods and focus areas.
project plan
As the sole designer on the project, I devised a project plan to provide a clear roadmap for the entire design process. I defined goals, scope, and deliverables, structuring the workflow across research, design, and validation phases. The plan helped me manage time efficiently, guided my design decisions, and ensured a systematic approach to the project. It also served as a documented reference that allowed me to track progress and make iterative improvements throughout the project.
6-Phase Project Plan: From Discovery to Final Design
RESEARCH & ANALYSIS
To understand onboarding and upgrade flows, I conducted a competitive audit and heuristic analysis of leading media apps. This helped me identify existing trends, common patterns, and usability gaps in the market.
I also performed screenshot teardowns to map the complete journey of both free and premium users. These visual breakdowns highlighted how competitors presented value, surfaced upgrade prompts, and balanced the freemium-to-premium experience.
Studying competitors to spot trends, strengths, and gaps.
heuristic analysis
To evaluate usability issues in the existing flow, I conducted a heuristic analysis using Nielsen’s principles. This helped me systematically assess navigation clarity, visibility of system status, error prevention, and consistency in the onboarding and upgrade flows.
Through this process, I identified areas where the product fell short, such as a hard paywall without clear value communication and missing form validation during sign-up.
competitive audit
I analyzed Medium, Substack, Inkl, The New York Times, and The Atlantic to understand how leading platforms balance free and premium access. This audit revealed different strategies for onboarding, upgrade prompts, and value communication. For example, some platforms emphasized free trials to reduce hesitation, while others highlighted premium benefits upfront or personalized content to drive engagement.
Competitors balance clean reading experiences with paywall strategies; Voiced can stand out by clearly communicating value, personalizing content, and simplifying subscription visibility.
SCREENSHOT TEARDOWNS
To understand how competitors structure key interactions and guide users toward upgrades, I conducted screenshot-based teardowns of onboarding, content access, and upgrade flows. Each screenshot was annotated to highlight:
UX patterns - recurring design and interaction strategies.
Strengths - effective CTAs, clear content hierarchy, or engaging visuals.
Weaknesses - confusing paywalls, hidden trial info, or inconsistent messaging.
Opportunities - areas where Voiced can improve clarity, reduce friction, or better communicate value.
This method helped translate abstract competitive insights into visual evidence, making it easier to identify actionable design improvements.
action items
These are the action items derived from the screenshot teardowns, highlighting improvements to enhance usability, clarity, and user experience.
phase 2 -user flow & sketch
I mapped user flows to define key journeys and ensure smooth navigation. Next, I sketched concepts and translated them into wireframes. Using these wireframes, I conducted guerrilla testing to quickly validate usability and refine the design before moving to high-fidelity mockups.
user flow
User flows helped me visualize how people move through the product to complete core tasks. By mapping these journeys, I was able to identify potential friction points and design a smoother, goal-oriented experience.
User Flow Map
sketching
I began with paper sketches to rapidly turn abstract ideas into tangible visuals. This low-cost, flexible approach allowed me to explore different concepts, compare alternatives, and refine the overall structure before moving into wireframes.
low fidelity wireframes
After sketching, low-fidelity wireframes helped me visualize the key elements and build a base for mockups. They also served as the foundation for creating wireflows used in guerrilla testing.
Key touchpoints like onboarding, search results and comparison screens
phase 3 - validate
I created a clickable wireframe prototype and conducted guerrilla testing with 5 participants to gather feedback, uncover usability issues, and refine the interactions for an intuitive user experience.
interactive wireframes
I built a clickable prototype in Figma based on the wire flows, letting users navigate Voiced’s freemium-to-premium journey, test upgrade prompts, and uncover pain points that informed early design improvements.
Guerilla testing
I conducted guerilla testing with 5 users using the interactive wireframes to quickly validate Voiced’s freemium-to-premium flows. Observing users navigate onboarding, content discovery, and upgrade prompts helped identify friction points, confusing interactions, and opportunities to clarify value.
Users testing the wireframes
KEY FINDINGS
Based on user feedback, several opportunities emerged to improve engagement and reduce friction in the upgrade flow:
Retain guest access as secondary option, but nudge toward sign-up after the first article.
Make free article allowance explicit in the UI.
Add a free trial to reduce upgrade hesitation.
Allow users to skim key points before committing to full articles.
Add highlights for all articles.
Provide a ‘Continue Reading’ section for existing users immediately after login.
Together, these opportunities highlight how small design changes can better guide users through the journey from exploration to subscription.
phase 4 - styleguide & mockups
After guerrilla testing, I created a comprehensive style guide and high-fidelity mockups for Voiced. The style guide defined colors, typography, and components that reflect the brand’s bold, hip, and smart personality. Using this foundation, I designed polished screens that ensured consistency, usability, and a visually engaging user experience.
design language
I created a style guide that expressed the brand’s bold, hip, and smart personality while staying consistent with iOS design standards.
Color palette → Purple for confidence, coral for vibrancy, teal for clarity
Typography → Followed iOS Human Interface Guidelines with the San Francisco typeface and clear hierarchy
Iconography → Used SF Symbols for a cohesive, native feel
Imagery → Clean and approachable to balance modernity with warmth
Together, these elements formed a design language that feels unique yet familiar, shaping the look and feel of every interaction.
Onboarding ———>Sign up ———>Home page ———> Article detail view ———> Premium feature unlock by upgrading———> Full Access with premium benefits
high fidelity
I translated the wireframes into high-fidelity mockups that showcase the final visual identity and interaction details. These designs emphasize clarity, consistency, and usability while bringing the brand’s personality to life through typography, color, and layout choices. High-fidelity prototypes also allowed for realistic testing, helping validate flows and refine the overall user experience.
The design follows iOS conventions such as bottom tab navigation, SF Symbols, and system-safe spacing, ensuring the app feels intuitive and native while still reflecting the brand’s bold, hip, and smart personality.
phase 5 -prototype & test
I conducted usability tests with real users to see how they interacted with the prototype. Their feedback helped me identify pain points and areas to improve, making sure the final design was easy and enjoyable to use.
prototype
For Voiced, I designed the end-to-end freemium-to-premium experience, focusing on clear upgrade triggers, value communication, and a seamless transition. Key elements included:
Contextual CTAs and modals prompting upgrades
Pricing and feature comparisons to highlight premium benefits
Micro-interactions like category highlights and toast messages
Premium onboarding with celebratory confetti and feature tips
Other interactions, like liking or sharing articles, were intentionally skipped to keep the prototype focused on validating the upgrade journey.
After testing with 5 remote users, I refined the hi-fi designs and validated improvements through a second round with 3 in-person users.
From Users, For Users
Insights from the testing
Before
After
After
Before
After implementing design improvements based on the first round, I tested the hi-fi designs with 3 in-person users to validate changes and gather feedback.
Positive Feedback from Round 2:
Clean layout → users found the interface visually organized and easy to scan.
Easy navigation → moving through sections felt intuitive.
Category tags → tags above articles clearly indicated content categories.
Freemium-to-premium flow → users understood the upgrade process naturally.
Benefits upfront → listing upgrade benefits at the start improved clarity and decision-making.
Key issues from Usability Testing (Round 1):
Users couldn’t locate the Start Free Trial button on the premium plans page.
Users were unsure if offline reading was included with an upgrade.
Users didn’t realize the horizontal nav bar was scrollable.
Users couldn’t tell if trending articles were free or premium due to the unclear lock icon.
TAKEAWAYS
A clean, user-centered freemium-to-premium flow reduces friction and highlights value.
Intuitive upgrade flows and progressive disclosure make decisions seamless.
Clear layout and hierarchy support confident decision-making.
Personalization and premium features boost engagement and conversion.
What I’d Do Differently
More user interviews → Uncover deeper motivations and refine upgrade strategies.
Modern layout → Test fresher visual patterns, typography scales, and interactions.
Next Steps
This project focused on creating a clean freemium-to-premium experience, guiding users from free access to subscription with progressive disclosure of features and benefits.
Key successes include:
Simple, clear layout that reduces cognitive load and supports easy decision-making.
Streamlined upgrade flow with intuitive cues and consistent messaging.
Focused content presentation that highlights value without overwhelming users.
Moving forward, the next steps are to:
Enhance personalization and recommendations for each user
Introduce advanced premium features that add meaningful value
Further refine progressive disclosure to make premium benefits immediately understandable
With these improvements, Voiced can deliver a frictionless, user-friendly journey that makes upgrading feel natural, transparent, and rewarding.