UX/UI Project
Concept Project
E-Commerce
2 Week Sprint
Solo Project
In a sea of mass-produced fast fashion, Wall & Jones say:
‘Re-use your clothes, re-imagine it for you.’

As part of a UX/UI course with General Assembly, this project proposes a design of an E-commerce experience and digital identity for Wall & Jones, an eccentric fashion boutique selling upcycled clothing, local to me in Hackney.

The Problem

Wall & Jones currently rely solely on traditional physical commerce for revenue. They need a way to grow their business online against an increasingly digitised fashion economy. Moreover, they provide a bespoke service for custom designs and alterations that are traditionally harder to digitise.

The Solution
Provide a digital moodboard. All users to begin the process of custom designs online prior to a consultation.
Everything can be customised. Allow all ready-to-wear items to be pinned to the moodboard, as sources of inspiration or as the basis of customisation.
Clothing as raw material. Brand clothing as pieces that can be re-used, re-edited, and re-created, promoting more sustainable attitude to fashion.

The Brief

Who are Wall & Jones?

Tasked with finding a local business to provide an e-commerce platform for, I chose to work with the eccentric fashion boutique, Wall & Jones, to which I have been a customer of and who currently rely solely on traditional physical commerce for revenue. They also represented a challenge in that they provide services traditionally harder to digitise: alteration and bespoke fashion design.

Ali Jones, a costume designer, sells her own designs as well as a number of other small designer brands. All the clothes stocked are upcycled from vintage fabrics, deadstock, and left-over materials.

Wall & Jones vs. Fast Fashion

Wall & Jones stands in antithesis to the burgeoning fast fashion industry. Whilst the latter promotes overconsumption, mass production, and ‘newness’,  Wall & Jones advocate for idiosyncratic design and the reuse of clothing through upcycling and vintage materials.

An initial starting point for this project can be framed as the following problem statement:

‘Ali needs a way to grow her business online whilst still retaining its brand identity and core business services, so that she can increase customer reach in an increasingly digitised fashion economy’

1

Initial Research

User Interviews
Competitive Analysis
Affinity Mapping
Who are the competitors?

Wall & Jones sits on the intersection of bespoke fashion, ready-to-wear, and upcycled clothing. As such, they have competition in all three areas. I conducted a plus-delta on businesses that share two or more of these facets, highlighting potential opportunities in the market.

Fabrications:
Bespoke
Upcycled
Joshua Kane:
Bespoke
Ready-to-wear
Bleaq:
Upcycled
Ready-to-wear
Key Insights
Many bespoke services focus on formal tailoring or set patterns; there is a lack of services that prioritise artistry coming from the customer.
Competitors do not offer to customise/alter their ready-to-wear collection; there is often strong delineation of bespoke from ready-to-wear.
Online bespoke service user flows always end in facilitating a physical consultation with only minimal information exchange online prior.
More successful competitors have strong branding on what they stand for on their homepage.
Interviewing the Customers

To gain further insights into the values, motivations, and behaviors of Wall & Jones’s target customers, I conducted 6 user interviews, 20 minutes each over Zoom.

Following affinity mapping, several prominent trends came to the fore. Most significantly, users share an appreciation for artistry, and originality over fast fashion and trendy brands. They equally are conscious of sustainable sourcing and inauthentic claims to be green, which is interlinked to them making more intentional choices about where they shop. Further insights are summarize below:

2

Defining the Problem

Problem Statement
User Persona
HMW Statements
‘Malaika needs a way to alter and/or create pieces of clothing to her personal preferences so that she can express her unique point of view against the ubiquity of mass market fashion, but cannot find such clothes or services at a reasonable price’
Problem Statement

The above problem statement distils the overarching sentiment of my user interviews. Overall, there was a strong desire to have more creative input over what they wear, especially in contrast to mass market cookie-cutter fashion. The overarching goal for this pointed to being able to express oneself as individual and unique. Finally, the high price point of altering and customizing clothes acted as the main blocker for pursuing these options.

User Personas

The problem statement and research insights evolved to form the primary user persona below, Malaika; an art director with a highly individualized style, yet without the financial means to afford traditional bespoke fashion.

Note: a secondary persona - ‘the wealthy eccentric retiree’ - could also be formed from Wall & Jones’ customers, but represented less of an opportunity to capitalize on digitally.

3

Ideation

Sketching
Site Mapping
Wireframing
Card Sorting
Giving Creative Agency to the User

Initial ideation focused on prioritising the ability for users to utilize all stocked clothing items as a basis for bespoke creation or alterations, dissolving the boundary between ready-to-wear and bespoke. This gives the user creative agency, whilst also promoting the more sustainable idea that clothes can continue to be reused and reinterpreted. Four key ideas for Wall & Jones’s digital platform are as follows:

‍a. Provide a digital mood board to begin the process of custom designs for the user, allowing one to collate ideas and pin reference images.

‍b. Allow all clothing items from the store to be pinned to the mood board; users can then customise to their specific requirements.

c. Provide an online booking system for a consultation with Ali.

d. Provide information, where possible, on the origins / manufacturing of each upcycled item, underscoring the sustainable credentials of Wall & Jones, whilst promoting a similar attitude of transformation with the existing stock.

Site Map

In planning the overarching structure of the website, I created a site map which encompasses the full scope of content, integrating in the key ideas above. There are four main areas of this site map I focused on in particularly:

