UX Research | Design | Leadership
resp_MOO_Eco_system.jpg

Ecommerce Design Direction

E-Commerce Design Direction

Expertise in implementing design changes based on research, best practice and psychology principles to improve customer conversion. (2013 - 2016)

 
 

Background

Throughout my time at MOO, I oversaw many ecommerce-related design improvements, implemented by my team and their development teammates. Amongst others, these included:

  • the extensive site redesign to responsive in 2015 / 2016
  • day-to-day changes such as a new checkout
  • new account area designs
  • ongoing navigation and wayfinding tweaks and corrections to lift conversion
  • Most notably launching new products, with different information design needs. Among these, MOO’s Business Cards+ (digital business cards with NFC technology built-in), and the launch of the industry-first for an online printer completely customisable gold foil cards.
 
We introduced the ability for customers to more easily compare product features and sizes in one place, and proceed directly to building their product. This helped improve conversion on our Flyers offering. 

We introduced the ability for customers to more easily compare product features and sizes in one place, and proceed directly to building their product. This helped improve conversion on our Flyers offering. 

 

Evolving Designs through User Feedback

A quick sample of how the screens for the new Tailored product (embossed or foil printed business cards) evolved to the live version on the right. Challenges here included how to help customers understand the tactile qualities of the card we needed to market, as well as the fact they have different design processes. On launch, we got customer reviews such as the following, from the design studio Shape. (You can visit their site to read a full review of the process.) 

The User Experience is fantastic. The site caters for the computer novice as well as the industry professional. giving users the option to design online via templates, or upload their own artwork is very flexible and offer the customer exactly what they need.

 

The final design launched to customers.

 

Helping Customers better understand MOO's Flagship Product

Customers had trouble grasping the fact the MOO's 'Luxe' cards were much thicker than regular business cards, with a seam of colour running through the middle of the card. Here are two screens we arrived at after a lot of user testing to demonstrate these qualities in a straightforward way. On the left, is how the product page looked on screens with greater real estate, with the right image, showing the flow on tablet displays. You can click on each to see it in more details.

The approach was to highlight the USPs with imagery, not reams of text, and use animation and comparisons to allow each USP to breathe and be communicated clearly. The second panel of the page showed an animation of how Luxe paper comprised different layers pushed together, the third panel that there were several colour seams to choose from, and the fourth panel quickly illustrated the thickness of the cards, by comparing them to everyday objects, like a cookie. We took this approach in many of our designs, as customers enthusiastically responded to images that helped them make real judgements around product scale in context.

 
 

Sample screens from mobile experience

For the initial mobile launches, we aimed to keep the experience light and simple, with trademark colourful imagery. Significantly reduced text made the offering far easier for customers to scan, and take the conversion action the business required.

 
 

Exploring how to help customers choose the product they want, quickly

During my time on the team, we provided design alternatives for many A/B tests to help iterate on the best combination on imagery and phrases to help customers to convert by getting going with the product in the size and shape they were looking for.

Prototyping the ability for customers to more easily distinguish between the different thickness of the card stock MOO offered, and help them get building the right product faster.

MOO offered two slightly different sizes of business cards in the US market (the standard US size, and what was called MOO Size, which was really European card size). When this new size was introduced to the US, we tested many combinations of wording, illustration and photography to help customers understand what they were ordering. Different wording such as 'Design your own' had a significant impact on conversion (versus, say, another alternative we used 'Start from Scratch', which was less appealing).

 

Key Team Credits

Interaction Designers: Mark Batup, Sam Charman, Jaime Robb
Year: 2013 - 2016