UX Research | Design | Leadership
resp_phoenixdeviceoutput.jpg

Responsive Ecommerce Redesign

Responsive E-Commerce Redesign

Delivering redesigned customer journeys and screens for a $60 million revenue business. Introducing new content-first design and project workflows to a legacy print company, and embracing those little screens before all else. (2015-2016)

 
resp_phoenixdeviceoutput.jpg
 

Background

In 2016, MOO launched its new responsive site, the design and development I lead for the business from late 2014. My role was to help my team and the marketing and brand stakeholders understand the workflows involved in responsive design. I educated and showed how these projects work, as well as coordinating the actual design processes and standards being delivered for the work. I delivered all information architecture and wayfinding / user flows for the project team. Furthermore, I lead all design for my interaction and UI designers and supported the creative photography, brand and copy team in creating the assets for the new responsive pages.

 

Examples of Pages launched live in 2016

The fully responsive Business Card Category page and responsive navigation pattern that rolled out shown below. We successfully introduced new purchase paths for customers (shopping by paper stock or business card shape/size), alongside key USPs to allow customers to more readily understand the differences between MOO's varied business card offerings. This was a key finding from our earliest user research on the team. In response to research findings, there is also a significant reduction in copy on the new pages, as well as a more image-led browsing experience. The first launched pages are viewable at:

Business Cards Category:

https://www.moo.com/uk/products/business-cards.html

Postcards:

https://www.moo.com/uk/products/postcards.html

Flyers:

https://www.moo.com/uk/products/flyers.html

 
 

Customer & Business Challenge

MOO saw an increasing number of customers accessing our site via a mobile device. No surprise there. Initially, our challenge was that our main build tool was built in Flash (and therefore unusable on Apple devices) until 2014. On top of that, our main ecommerce pages were not optimised for small viewports, and so difficult for customers accessing via mobile. Last but not least, MOO had a brand refresh in 2014, and the structure of the staid site did not reflect this new image.

 

The Approach & My Role

I played a hands-on role as design lead helping the business to understand what we would need to do, and how, to convert the site to responsive. I took a lead role in helping the Executive team buy into how we should staff and sponsor the project in the business. I found focusing on a phased, pragmatic approach won them over. I got the Creative team to make some major workflow changes, which involved developing content before page templates. This was instead of filling static templates with imagery and copy afterward, as they had been doing. We relied heavily on my researchers’ work around customer personas and mental models to understand what each type of customer would need at each stage of the journey. My designers created new, simplified interaction design and visual language to support the new brand.

We used Google Ventures’ 5-day Design Sprint process to rapidly come up with lots of responsive html prototypes for various messages we needed to convey throughout the journey. I lead most of the sessions with my senior designer. We tested prototypes on usertesting.com, to get feedback quickly to see which ideas were achieving their objectives, and which were falling flat. We did this across all the key pages in a few months, and steadily iterated towards a simpler customer journey and new information architecture to support it. Alongside all this, I helped the business team understand how to project plan for all this work, and make it successful. My team also had to help design for the internal-end users of the new CMS that would support this (being deployed at the same time as this project).

 
Working through content hierarchy for each screen in the customer path to purchase journey.

Working through content hierarchy for each screen in the customer path to purchase journey.

 
Coordinating the wider stakeholders. Figuring out what to do, and when.

Coordinating the wider stakeholders. Figuring out what to do, and when.

 
The team hard at work tackling how to message various MOO USPs or address customer problems in as succinct a form as possible. These were pulled into reusable design modules.

The team hard at work tackling how to message various MOO USPs or address customer problems in as succinct a form as possible. These were pulled into reusable design modules.

 
Running a design workshop with the full engineering team, and members of marketing and creative.

Running a design workshop with the full engineering team, and members of marketing and creative.

Sketching is a key stage in these processes. It also helps non-design team members be more invested in the work.

Sketching is a key stage in these processes. It also helps non-design team members be more invested in the work.

 
Early wireframe for the Category screen templates.

Early wireframe for the Category screen templates.

Product Screen template wireframes.

Product Screen template wireframes.

 
We used Brad Frost's Atomic Design model. Examples of the modular system of elements that could be reused across screen sizes.

We used Brad Frost's Atomic Design model. Examples of the modular system of elements that could be reused across screen sizes.

Design Philosophy

Designing for re-use and good engineering maintenance was a tenet of our approach. We used Brad Frost's system of Atomic Design to create re-usable modules of content that would scale across screen sizes, and which would enable the marketing CMS team (those who would ultimately administer the content) to more easily manage and test the pages.

We also wanted the screens to reflect MOO's updated brand more truly, and so we aimed to radically reduce copy, and communicate in a more image-led manner, using different device contexts where possible to aid understand and marketability of MOO's offering. 

All our design work and studios with the wider business were informed and guided by our work on how customers think about ordering business card, and the problems we know they have with the current site (see Mental Models case study), as well as our work identifying the key needs and messages our customers respond to (see Customer Personas case study). We also wanted to help the marketing communicate USPs they felt they were unable to in the current site structure, including those such as how easy it is to design with MOO.

 

Some of the questions we considered

  1. What makes MOO different?

  2. How do we communicate the notion of 'premium'?

  3. How might we help customers understand how easy it is to design with MOO?

  4. How might we inspire customers with possibility?

  5. How can we help customers feel professional?

  6. How might we help customers look bigger than they are?

  7. How might we communicate price effectively, for what is a premium (and comparatively expensive product, if you haven't sold the benefits to consumers)?

 
Prototypes of the product page, as the customer moves to the build process.

Prototypes of the product page, as the customer moves to the build process.

 
Part of the information architecture for the restructured site. The team used documents like this to easily reference the key points of progress through the path to purchase that could be made from each screen. 

Part of the information architecture for the restructured site. The team used documents like this to easily reference the key points of progress through the path to purchase that could be made from each screen. 

 

Outcome

All new, validated page templates, responsive navigation and wayfinding and associated assets were delivered from my team towards the end of 2015. They are currently being implemented in a phased order by the marketing team at MOO, responsible for the e-commerce journey.

 

Prototype Business Cards Category Screen.

Iterations on the Business Cards Category Screen.

Iterations on the Business Cards Category Screen.

 

What I've Learned

Of all the design projects I’ve tackled in my career, a redesign of a multi million dollar revenue ecomms site is one of the meatiest, and most challenging. I’ve really seen the culture, politics and ego of an organisation become very visible during these types of projects. I've understood the value in trying to keep everyone talking to each other and onside as we work towards a great outcome. There is a lot to be said for regularly reminding non-design stakeholders how design processes work and why they’re doing this. The focus can't be on design dogma, but on practical business objectives and benefits. I have also seen how some stakeholders can struggle with fear of the unknown, or feeling lack of personal control, and how to help address that.

 

Business Card Product Page Screen Iterations.

 

Samples of the small viewport Category template.

 

Key Team Credits

Interaction Designers: Mark Batup, Sam Charman, Jaime Robb, Gavin Johnson, Suzy Willis
Researchers: Hannah Capstick, Terri Herbert
Front End: Jak Spalding, Andrew Nartey
Graphic Design: Jack Newman, Hannah Myatt
Photography: Rob Wilson
Copy: Andrea Hubert
Year: 2015 / 2016