Refactoring design debt while optimising the Issuu flipbook.
To increase feature usage by updating flows. To make it easier to iterate on the reader by refactoring design debt by defining product variants and creating new components for the design system.
Design Landscape
Substantial increase to the utilisation of all the reader's features. Refactored design debt and design system components that allows issuu to streamline future iterations.
As the UX designer in a team with one design lead/product manager and four engineers, I led workshops to deepen our understanding of the issues and brainstorm solutions. I coordinated and conducted user interviews. I analyzed the page and documented insights, which I presented to key stakeholders. I also developed prototypes, designed new design system components, and prepared comprehensive documentation for implementation.
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.
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. 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.
As existing documentation was limited, we had to map out these variations. Additionally, the goal was to make the reader and its components comply with the design system. This involved incorporating new components and breakpoints into the existing product.
Development Landscape
Map out variations of the reader. Identify and document attributes and features.
Create Design System Components: Create components and organize documentation for future iterations.
Create new flows for Reader Features and add tracking to features to monitor performance.
13%
total increase of utilisation of all features.
16%
Increased of the usage of the Fullscreen button.
The Maelstrom
As mentioned, content uploaded to issuu is turned into a flipbook. Features were updated implemented and available to readers. Feature availability varied on depending on plan a publisher on was subscribed to, where the reader was displayed, and the device that they were viewing the content on. With everything documented and defined, iterations are more tangible then before.
Closing Thoughts
4 rounds of user interviews
Refactoring design debt while optimising the Issuu flipbook.
Objective
To increase feature usage by updating flows. To make it easier to iterate on the reader by refactoring design debt by defining product variants and creating new components for the design system.
Results
Substantial increase to the utilisation of all the reader's features. Refactored design debt and design system components that allows issuu to streamline future iterations.
Role
As the UX designer in a team with one design lead/product manager and four engineers, I led workshops to deepen our understanding of the issues and brainstorm solutions. I coordinated and conducted user interviews. I analyzed the page and documented insights, which I presented to key stakeholders. I also developed prototypes, designed new design system components, and prepared comprehensive documentation for implementation.
Before
After
Key Objectives
Map out variations of the reader. Identify and document attributes and features.
Create Design System Components: Create components and organize documentation for future iterations.
Create new flows for Reader Features and add tracking to features to monitor performance.
Solution 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.
A Flowchart for Context.
Process
6 iterations
4 rounds of user interviews
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.
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. 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.
As existing documentation was limited, we had to map out these variations. Additionally, the goal was to make the reader and its components comply with the design system. This involved incorporating new components and breakpoints into the existing product.
Development
The Implementation process was split into two phases. Phase one was the “visual uplift,” updating the reader with design system-compliant components I designed and iterated upon with my team and the design department. Phase two was an uplift of the features.
When designing the reader in phase one, the goal was to create a consistent and cohesive experience. Regardless of the reader variant being used, the user would know where features existed. This was done by housing all features in a feature bar.
I designed the components using an Atomic approach. Atomic design is a method for building design systems. I started with the most minor components and built upon them, gradually increasing complexity. Once designed, new breakpoints were created to standardize all variations.
During phase one, we conducted usability tests to gather feedback. I worked with the customer success team to perform seven tests with Issuu’s elite users. The objective was to verify that the readers could understand the icons and identify the most valuable features.
In both phases, we used third-party usability tests to collect feedback, completing forty tests in total. Insights gathered were synthesized into action statements and incorporated into the design.
Solution
As mentioned, content uploaded to issuu is turned into a flipbook. Features were updated implemented and available to readers. Feature availability varied on depending on plan a publisher on was subscribed to, where the reader was displayed, and the device that they were viewing the content on. With everything documented and defined, iterations are more tangible then before.