Objective
Visually uplift the U.i of the Issuu’s core product. Refactor design and code debt to make future iterations more manageable. Define product variants, integrate design system and optimise flows.
Results
• Substantial increase to the utilisation of all the reader's features.
• Refactored design & code debt.
• Optimised features and a design system compliant solution.
Discovery
Understanding
the Problem
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
Identify and document attributes and features of the flip book. Organise documentation for future iterations. Create & implement Design System components.
Optimise
Create and implement industry standard flows and patterns to existing features. Add tracking to features to monitor performance for future iterations.
Competitor
Analysis
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.
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
Feature Map
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.
Delivery
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 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.
Additionally, All variants have been designed for all breakpoints. This allows users to read any Issuu flip book, regardless of the device.
Better, Faster, Stronger
The flows of the flip books have been enhanced. Adding new copy and design system components.
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.