With a successful homepage redesign, the team's next focus was to increase click-through rates and show potential investors the magic behind each Twigtale.
In Collaboration With:
Betina Chan-Martin - Head of Product
Christine Shimizu - Head of Marketing
Philip Starner - Lead iOS Developer
Lindsey McGrath - Head of Customer Relations
Sarah Reisert - Social Media Manager
My Contributions:
Ideation, Wireframes, Prototype, UX Research Synthesis, UI Design
Introduction
With a soft launch in 2015, Twigtale needed to find a way to set itself apart from the current market of personalized book creation. Founders Carrie Southworth and Nishad Chande started a few book titles great for personalization and managed to have a solid platform for book creation. As soon as I came onboard, I was determined to give the platform a cohesive UI that ties in the magic of making a Twigtale.
Our Head of Product and I synthesized reactions, feedback and behavior from a dedicated customer base who took part discovery meetings put together by our CEO, Bobby Benfield. After ranking the most crucial errors to accommodating some common customer asks, we designed a new flow that allowed users to jump right into the creation flow.
Along with the information architecture, user flow iterations and low fidelity wireframing, I also redesigned the UI through a solid component library as well as providing branding direction, typographic choices, and creating the digital illustrations.
Twigtale's Demographics
The ethnographic study conducted for Twigtale's Homepage also provided extensive feedback on Twigtale’s product and book builder pages. For quick reference, here are the participants again and an affinity map of their feedback:
Figure 1 - A summary of Twigtale's ethnographic study. Photos courtesy of Jessica Ruscello, Unsplash
From what the team learned during the ethnographies was that users were truly intrigued by the product but involved too many clicks and potentially distractions to getting to the book flow. Another key takeaway from the ethnographies was that users wanted to know how the book creating process actually worked. Questions like about the amount of photos and time needed, technicals specs and shipping came up while the users created their books and initial metrics gathered from Google Analytics showed that most of the drop-off happened upon the book making process - usually around the first few pages of making the book.
Companies like Wonderbly (Lost My Name) asked users as little as a name to create a book thus pushing the user one step further into buying the book. While the idea minimized the amount of clicks a user has to make before buying the product, Twigtale books ask a little more time from the user to create a magical book. Our team’s challenge was to make sure that this time led to a good experience and more importantly, a book purchase.
In terms of our users, we wanted to diversify beyond the obvious parent or household. Thanks to our Head of Customer Relations and her dedicated purchasing follow ups, we saw that users could also be non-parents. These included single/non-married individuals who were friends of parents, and older generation (e.g. grandparents) purchasing meaningful gifts for younger generation individuals (e.g. grandchildren, other children).
Figure 2 - A summary of personas...basically the same ones used for the Storybook app
Current Roadblocks
The team took the findings from the ethnographies and plotted them on the current product page to see where the possible road blocks lie.
Figure 3 - Identifying key area of friction recorded from ethnographic studies
After doing a user flow, we did notice that the user has too many clicks to finally get to creating/editing the book. One idea that really stood out in the ideation phase was finding a way for the user to edit the book while on the book detail page - potentially securing a faster way for the user to check out.
Figure 4 - Ideal product page user flow
And since Twigtale is about making a book, we thought an open faced book where users can flip through pages and make their story was a two-for-one way of educating them how our product works and giving them a real-time preview of what their book looks like.
Another user pain point we wanted to address was answering product questions such as shipping time, hard cover or soft cover options, the author or collaborative group responsible for the specific topic covered by the book. Twigtale, at this point, had over 45 different titles and surely it would be time consuming to create a product page per title. We thought that if the page was dynamic and was stacked by modules that can easily be swapped, then our development team would have less to build.
Our Challenge
With the new Product Page, the team wanted to
• Bring customers into the book making flow much quicker - still the same goal as the homepage redesign
• Educate users on the book builder and how the platform works
• Allow users to save their book for convenient purchasing instantly or at a later time
Wireframes / Prototype
In terms of wireframing, I created some high level interpretations of the book builder with some product information below the builder (See Figure A) and then picked components from each wireframe (See highlighted areas) that would be beneficial if looking at all the information in one page (See Figure B) at the same time addressing some of the roadblocks discussed earlier.
Figure 5 - Mix and matching with low-fidelity wireframes
Figure 6 - Small but mighty component library
Since a good amount of UI components were created at the Homepage stage, I felt pretty comfortable in moving straight to higher fidelity mockups. We were also quite anxious to present an iteration to Twigtale's investors and do a small run of A/B testing, so I focused on creating the entire product page first and then prioritize the finer details of the book builder.
Figure 7 - High fidelity mock ups
Figure 8 - Iterations on the Book Builder Interactions
Below is the current iteration of the book builder and the product page, which can also be found live by clicking here.
Figure 9 - Current iteration of Twigtale's Product Page
Figure 10 - Creating a book in the Book Builder
Figure 11 - Editing pages and adding photos in the Book Builder
Testing and Feedback
Upon launch, we saw a huge improvement in retention and less drop-offs on the product page
As a matter of fact, we took data up until a good pausing point like Father’s Day to capture before and after metrics of sales. The difference was staggering.
My Take Away:
A new product page allowed users to truly make their Twigtale one of a kind by providing never before editing power. We captured some of the amazing ways users created their books - from editing very little and being satisfied with little imagery on the page to fully customized sessions with completely re-written narratives with curated images to go along with it.
What we started to find was that the Twigtales were being gifted not just to kids but to adults as well. Here were a couple testimonials that we got from users making books for teens and adults.
