The Book of Everyone
ABOUT THE PROJECT
With the acquisition of The Book of Everyone, Wonderbly were looking to expand their market reach within the adult demographic. The major task at hand was to consolidate all product previews of all their customisable books, ranging from simple to complex, into one flow for all. User test groups were created to ascertain that our general product assumptions, were in fact correct. The checkout experience was optimised for specific regions and QA tools were iterated on to improve internal testing for all of Wonderbly's online catalogue.
-
Service
Product Design, UI UX
-
Client
Wonderbly
-
Dates
Jul - Oct 2022
I was primarily tasked to lead the product charge for The Book of Everyone. Before working exclusively on The Book of Everyone, there were several pain areas on mobile that needed addressing.
Initial Tasks
Before setting to work on The Book of Everyone, several product tests were conducted in known and potential pain points for mobile.
Horizontal vs vertical scrolling for single page spreads and double page spreads across landscape, square and portrait books.
A unified creation flow for low to high customisable criteria.
Editing rulesets per component type.
Optimised checkout flow.
Each task was worked on extensively to ensure that correct product decisions were being made before actively working on The Book of Everyone.
Horizontal vs Vertical Scrolling
This test was to conducted to gauge reaction time, browsing intuition, ease of use and product legibility.
Horizontal scrolling had issues with all of the measurables in different circumstances, whereas vertical scrolling proved to be the preference for landscape, square and portrait books.
The product and UX preference was vertical.
Editable Criteria
This test was to consider that all user decisions should go through a unified customisation flow.
There were 3 known creation flows that needed one definitive set of rules put in place. Through a series of tests with tabs, pills, full screen overlays, modals, individual page edits, character customisations and more we rapidly came to a conclusion that full screen overlays were the way forward.
This allows for user focus per element. Focused decision making versus additional clutter only increments the time it takes to make an informed decision.
Optimising Flow
Double page spreads in Wonderbly's horizontal product flow gave poor clarity to what it was that you were potentially purchasing. One and two page layouts in a vertical scroller proved to be highly preferential from internal tests. Improved legibility and overall flow improvements.
Critical flow progression CTA's were off screen by default, thus making the route to checkout confusing for some people who aren't UX savvy.
I re-designed the "shelves" to be sticky horizontal scrollers instead of a vertical stack of "shelves" and also placed the purchase CTA as an anchored element to the bottom of the screen as opposed to the bottom of the vertical stack.
Once these improvements had been approved by critical stakeholders within Wonderbly, I began rapid prototyping on The Book of Everyone.
I made several prototype variations for The Book of Everyone. Relevant stakeholders and myself filtered down the prototypes to our preferred choices for both horizontal and vertical layouts.
Usability Tests
User tests were conducted for customer insights into the latest designs.
Our testers had originally bought a book(s) off Wonderbly's site, specifically off a mobile device. Ages varied from 18 - 80+ and all mobile devices used in the tests were different to one another.
We were testing, ease of use, legibility, preference of vertical vs horizontal, editing speed and more.
Feedback from these user interviews would determine development direction for the Book of Everyone.
Test Scenario
We set our testers a series of tasks to complete in both the horizontal and vertical prototypes. Please note that these tasks have to be done in order if you wish to participate too.
1. Navigate through basic book setup.
2. Explore the layout. Don't edit anything at this point.
3. Change the book's dedication message and confirm.
4. Update the book's cover from yellow to blue then confirm.
5. Change the brain page image to the alternative image and confirm.
6. Find John's Happy Place, change the radio option then confirm.
7. Proceed to checkout to complete the test.
Vertical Prototype
Hover over the window and press F to fullscreen (Desktop only)
Horizontal Prototype
Hover over the window and press F to fullscreen (Desktop only)
After conducting interviews for 2 weeks, it was apparent that the vertical design was preferential.
With our product assumptions being verified, this product was now ready for development. Tech was provided with concise instructions and component designs to get this product up and running on the Wonderbly store front.
