Case Study.

The Candy Orchard.

The Company.

The Candy Orchard creates and supplies 'sweet tree' gifts to businesses and individual clients, with a focus on their local area of Cambridge. A key feature of their product is the significant degree of customization that they offer, as the shape, size and colour of the pots and ribbons used can be personalised, along with the sweets that are used.

The company's existing website was inconsistent with its other visual branding, contained no online ordering system, and was unviewable on most devices. Therefore, most orders were received through Facebook, often requiring multiple messages to confirm customisation requirements.

The Challenge.

My task was to redesign the website to be responsive and consistent with the company's brand, and to design an online ordering system that allowed simple and easy customisation of the product. There were also several additional restrictions on the design process, including a short time scale and the availability of only low resolution images of the product.

The Tools.

Pen and paper sketches, a voice recorder, Adobe Illustrator, Adobe Photoshop, Sketch 3.0, Balsamiq, Axure.

Research

The majority of the company's customers are women, aged 30-65, with disposable income, buying for other women, for children, or for special occasions such as weddings. Due to the required speed of the project, I tested with a much smaller number of users - members of the target demographic, selected via opportunistic sampling. Therefore, I relied more heavily on discussion and observation rather than quantitative measures.

User Journey: Participant uses existing website

Discoveries

Most participants displayed a preference for casually browsing the site on their phone rather than a computer, making its lack of responsivity a clear problem that caused several users to abandon the site entirely.

In addition to this, several users lost patience with the thumbnail gallery, which required them to individually open and close each image. Some confusion was also evident in the correspondence of option choices with prices, which were listed on a separate page. When observed placing an order, users also frequently forgot to specify choices for at least one of the required options, which would have necessitated additional messages and waiting time for the company to clarify.

While almost all users were familiar with what the product would look like in its most common 'round' form, many were not aware of other, less common shapes, and were therefore unsure of what shape options were avilable or what they would look like.

"I'm so busy planning my wedding, I don't want to be chasing replies - I just want something quick and simple"

Solutions

A step-by-step online ordering system that clearly and simply presented each option for selection, and depicted what each choice would look like and how much it would cost, was therefore a clear priority. As well as improving the responsivity of the site, the gallery also required additional browsing functionality and the inclusion of a greater variety of options. The look and feel of the site also needed to be brought in line with the rest of the company's visual branding and the tone of their Facebook messages.

Storyboard: A mock-up of an ideal ordering scenario

Key Issues

I used personas, user observation and specific feedback to construct an ideal user scenario and identify the site's most salient issues.

  • Overhaul website to be fully responsive

  • Improve the browsing functionality of the gallery, possibly with a carousel format

  • Improve the consistency of visual branding, with a UI that matches the company's visual look and tone of communication elsewhere online

  • Structure site around patterns of user need, such as including prices in the same place as options

  • A step-by-step, self-contained order process that does not require cross-referencing with other pages of the site

  • Clear delivery and deposit information

  • Options for Paypal/card payment

  • Auto confirm of online orders

Site map of previous site and new site

Structure & Information Architecture

Since most users exhibited a clear preference for 'casual' browsing, I re-structured the site around a modular system that would be easy to use on a mobile device. The main focus of the site structure revolved around the construction of the step-by-step ordering system that would be simple and easy to follow, but would not contain an endless number of steps. I used hand-sketched cards for user tests, and settled on six steps, including delivery and payment. While this was considered to be rather long, the amalgamation of any of these steps appeared to result in more instances of skipped selections, resulting in frustration and additional user steps.

I also rearranged the rest of the site's content to more closely match the patterns the majority of users displayed when navigating the site, such as combining the 'Prices' page with the 'Options' page, to display prices at the same point at which users could choose options, resulting in less need for cross-referencing.

"I'm on a website - I shouldn't need a pencil and paper to organise an order, should I?"

Order process prototypes

Prototype

Due to the timescale of the project, I tested only very rough hand-sketched wireframes, before constructing the first prototype. While my initial preference was to showcase the products with minimalist full-screen images, the availability of only small, low-resolution photographs made an alternative, more graphical design necessary. I also came to prefer this approach as, in fact, a more colourful, flat and 'fun' interface fitted much more seamlessly with the company's existing visual branding, particularly the company name graphic.

I created a 'sweet tree' graphic and a simple, flat representation of hills and sky to match this colour scheme, and used a number of small animations, such as the trees 'popping up' one by one on page load, to continue the light-hearted, fun and friendly tone that the company used in their copy and Facebook interactions. Additionally, an easily-browsable carousel gallery allowed the product to be showcased without requiring professional photography.

"I love that it doesn't force me to memorise anything"

Results & Reflections

Several small simplifying changes were made to the prototype design on collaboration with developers, since it was code-heavy and required a large number of media queries.

Final user tests required users to navigate prototypes to make an order. The change made to the location of prices tested particularly positively, resulting in more frequent order completions and fewer detours within the site. This change, in addition to the step-by-step order system, which walked the user through the order process and removed much of the cognitive load, led to much lower measures of frustration, and a higher perception of the company's professionalism and helpfulness.