Straw Man Hero
Main-Web-Image.jpg

Stag & Hen Threads

S&H-Logo.png
 

Table of Contents

  • Project Overview

  • User Research

  • Information Architecture

  • Exploration

  • Realisation

Work Type | UX/UI Design

Client | Stitch.group

Date | March 2018

 
 
Main-Web-Image.jpg

Introduction

Stag & Hen Threads is a custom clothing brand targeted at the stag & hen weekend market. It had been trading for 3 years with reasonable success, but very low conversion rates. The sites CMS had mountains of data about user behaviour on the site and enough traffic to warrant a review and redesign of the site and CMS.

As the principle designer at the site’s parent company Stitch, I was tasked with reviewing the data, running competitor analysis and presenting options for improving the site’s conversion rates. Leading on from the initial period of discovery, a proposal to implement the findings would be presented.

Tools

 
 
sketch-mac-icon@2x.png

Sketch

Figma-512.png

Figma

Illustrator

adobe-photoshop-520074.png

Photoshop

 

 

User Research

Goal

My objective for Stag & Hen Thread’s was to create a market leader in this sector of the custom clothing market. Applying a HCD process to this project was part of a broader restructuring of the creative department’s approach to creating new products, with the broader goal of creating a platform that can be used to launch new brands with minimum cost outlay.

To achieve these goals I identified these questions.

  • Who is the target audience?

  • What are their behaviours?

  • What are they looking for in a product before purchase?

  • What unique selling points are most likely to lead to conversions?

Target Audience

  • Male (50%) & Female (50%)

  • Age between 20 and 36

  • Medium income levels

  • Comfortable with ordering online

  • Well organised and looking to go the extra mile

Methodology

Secondary research was conducted on our competitors to discover functionalities they offer that we did not, along with features of our current site that can be migrated over to a new platform that are not offered by our competitors. Primary research was then conducted on the data we had collected on the current site along with a limited survey with a small pool of clients who were repeat customers. In addition I reviewed the national office for statistics data on marriage rates and stag and hen nights and included their finding in my report.

Result

Analysis of data showed a large disparity in the gender makeup of our customers; 80% were male and 20% female. Based on saved orders, conversion rates were equal across genders at 10-12%, with converted leads showed further distinct gender-based differences. Converted leads from male customers used the express delivery option 90% of the time with female customers only using it 30% of the time. There was a clear set of designs that both genders purchased, the faceprint collection. Based on the images uploaded on completed orders, the age range of the customers matched the national office for statistics data that first time marriages were between 20-35 years old. Feeding into this finding customers who had repeatedly ordered (2+ times) were surveyed with 4 responses, from these results of the limited survey there were 2 main findings. The orders were all for first time marriages, with 3/4 respondents having only organised the single stag/hen weekend, with this in mind the reason they had ordered multiple times was that they had an established relationship with us and our ordering process and had a positive experience.

User Persona

 
Special-Day-Sarah.jpg

Special day Sarah (25)

As her sister’s bridesmaid, Sarah wants to make her hen party the best weekend ever! She knows what she wants and how it will look. Well organised and with plenty of time to get the perfect product together, Sarah wants to work with the team to ensure it’s exactly what she is looking for.

  • Wants to be able to customise

  • Try different options

  • Good customer service

  • Accessories


Last minute Luke (29)

Luke has to organise his best mate’s weekend and is looking for ideas that can create a collective feel to a disparate group. Luke has a busy job and personal commitments and hasn’t had to organise the weekend, but wants to make it extra special. He’s looking for products and experiences that can deliver last asap.

  • Wants a range of striking designs

  • Style and colour options

  • Easy ordering process

  • Guaranteed delivery date

  • Prompt customer service

Last-Minute-Luke.jpg

 

Information Architecture

MVP & User stories

I regularly check back with the user research and user personas to develop sets of user stories based on the features that users may want to see while using the site. The MVP was defined as the following:

  • Create and save design

  • Purchase garments

  • Review and confirm custom design

Sitemap

Once the key app content was organised, I continued to create a detailed sitemap to serve as the guidance to design user flow.

Site-Map.png
 

 

Exploration

Ideation

Now the fun part begins. With all the supporting data presented, I started to create iterations and iterations of hand-drawn sketches before diving into wireframing and prototyping. I always ask myself:”What’s the best way to communicate the thoughts?” These hand-drawn sketches are helpful to keep me from getting caught up in the details. I continued to get feedback from users during this process.

Wire-Frame-2.jpg

Creating Wireframes

Once there was no issue with the sketches, I moved on to creating wireframes in Sketch. To save time and maximise productivity. I used wireframe kits to develop high-fidelity wireframes rapidly. This allowed me to have tons of clean wireframes ready in minutes for user testing.

Sketch-Layout.png

Prototyping

Once the wireframes were confirmed, we moved on to prototyping the site. Working with our in-house development team, we prototyped the home page to purchase flow. Before testing I applied the initial style guides created alongside the research stage, the handover to the dev team was issued through Figma resulting in workable prototype for testing.

Prototype-Figma.png

User Testing Findings

At this point in the process, we needed to find a workaround as we didn’t have access to a pool of testers to test the site. As the majority of staff in the office fitted into the target age range, we selected a group from the pool of staff that had no exposure to the development process to test the prototype. Testing results were generally positive, with a few layout tweaks being necessary, especially on how the different designs were presented. In addition, the confirmation stage of the ordering page was refined as the customer was presented with very limited information, and feedback from the testers suggested they would like clearer communication as to the details of total order, including order form, design chose, estimated delivery date as well as what the next stage is.

The landing page was also refined down with different key points being presented in various positions. The outcome of this was skewed slightly by the USP and functionality being similar to other sites in the company, yet a clear final product was defined and presented as follows.

Stag-and-Hen-Z-Layout-2.jpg

Readability

  1. 5* reviews to improve customer confidence

  2. Basket function to improve returning customer experience

  3. Call to action 3 target users

  4. Delivery time USP is predominant user requirement

  5. Reiterate 5* reviews as USP

 

 

Realization

Colour

Colour-Guide.png

Typography

S&H-Typography.png

Modular Design Elements

Figma-Style-Guide.jpg
Screenshot 2019-03-27 at 22.48.20.png
 
 

Launch

Once development of the site had begun I transferred over to creating the visual elements. From photo editing to the development of the products, find full overview of this side of the project in my graphic design portfolio.

wireframe-banner.jpg
Main-Web-Image.jpg