Optimizing the 2 build flows on details page


MOO customers use the e-commerce website to create unique designs for their businesses. They can browse the design templates, or use the DYO (Design Your Own) or FU (Full Upload) flows.

The DYO and FU build flows allow customers to either start designing with a blank template or upload a full design they have created without the tools from MOO.

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.




June 2017 - Aug 2017


Published -  Sept 2017

My Role

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 new design was launched globally September 2017.


The Challenge

Make it easy for customers to discover the 2 build flows

Make sure they have a clear understanding what’s being offered by the 2 flows

Reduce the bounce rate and increase the revenue generated by those flows

The template browse page before we optimised the 2 build flows. Most customers were focusing on the first tile and completely missing the section under the banner with the other build flow and the guidelines on how to upload their designs.

Design Approach

I partnered with my Product Manager to uncover Quantitative Data of the usage and the generated revenue of the 2 flows so that we can have a baseline of the landscape before we proceed to a new design and also to get a better understanding of the customer behavior based on numbers.

We used Google Analytics and Tableau to extract the click through rate of the 2 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

Deep dive in the numbers :

Insights from Customer Research

I partnered with one 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 point in regarding the 2 flows and identify any opportunities to increase the AOV (Average Order Value) and reduce the bounce rate.

We tested with 20 participants with UT.com, 10 from US and 10 from UK and we split the test to 50% MOO customer and 50% non MOO customer.

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:

  1. Make it easy for customers to discover the 2 build flows
  2. Make sure they have a clear understanding what’s being offered by the 2 flows
  3. Reduce the bounce rate and increase the  revenue generated by those flows

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 Solutions

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.

Also for this project, I partnered with a UX copy writer to make sure that the copy and micro - copy would resonate with the MOO tone of Voice and mental model of the users. Often times I write the UX copy and micro-copy myself and I do that by using a Copy Doc so that I 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 and not focusing on strong visual cues.

Solution 1 - splitting the first tile with the 2 build flows

Solution 1 - design explorations

This initial idea was to have them as two separate tiles but occupy the same real estate. Not enough space for copy
Second iteration, use of the same real estate but use visual seperations. Enable the copy to stand out

Solution 2 - Explicit 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 - one tile for each build flow

Solution 2 - design explorations

This initial idea was to have them as separate tiles but on the bottom of the page. Problem was that they would be hidden
Second iteration, 2 tiles on top but copy needed more tweaking as it was old and past research suggested that it wasn’t fully understood

De - risking our solutions

Validating our ideas was the most important part of the process. The biggest challenge I faced in this project was the concept phase.

Balancing moving forward with designs and managing the feedback from Product Marketing which had strong feelings about one concept and from Product Management who had strong feeling about the other 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.

Main challenge

Managing feedback from both parties was challenging and felt like a swinging pendulum of viewpoints.

From ambiguous to obvious

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: