01 Shortform
Reimagining the experience of Shortform through a cleaner, unified, and more appealing design
Branding
UX/UI
Mobile App
The context
Shortform is a summary app of books, articles and podcasts designed for deep analytical learning and it positions its content as comprehensive study guides.
It is available on web, tablet, and mobile platforms. I conducted a heuristic evaluation to identify key areas for improvement.
The branding
A look at Shortform’s main competitors reveals a shared design trend: vibrant colors, high contrast, and clean minimalism. Shortform’s core brand color is a bright yellow, directly inspired by the highlighter pen used while reading.
While yellow is iconic, highlighters also come in blue, green, and pink. Building on this idea, I added a second primary color to the palette. This update keeps the highlighter metaphor while giving the brand a fresher, more enticing feel that encourages creativity and curiosity.
The design
1 A simplified navigation
BEFORE
The navigation bar at the bottom is crowed
The category menu takes up nearly half the screen, shifting focus away from the actual content.
NOW
The bottom navigation bar has been decluttered for better clarity. Users can now filter by content type (books, articles, podcasts) directly on the Discover page.
2 A minimalist layout
BEFORE
Screen space could be optimized by reducing repetitive book titles and moving secondary actions (like "Save to Library") into the content detail page
NOW
The visual interface is simplified to mirror a physical library experience—users can browse book covers naturally and tap any title to view key information.
3 Saving state recognition
BEFORE
"Favorites" and "wants to read later" have the same icon
"Wants to read later" can't be found in the library
NOW
A distinct icon for "Favorites" and "wants to read later"
Both sections can now be found in the library
4 A simplified Search
BEFORE
In each page by content, the category menu takes up nearly half the screen, shifting focus away from the actual content.
NOW
A centralized Search tab allows users to quickly find content by title, author, or category.
Key learnings
Mobile first approach
Designing for smaller screens first forces clarity and prioritization. It establishes a strong foundation that easily adapts and scales across tablet and web formats.
Educational Doesn't Mean Boring
Designing for learning or study apps doesn't require a dry, plain interface. Bold branding and vibrant visual choices can actually stimulate curiosity and keep users engaged.
Next steps
User testing & validation
Conduct a one-week usability testing sprint with target users to gather feedback, validate the new navigation, and refine the interface before scaling the design system.
Iterate & Scale
Use qualitative insights from the testing phase to make final UX adjustments before expanding the design across tablet and web layouts.
