E-Commerce Design Direction
Expertise in implementing design changes based on research, best practice and psychology principles to improve customer conversion. (2013 - 2016)
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.
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.
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.
Key Team Credits
Interaction Designers: Mark Batup, Sam Charman, Jaime Robb
Year: 2013 - 2016