Sweetpea Responsive E-Commerce Store

This project was developed for Sweetpea, a London-based Florist located in Hampstead. The responsive e-commerce store is to help users quickly and efficiently place orders for delivery at any given time or location and on a variety of devices. I collaborated in a team composed of a full-stack developer and graphic designer.

  • Client: Sweetpea Company
  • Roles: Project Lead, UX/UI Designer, UX Researcher, Prototyping & Usability Testing
  • Toolkits: Sketch, Marvel, Illustrator, Photoshop
  • Duration: 8 Weeks

PROBLEM

“How to replicate the attentive florist experience online?”


PROCESS

Process timeline

Image: Process Timeline

— Process 1 of 5 —

Empathise

USER RESEARCH

It was integral to develop a thorough understanding of our user’s thoughts, goal and motivations; enabling us to create a store that met their needs & requirements. We began by producing a research plan outlining goals, target audience, methodology and schedule.

The goal of the research was to answer the following questions:

  1. Where do users currently order bouquets online?
  2. How do users select their online florists?
  3. Identify the reasons why consumers decide to use a particular online florist?
  4. What are the needs and pain points when using online florists?

User Survey

To assess the accuracy of assumptions held about our users we circulated a survey to existing customers. The results disproved our assumptions, exhibiting the user’s preference to order bouquets online (62.3%). A pattern emerged uncovering the dominant aspects effecting the user's choice of florists to be as follows:

  • Price (24.5%)
  • Free Delivery (20.1%)
  • Positive Product Reviews (18.5%)
Survey Results

Image: Survey Results

User Interviews

We wanted to gain a better understanding of the reasons behind our user’s choices and identify what an ideal experience would look like from their point of view. The interviews verified the survey findings but also delved deeper into the pain points users were facing with current online services. To highlight our findings and plan the next stage of our research we compiled an in-depth research report.


Heuristic Analysis

Armed with a list of pain points we set out to discover if current services had developed solutions for any of the concerns raised, was there a gap in the market for a service tackling all pain points? We compiled a report using the Nielsen Norman Group’s 10 heuristic principles. Choosing to focus on these specific websites as they were repeatedly mentioned during interviews. We set out to answer the following questions:

  1. Did product page images have a clear and simple zoom facility?
  2. Was stem count clearly mentioned in the product descriptions?
  3. Are customer reviews easily accessible on individual product pages?
Heuristic Analysis

Image: Heuristic Analysis

Clearly a pattern emerged revealing a gap in the market for a service that tackled all pain points simultaneously. We could provide this by ensuring the delivery of the following:

  • Clearly illustrated bouquets in a variety of sizes with a zoom facility.
  • Detailed product descriptions that list the bouquet contents with images of each flower next to its name and amount.
  • Product pages containing delivery, allergy and quality & freshness information.
  • Customer reviews on each product page that have been verified and safeguarded by a neutral 3rd party like Bazaar Voice.

— Process 2 of 5 —

Define

DEFINE USERS & PROBLEMS


Personas

To define our pain points into deliverable features tackling these issues we began by developing personas. Our users fell into two groups: full-time mothers and housewives. Both faced marginally diverse problems but these concerns overlapped. The personas served as a vital guide for our design decisions and prioritisation throughout the project.


Empathy Maps

We wanted to build a definitive picture of our users ensuring that they were clearly understood. This is why we used quotes from interviews and surveys to create empathy maps for our personas.

Delving deeper into our personas frustrations helped to steer the project in the right direction, where we decided the following:

  • Value Proposition: Simple and concise store where you can:
    1. View bouquets based on your customised categorisation.
    2. Including detailed product pages with all the information users need in one place.
    3. Followed by a quick and easy checkout process.
  • Target users: The Savvy Shopper looking to place an order that’s value for money and in the quickest possible time
Job Stories

Image: Job Stories

Job Stories

To define the product needs into a list of deliverable features we implemented the jobs to be done framework. The process of considering our users’ motivations in various scenarios and their desired outcomes resulted in a better understanding of the features they needed to complete their tasks. The features are as follows:

  • Three or more images of each bouquet on its product page, illustrating it from various viewpoints.
  • Zoom facility on all images in the product pages.
  • Illustrated list of flowers included in the bouquet, plus stem count.
  • Product categorisation by occasion, colour and flower type.
  • Delivery specifications, allergy facts, flower substitution information and customer services contact details available on all product pages.

— Process 3 of 5 —

Ideate

To generate new ideas around the problem we created task flows, drew up wireframes and designed a styleguide based on the existing model.

Task Flow

