NUX: A Streaming Platform for Curious Minds
My Role
Solo UX designer
Type of Project
End-to-end UX design
UX Research · Information Architecture
Wireframing · Prototyping
Tools
Figma · Optimal Workshop · Maze
Duration
1 month
December 2024
Design a theme-based streaming experience for a learner on the go
NUX is a mobile platform built around the idea that content should be organized by narrative themes, not just formats or genres. My work covered the full process: from user research and information architecture, through wireframes and grid systems, all the way to a tested high-fidelity prototype.
THE PERSONA
Designing for Rekha's 45 minutes
Rekha Marr is a 34-year-old UX Specialist and new mother. Her only guaranteed personal time is a 45-minute train commute. She wants to learn something real in that window, not scroll aimlessly, not commit to something long. She wants high-quality, theme-based content she can actually finish, with the option to save anything that sparks deeper curiosity for later.
Every design decision had one test: would this help Rekha make good use of 45 minutes?
RESEARCH
What Do Users Actually Group Together?
I ran an open card sort with participants to understand how people naturally organize 20 pieces of content, ranging from Machine Learning Basics and Sapiens to Dune, Squid Game, and Street Photography.
Three clear patterns came out of it:
1- Entertainment by mood, not format. Even though Call of Duty is a game and Squid Game is a TV series, 71% of participants grouped them together. Dune, LOTR, and Godzilla also clustered with 57% agreement. People weren't thinking in media formats, they were thinking in vibes.
2-Cooking belongs with creativity. I expected it to land in lifestyle. 86% put Street Photography with Graphic Design, and 57% also pulled Cooking into that same group. Users saw it as a creative skill. So did I, from that point on.
3-Science-based content clusters regardless of format. Sapiens, AI & the Future of Work, and Machine Learninggrouped together with 43% agreement, not because of what they were, but because of how they felt: factual, knowledge-based, worth paying attention to.
Entertainment
71%
Mood over format
Call of Duty and Squid Game grouped
together, different media, same energy.
Dune, LOTR & Godzilla followed
with 57% agreement.
Creativity & Art
86%
Cooking belongs with creativity
86% grouped Street Photography with
Graphic Design. 57% also pulled Cooking
in, users saw it as a creative skill,
not a lifestyle one.
Science & Technology
43%
Knowledge clusters by feel
Sapiens, AI & the Future of Work, and
Machine Learning grouped together
not by format, but because they felt
factual and worth paying attention to.
The card sort gave me my thematic backbone, six categories that came directly from how real people grouped the content: Science & Technology, Society & Culture, Creativity & Art, Entertainment, Mind & Life, and Historical Stories. These became the foundation of my first site map.
Testing
Where the First Version Broke
Once I had a first site map, I ran tree testing through TreeJack to see where users actually got lost.
Three problems surfaced fast:
1. Topics and Library looked the same. More than half of participants (4 out of 7) clicked Library when asked to find a specific topic. Both sections just felt like "places that hold content." There was no clear difference. I restructured the navigation: Explore became the space for discovery, and Dashboard became the personal progress space, saved items, history, achievements, in-progress content.
2. The labels weren't working. Keep Watching, Your Daily Recommendation, and Because You Watched all caused consistent task failures. Participants knew what they wanted to do, they just couldn't find the right words on screen. I replaced them with: Continue Watching, Personalized for You, and More Like This. Small changes, real difference.
3. Amazon Rainforest was in the wrong place. Users expected it under Science & Technology, not Society & Culture. Several participants failed the task entirely trying to find it. I moved it.
Wireframing
Designing the Screens
With the architecture settled, I moved into wireframes in Figma, using an iPhone 11 Pro frame (375 × 812px). I designed the full onboarding flow — landing page, login, profile creation, membership selection, and preference setup — along with the personalized home, the explore catalogue, a content details page, and the streaming viewer.
For the grid systems, I matched each layout to its purpose:
A multicolumn grid (8 columns, 16px gutters) for the landing and home pages, where users need to scan multiple content rows quickly.
A hierarchical grid for the video playing page, giving the video dominance while keeping related suggestions accessible.
A modular grid (4×4, 24px gutters) for catalogue browsing, where items should feel evenly weighted and easy to compare.
1.0 General Landing Page Explains what NUX is and how content is organized by themes. This page allows browsing without an account while clearly showing where to log in or start sign-up.
1.1 Login Page Provides fast access for returning users with a simple, familiar form. Password recovery is easy to find, and a separate “Get Started” option directs new users to account creation without disrupting login.
3.1 Initial Personalized Landing This screen welcomes users and shows content based on their selected themes. It helps users quickly discover relevant content and continue exploring without effort.
3.2 Landing After Streaming This screen appears after a user finishes content. It confirms completion and offers clear options to save or rate the item, continue with similar content, or explore a different theme.
3.3 Catalogue Entry Details This screen provides detailed information about a selected item. Users can watch a trailer, review key details and ratings, and browse similar content before deciding what to watch next.
4.0 Streaming Viewing Page This page shows the in-stream video player with essential playback controls.
Refining with Real Feedback
After the first round of prototyping, I gathered click map and heat map data. The patterns told a clear story:
Sign-in option on Create Profile
On the Create Profile page, users were clicking the logo or the back button instead of the "Already have an account? Sign in" link — because it blended in visually. I increased contrast and made the typography bolder to give it the weight it needed.
Membership plan selection
On Membership Selection, heat maps showed attention scattered between the plan cards and the Proceed to Paymentbutton. Users weren't sure if clicking a plan was the confirmation, or if the button was. I simplified the interaction to a single selection action — click the plan, proceed. No ambiguity.
Preferences & interests selection
On the Preferences & Interests screen, too many similarly-labeled groups slowed people down. I reduced the categories and sharpened each label to a single, clear meaning.
The Final Design
The finished prototype reflects a dark interface built for real-life conditions, commuting, dim lighting, quick decisions. A red accent drives every primary action. Roboto handles the typography across all weights. The layout follows an 8×8 modular grid with 24px margins, and interactive elements follow Material UI sizing so touch targets always feel right.
What I Learned
This project taught me that information architecture problems look like navigation problems until you look closer. The confusion between Topics and Library wasn't about labels, it was about the sections not having distinct purposes. Once I separated discovery from personal progress, the navigation started making sense.
I also learned that personas only work if they stay active throughout the process. Every time I made a decision, asking would this help Rekha in 45 minutes? kept the work grounded in something real, not just theoretically user-centered.
Let’s work together
Feel free to reach out for projects, ideas, or conversations.
© 2026 Mehr Ekhlaspour
UX Designer & Researcher — Montréal