MOO customers use the e-commerce website to create unique designs for their businesses. They can browse the design templates, use the DYO (Design Your Own) or FU (Full Upload) flows.
Due to the fact that the old page was not mobile responsive and used the old CMS, a redesign in the Template Browse page was necessary. After the redesign there was a significant drop of customers who were choosing the FU flow (higher AOV), resulting in high bounce rates and loss in revenue.
UI/UX, RESEARCH, UX STRATEGY
MOO Print Ltd
June 2017 - July 2017
Aug 2017
As the Product Designer of the TnT Crew (Templates and Tools) who owns the Template Browse experience at MOO, I led the redesign of the DYO & FU build flow experience.
In addition, I worked alongside a Researcher, a Product Manager and a UX Copy Writer.
The full launch has been released globally in September 2017.
https://www.moo.com/uk/templates/postcards
Identifying the problem from data
From our Tableau and Google Analytics we were seeing high bounce rates and loss in revenue MoM coming from these two flows in the Template Browse page. I paired with my Product Manager to understand the landscape based on numbers.
I looked at the click through rate of the two flows, the revenue they generated for the past 3 months and the customer details e.g new vs returning user, product type of purchase and build flow type. A quick deep dive:
Empathizing with customers
I partnered with a UX Researcher to plan a customer research activity. Our goal was to get a better understanding of the mental model of the users, to uncover any pain points regarding the two flows and identify any opportunities to increase the AOV (Average Order Value) and reduce the bounce rate.
We tested with 20 participants using usertesting.com. We had 10 users from the US and 10 from the UK and we split the test between 50% existing MOO customers and 50% non MOO customers.
A few quotes from the participants
Formulating Hypothesis
After the Research phase was over I started formulating Hypothesis on how might we improve the build flows so that we can:
Main Hypothesis
We believe that
By placing the 2 flows close to each other and utilizing the UX Copy, we can improve the discoverability, the comprehension of what is being offered and increase the revenue from the FU and DYO.
Exploring multiple solutions
Sketching ideas
I began exploring high level ideas on paper and then mocking them up in more detail using Sketch. As a general practice I always start with pen and paper and work my way through to higher fidelity mockups.
Working on the UX Copy
While sketching the ideas I partnered with a UX copy writer from very early on to make sure that the copy and micro - copy would resonate with the MOO tone of Voice and mental model of the users. I used a Copy Doc so that we don't get lost in wireframes and design files and also keep track of all the changes.
Working with the copy writer, we kept all the iterations in one place which proved to be very convenient whenever we needed to update the design files with the final copy. It also made it easy for others stakeholders to comment on the copy as well.
Solution 1 - Have a split tile
Using the Gestalt Principle of Grouping, I split the first tile in 2 options, one for the DYO and the other for the FU flow.
Trade-off: Keeping the screen real estate the same using one tile and showing more templates in the first row but not focusing on strong visual cues.
Solution 1 - design iterations
This initial idea was to have them as two separate tiles and occupy the same real estate. The challenge there was that there was not enough space for the copy and we struggled a lot a find good UX copy that was comprehensive.
For the second iteration, I used the same real estate of the tile but instead I added visual cues to separate the two flows. This way I was able to make the copy to stand out and have more space.
Solution 2 - Separate build flow tiles
To make the 2 options more prominent, I used one tile for each build flow but kept them close to each other and utilized the strength of a good UX Copy to explain better what is being offered.
Trade-off: Exposing 2 tiles for the build flows with visual cues and more room for copy but sacrificing one template in the first row.
Solution 2 - design iterations
This initial idea was to have the two flows as separate tiles but on the bottom of the page as we used lazy loading for more templates so that they don't take too much of the real estate. The trade-off was that they would be hidden further down instead of being in a visible area.
For the second iteration, the two flows were placed on top the top of the templates. We did some changes in the copy as some guerrilla testing we did internally indicated that the old one wasn't really understood.
De - risking our solutions
The biggest challenge I faced in this project was managing the feedback from Product Marketing which had strong feelings about one concept and from Product Management who had strong feeling about the other. I felt like a swinging pendulum of viewpoints.
Having 2 competing concepts I managed to get the buy-in from both parties to extend the deadline for an extra week and test both ideas. I tested the 2 Concepts with 12 users, 50% from UK and 50% from US using UT.com and split the two segments in new and existing MOO customers.
The results were almost identical. All users understood what is being offered to them and what would the next steps be in the flow.
The key differentiating factor was discoverability. The first concept with the split tile was overlooked by some users because of its subtle UI characteristics. Some users would scroll up and down searching for the 2 options.
Measuring the overall impact
In the first few days the 2 new tiles had exceeded our expectations. Since the launch of this design (September 2017), the total number of customers who use the FU flow has increased from 16.3% to 46.7% (last monitored November 2017).
What we saw very early on was that:
