The MOO Design Spike

At MOO we're starting to re-imagine our site in a responsive way. This has been a long time coming and it’s been a struggle to get everyone moving in the same direction. The purpose of the design spike was to kick start thinking about what a responsive MOO website could look and feel like. With a couple of weeks preparation for research and getting our heads around the problem in the ExD team (Experience Design at MOO), we were able to get a great front end prototype. Built in 5 days, starting from sketches all the way to HTML & CSS, it was a great week and showcased what can be done in a week.

So what am I talking about. Phoenix. Design spike. Well, Phoenix is the not so top secret mission (at MOO at least) to imagine a better moo.com, to have a site that we are all proud of, a responsive e-commerce site that outperforms our current site and showcases our new brand.

Phase 1 of this ends at the end of May this year with a presentation to the Executive committee and focusses on certain areas of the site for a particular user and task. The list below shows the scope of Phoenix right now (include the word ‘responsive’ in front of each point):

  1. Header & Footer (Navigation)
  2. Homepage
  3. Product Category Page
  4. Business Card Product Page
  5. Design Template Browse
  6. Sign-in

Our user’s task is to convert. In the context of Phoenix this means 3 possible routes, buying business cards, signing up to the MOOsLETTER and ordering a sample pack.

To achieve this we have some incredible insight from the researchers in ExD. First and foremost, the Mental Model, this is a mammoth undertaking that gives us a picture of the different thought processes that occur when a user embarks on a journey with MOO. This helps us surface relevant content to them at the right time rather than everything at once or too little information.

For Example: Our users are comparing online printers, they take into account numerous factors, price, availability, quality etc… identifying where these factors come into the user’s journey makes the job of surfacing our USPs in a more effective position a lot easier, this should increase the chance of conversion.

So what has that got to do with a design spike? In ExD we’re trying to shift the focus from pages to content. We want to help the user achieve their goal in a delightful but efficient way, focussing on the core messages and content helps us achieve that. We wanted to see how our amazing technology and creative departments could work together to create more engaging content.

In preparation for the spike, we had done a lot of other research into key content, user needs, business needs and how they should all fit together, allowing us to focus on the aesthetics of that content rather than just journeys and wireframes.

A content audit made us check every image, title, paragraph of copy, link, table and button in order to establish patterns in our layouts, flows and functionality. We can see from the audit where we are ahead of our competitors and where we are behind, we can also tell what we are making the user do when they come to MOO. We want to rephrase that last point in the near future into a question like; how can we help the user create great products when they come to MOO?

A sample of the pages looked at for the design spike

To consolidate our findings from the content audit we put together a short competitor audit of five of our rivals; Vistaprint, Solopress, Instantprint, Printed.com and Good Print. The key takeaway and overriding feeling after studying the lay of the land was that we have incredible creative and art direction and products compared to our competitors. We also have some incredible USPs like Printfinity and the MOO Promise. All the ingredients are there, we need to communicate these factors more effectively, use our tech wisdom with creative to deliver informative, delightful experiences.

Our mobile offering (with some of our square business cards for context)

Furthermore, the design spike included a brief ‘Responsive 101’ deck that was created to explore the ‘why’ of responsive design just incase there were any lingering doubts as to the need for MOO going responsive. As it turns out we were preaching to the choir. However, the main reason to include this was to get us all away from thinking about pages and think about content first and mobile first principles, get into the habit of strategising where and when users will see the content and focussing on the core task at hand.

Each of these chunks of research was designed to prepare creative (and ourselves) to move quickly, understand the problem, then execute effectively in the time allowed. i.e. sketching, wireframing, building etc. There was also a Rough content hierarchy that maps the user and business needs to content to see if the page is communicating the content coherently.

A very high level affinity diagram or content hierarchy with business and user needs placed next to the corresponding content

So to the spike… Here’s a rough outline of the agenda and the events from the week.

Day 1:

  • Responsive 101
  • Run through the content audit
  • Discussion around the competitor audit
  • Discussion on UI trends
  • Discussion on content modules raised content hierarchy
  • Sketch, Pitch, Critique — Question 1, “How might we help customers understand we offer primary and secondary product lines (BCs and all other stationery).”
  • Question 2, “How might we help our customers understand the MOOsLETTER & sample pack offerings?”

Day 2:

  • Question 3, “How might we help our customers understand our design template offerings? (Printfinity, MOO design generally).”
  • Question 4, “How might we help our customers understand, compare and contrast the features of our Business Cards (including paper types, corners, Luxe) and why they're better than the competition?”
  • Review sketches as a group.
  • Presentation of findings and sketches to stakeholders as a group.

Day 3:

  • Half the group to sketch a fifth question, “How might we help our customers understand the build process/creation process on moo.com (ease of use, Pixel etc)?”
  • ExD members to review sketches so far and propose a rough content hierarchy from identified themes.
  • Define user and business needs.
  • Review of fifth question sketches.
  • Brief Creative members on chosen content hierarchy and develop a plan for creating assets and getting them into a prototype.
  • Brief the front-end developers taking part on the proposed route and scope out what we can build in time.
  • Dev to start building a rough skeleton and page structure in HTML and CSS.

Day 4:

  • ExD to create a higher fidelity wireframe for dev to scope the functionality and for greater creative direction.
  • ExD to produce assets for dev and to then support both Creative and dev, build up continual feedback loops.
  • Photoshop mock-up produced for backup if there were to be any major technical difficulties.

Day 5:

  • Whole team involved in developing and supporting the build of the prototype.
  • Creative briefed on a homepage image to better demonstrate the journey of the user into our chosen product category page.
Day one sketches
The first two questions, sketches all grouped and annotated for review
Day two sketches for questions three and four

So, from these five days we managed to make something pretty cool, that addressed all the user needs we discovered on day three:

  1. Why MOO — What products does MOO sell?
  2. What is the quality like?
  3. What makes MOO different?
  4. Understand how I can use MOO products.
A frame from our card explorer hero section
The card comparison shot, see how all our cards fit together now?
Shot used for the sample pack module

As I may have mentioned earlier, the output from the design spike was incredible. we managed to get so much done in such a short space of time and we're very excited to see how we can build on these foundations to a larger system and to our full set of use cases and mental modes.

A selection of quotes from the Friday afternoon post show & tell:

“You blew it out of the water these last five days!”

“Thanks so much guys — it was truly a team effort! We had such a good time… It was like being on The Apprentice.”

“Wonderful to see what we can accomplish when given time and a goal.”

“Seriously impressed by the whole creative journey! …totally inspired.”

From ExD’s point of view it was incredible to see all the hard work and prep pay off with such a collaborative approach to defined problem. We were amazed and truly proud of what could be achieved in 5 days, sketched in 2 days, defined in another and then designed and built in 2 more. It’s a great start to Phoenix.

So here it is, well part of it… the page only works on our internal network but I hope the GIF goes someway to helping you see why we're so happy with the weeks work. (Accelerometer powered on the prototype).

Our design mocked up for the Nexus 5, works just as well on any phone we tested on Friday afternoon
Our four user needs mapped onto the desktop version of our product page
A huge GIF of our PVC — this is driven by the accelerometer on all mobile devices and mice on desktop
Show your support

Clapping shows how much you appreciated Sam Charman’s story.