Redesign of Issuu's core offering
Client
Issuu
Services
UX/U.i Design
Industries
SAAS/Marketing Tech
Date
2024
Objective
Results
• Substantial increase to the utilisation of all the reader's features.
• Refactored design & code debt.
• Optimised features and a design system compliant solution.
Role: UX Designer
The Process
Issuu was initially just a flipbook company, but now it is constantly pivoting, expanding, and adapting to an ever-changing industry. At the time, it aimed to become a leading marketing technology company.
The focus on enhancing the reading experience of flipbooks had been neglected until insights from users highlighted the need to improve their content performance to maintain value.
Key Objectives
Identify
Document attributes and features of the flip book. Organise documentation for future iterations. Create & implement Design System components.
Optimise
Implement industry standard flows and patterns to existing features. Add tracking to features to monitor performance for future iterations.
Discover
Desk Research
Iteratively, conducted desk research. Analysed direct/in-direct competitors. Reviewed feature patterns and did comparisons with the existing implementation.
Facilitation & Workshops
Actions statements & Moodboard were presented to the team. To which I facillated a workshop were stakeholders created there own moodboard before hand. Board where presented and ideas discussed.
Affinity Mapping
Furthers insights were documented and clustered into an affinity map. Clustered insights were then mapped to an impact matrix to understand what was desirable, feasible and viable.
Definition & Development
Issuu’s flipbook had many variations, each with different features. These variations were inconsistent with each other, with radically different layouts and identical buttons with different patterns. Flipbook variations would multiple based on Breakpoint, flipbook type, and the pricing plan the flipbook publisher was subscribed too.
There were four primary flipbook variations: Document Home, Embed, Purchased, and App. Document Home was the flipbook on one of Issuu’s hosted pages. Embed is the flipbook variation that is embedded on a user’s website. The Purchased variation is when readers use the publications they purchased. Issuu’s leadership had decided to discontinue the Issuu app, reducing the number of variations we needed to design.
Design System
A key objective was to make the reader and its components comply with the design system. This involved incorporating new components and breakpoints into the existing product.
I designed the components in an atomic-like fashion. Atomic design is a method for building design systems where you take a modular approach component creation, thinking big but starting small.
I started with colors and text styles, then to buttons. From buttons I started to create layouts. gradually increasing complexity. Once designed, new breakpoints were created to standardize to all variations.
Impact
13%
Total increase of utilisation of all features.
16%
Increased of the usage of the Fullscreen button.
21%
Increased of the usage of the Download button.
Layout
The flows of the flip books have been enhanced. Adding new copy and design system components. All variants have been designed for all breakpoints. This allows users to read any Issuu flip book, regardless of the device.
The new flip book creates consistency by housing all features in a feature bar. Regardless of the reader variant being used, the user would know where features existed.
Add to stack
A stack is a collection of flip books available to the reader. The feature can now efficiently create new stacks and save to existing stacks.
Share
Share will provide share options based on the user's share history, reducing the amount actions they must take.