To define the screens to be created for the site, we produced task flows mapping the user’s journey in searching, viewing and purchasing a bouquet for delivery. This gave us a clear view of the user’s journey enabling us to devise a straightforward and distinct process for them.

Task Flow

Image: Task Flow

Wireframes

To push the boundaries of the existing sites layout and style we created a wide-ranging variety of wireframes. We produced a select few of the wireframes with adapted visual design and branding. Due to the time restraint, we worked on the design which adhered most to the current site but decided to reserve the designs for a future overhaul of the overall site design.

Wireframes First Draft

Image: Wireframes First Draft

Visualisation of selected wireframes

Image: Visualisation of selected wireframes

We needed to iterate fast and uncover any issues missed during the creation of our task flows which is why we sketched our wireframes on dotted paper by sneekpeakit. During this process, we discovered a few screens which were missing from our task flows.

Mobile Wireframes

Mobile Wireframes

Desktop Wireframes

Desktop Wireframes

We generated a rough first draft version using the Marvel app to test with users. During our testing, we realised there were a few confirmation screens missing. This overall process allowed us to focus on the most efficient solution without emphasising UI style and elements.


Style Guide

While creating wireframes we generated elements which weren’t included in the existing style guide, such as buttons for a call to action, secondary or completed actions. We produced a style guide specifically for the e-commerce store which worked in harmony with the existing guide.

Style Guide

Image: E-Commerce Style Guide

— Process 4 of 5 —

Prototype

High-fidelity Prototype

Based on the initial sketches and newly created style guide we produced a high-fidelity prototype for searching, viewing and purchasing a bouquet in Sketch.

Prototype / User Journey

Image: Prototype / User Journey

Iteration

To ensure our e-commerce store was in keeping with the users’ needs we carried out usability testing throughout. As our time was limited we carried out 3 rounds of user testing focusing on the following tasks:

  1. Browse through bouquets;
  2. Add a bouquet to their shopping bag;
  3. Place an order for delivery.

Sweetpea Mobile Prototype

Summary of findings

  • Users were unaware of the importance of delivery details and its terms and conditions. We included extra pop-up windows to provide additional information and confirm their understanding of the terms and conditions.
  • Users searched for an alternative button to exit pop-up windows generated to change delivery details without making changes. Added another button on pop-up edit windows to allow users to do this.
  • Users complained of the inability to zoom-in onto product images on the shopping bag page. Zoom-in facility was added to product images on this page.
  • Users found text overly complex in a few areas. We simplified text in the areas mentioned and reviewed throughout to ensure ease of use.
  • Users didn’t grasp the importance of certain buttons and wanted more prominence added to the vital buttons. Critical buttons were altered to red to emphasise its significance.
  • Users found text hard to read in particular areas and asked for an increase in size. Text size was increased to make it legible throughout the site.
  • Users were confused by the prototype as they had to click on specific areas to continue.

Usability testing directed our designs towards developing into a more user centred system, producing a seamless experience for users. Improvements included adding functionality to further guide people and discarding cumbersome ones.

— Process 5 of 5 —

Implement

Design Implementation

I worked together with the developer to create a design language, applying my knowledge of HTML/CSS to create a system which streamlines the development of the prototype into a live site.

Revised user flow

During the development, we again made improvements to the user flow and are working on the final touches before launching the site soon.

Sweetpea Desktop Prototype

SOLUTIONS

Key features

Four key features were designed to assist users in searching, viewing and purchasing a bouquet on the Sweetpea E-Commerce site.

key features

NEXT STEP

  • I moved on to develop the second project phase - allowing customers to create an account where they can securely save payment methods, delivery addresses, their shopping carts, and order information, making for a faster checkout experience.
  • Implementing the redesign of the responsive site based on the designs approved during the wireframing stage.
  • Set benchmark measurement and iterate the product.
  • Carry out further rounds of usability testing with a broader variety of users.
Next-step sneak peek

Image: Sneak peek for the next step

WHAT I LEARNED

This was the first UX project I worked on while switching career paths. I started with a colossal failure and discovered:



  • I pitched the use of a UX approach for this project and took on the responsibility of implementing it. I discovered that while envisioning the project is important, knowing how to define its scope while also making it deliverable is vital.

  • Launching the product as soon as possible within an agile workflow. The benefits of which include a focus on high-quality development due to breaking down the project in manageable units.

  • Usability testing throughout ensures the product provides for the users’ needs and time is spent developing features which are guaranteed to satisfy the user’s needs.

  • Building a design system helps scale the project effectively. Providing a guide on why and how to use each asset, resulting in design components becoming easier to use and clearer to differentiate.