Straw Man Hero
Minimalist-Showcase-Project-Presentation.jpg

Leaverhoodies.com

 
leavershoodie-logo-2019.jpg
 
 

Table of Contents

  • Project Overview

  • User Research

  • Information Architecture

  • Exploration

  • Realisation

Work Type | UI Design

Client | Stitch.group

Date | November 2018

 
 
Minimalist-Showcase-Project-Presentation.jpg

Introduction

Leavershoodies.com is a custom clothing brand targeted at the education sector, trading for over 10 years as the flagship brand of Stitch. Leavershoodies.com supplies end of year hoodies as well as sports, club and school trip garments. As a leader in custom garments, maintaining market share and brand recognition is the primary consideration of Stitch when updating the sites UX/UI.

On this project I was given the lead position on creating the visual content, developing the brand guidelines and content for the site. I also worked closely with the development team to liaise on User flow and UI for the site, helping draft styles consistent with the brand guidelines to ensure a uniform customer experience no matter which pathway to conversion the customer chooses.

Tools

 
 
sketch-mac-icon@2x.png

Sketch

 

Illustrator

 
adobe-photoshop-520074.png

Photoshop

 

 

User Research

Goal

The Leavershoodies.com site hadn’t been reviewed and updated in any significant way for 24 months, after the successful launch of the new Stag and Hen Threads site, we were looking to bring over certain elements for collating orders along with updating the inquiry process to increase leads and fast track the ordering process.

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 are the pain points in the ordering process?

Target Audience

  • Male & females in education

  • Age between 15 and 25

  • All income levels

  • Leaving school / college /university

  • Member of club / team / trip abroad

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. In addition we also interviewed the account managers in-house. As there is a lot of direct customer interaction during the ordering process, the account managers are able to provide a lot of great secondary data. Primary research was then conducted on the data we had collected on the current site along with customer feedback and reviews processed during previous years of ordering.

Result

Analysis of data showed a wide age range in the customers, although we were generally hitting our target market the age of the customer varied wildly. As the vast majority of orders were for 15-16 year olds a lot of the orders were either entirely or partially made by a parent or teacher and in some cases a grandparent, this was due to the high value of the orders. Based on lead data, conversion rates were 10% over the year on average, rates increased as the deadline for the end of the school year got closer.

The vast majority of customers ordered 2 design combinations even though we offered 40+ designs in each category. The offer of an online store to collect payments and order information was taken up 50% of the time with the other 50% of customers choosing to collect and pay for the orders manually.

Delivery times were the main pain point with customers regularly leaving orders to the last minute, with a hard deadline of the end of the school year or date they leave for their trip being the main requirement that needs to be met.

User Persona

 
LH-User-2.png

Group George & Georgia (15 - 16)

Working in a committee or pair role, they’re looking to get something special to mark the end of their school year. Idea-rich but low on experience dealing with a garment company, they are looking for guidance on the process whilst taking the lead on the design.

  • Want to see multiple options

  • Explore unique design

  • Clear guidance on the ordering process

  • Personalisations


Responsible Adult (25 - 60)

Rushed off their feet, but dragged into to either organising or helping to organise the order. They are looking for the easiest option. Working as part-organiser part-mediator, they want the process to be simple and clear.

  • Automated payment option

  • Easy to understand ordering process

  • Minimum changes

  • Guaranteed delivery date

  • Prompt customer service

LH-User-4.png

 

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 enquiry options:

  • Direct enquiry (no design ideas)

  • Generate initial design & enquire

  • Product information

  • Delivery times

  • Setup online shop

Sitemap

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

LH-Site-Map.png
 

 

Exploration

Ideation

Once we had defined the new pathway to inquiry, what followed was the ideation stage. This was the final stage of development that I was going to be involved in directly besides sitting in on review sessions. Sketching up ideas before wire-framing the agreed direction, the main area of exploration was the single page order submission with lots of potential pathways that would meet the requirements.

Wire-Frame-2.jpg

Creating Wireframes

Transferring over to Sketch I laid out the fundamentals of each section, creating a wireframe that covered every design option that would be presented, applying the same modular design principles as in the stag & hen threads to keep the development flexible and offer agility if/when new products were offered.

LH-Wireframe.png
 

 

Realization

Colour

LH-Colour-Way.png

Typography

LH-Typography.png

Modular Design Elements

lh-modules.jpg
 
 

Launch

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

Minimalist-Showcase-Project-Presentation.jpg