a. Browse - Open card sorting

Wall & Jones stock items that do not always lie in a conventional clothing category. It was therefore particularly necessary to conduct an open card sort to determine how best to categorise such items. In general, users still sorted items by conventional typologies - coats, dresses...etc. but consistently siphoned of clothes by particular materials, knitwear and denim being the most prevalent. The categorisation of clothes under ‘browse’ thus paralleled these findings.

b. Create

Central to the digital experience is the ‘create’ tab, which houses the mood board for pinning clothing items to, as well as a pricing list to emphasise Wall & Jones’s competitive pricing for custom wear. There was consideration about whether users would equate ‘create’ with wanting a simple alteration for an item; this would be examined further in usability testing.

c. Product Page

Linked to the product page is the product origins section, which underscores the overarching principle of clothes having many lives.

d. Blog

Considering custom pieces are unique items, I have suggested a ‘Blog’ tab, which could capture past and future designs, perhaps inspiring new creations for the user.

Check-out or consult?

The site map emphasised two main flows a user could use the website for:

  1. Checking-out an item to purchase
  2. Booking a consultation

Whilst the path to check-out follows a traditional linear path of browsing for products, to product page, to then adding to cart for check-out, the path to booking a consultation stems from the mood board, to which multiple paths are provided through the function of pinning.

Thus, at every step along the traditional path to check-out, the user is given the opportunity to create or customise their own product, blurring the line between ready-to-wear and custom-wear.

4

Visual Design

Brand Message

'Clothing is Fluid. Re-use, Re-edit, Re-create'

I put together a visual capturing the overarching sentiment I believe Wall & Jones as a brand should convey - the idea that clothing is fluid, has many lives, and can be re-interpreted over and over again. Clothing here is isolated, cut up, and abstracted as material fragments; each piece should not be viewed as finished articles, rather as sources of new creation.

This notion directly ties to the core service offering of bespoke creation and alteration of existing read-to-wear that makes Wall & Jones unique amongst its competitors. In conveying this core brand message, the above visual will act as the first image users see on the landing page, incorporating Wall & Jones’s own clothing stock to also promote new items of interest.

Visual Concepts

Staggered Alignments

This evokes a sense of informality, reflecting the brand message of clothing as unfinished pieces that can be altered and customised indefinitely.

The display grid of items is staggered to give a more freeform composition; an informal canvas akin to a Pinterest board. Clothing in this sense become more ideas than a consumable product.

The navigation bar breaks from a typical rigid line to evoke a sense of fluidity and whimsy.

Cut-Outs

The idea of cut-outs evokes the process of fabricating a garment; pieces of fabric to be stitched together, sewing templates to be cut.

a. Drop-down menus: Products are presented isolated from context, with a hard edge cut. The hover state on the ‘browse product’ pages accentuate this further. outlining the product with a stitching line, as if to say to the user, this can be cut-out by you and put into your scrapbook of ideas.

b. Hover states: All outlines to be dashed instead of solid; a solid line evokes completeness and finality, whilst a dashed line aligns with the brand message of editability and creation.

Colour & Typography

The choice of colours and typography reflect the interplay of old vintage clothes/fabrics with new customisations/updates to it.

A serif typeface (Adobe Hebrew) reflects the sense of history in vintage materials/clothing and an artisan feel to the brand.

A san-serif typeface (Roboto) is utilized specifically for the ‘Pin to Moodboard’ function, in italics to reflect the dynamism of the creative process.

Punchy playful accent colours reflect the creative playfulness of the brand.

Most of the content is black and white, acting as a creative blank space for the more colourful content and ideas of the shop and the users.

5

Testing & Iterating

Usability Testing
Wireframing
Prototyping
Testing Usability and the Rebrand

Six monitored usability tests were conducted remotely on a mid-fidelity prototype. I was interested in testing the ease of use of the two main user paths (check-out and consultation). Additionally, as this was a complete rebrand of the existing business, questions were prepared in interrogating the branding and general look/feel of the website; did it evoke the core brand message/values?

Task 1: Check-out a ‘Doily Corset’ for purchase

Task 2: Pin the ‘Doily Corset’ to the moodboard and book a consultation.

All users were able to complete both tasks in under minute. However, the tests brought other interesting outcomes to the fore:

4/6 users attempted to click on the home page visual, with the expectation that it would take them to the browse section, pointing to the effectiveness of the visual to draw attention and its potential for interaction.

5/6 users pinned items to the moodboard in the product view, not in the ‘browse’ view, because they did not equate the pin symbol with the moodboard yet.

Of the visual design, most users expressed an affinity to the ‘crafty but contemporary’ feel, and conflated the aesthetic to an ‘artist canvas’ and a ‘scrapbook’, which aligns with the core brand message. Furthermore, 5/6 users expressed that seeing the visual on the landing page immediately made the service of being able to customize and create clothing items apparent.

Enriching the Landing Page

The usability results point to one key screen which can be focused on for the next iteration: the landing page. Since testing pointed to the visual being an area of high engagement, I proposed to utilize it as a highly interactive space whereby users can navigate to key screens.

The idea of pinning an item to be customised can also be introduced here, so users associate the pin symbol with its function, prior to traversing the rest of the website; custom-wear is a key business offering so it made sense to explain the symbol that initiated this user pathway straight away.

6

Latest Prototype