Info

Brand

SLA The Label

Role

UX/UI Designer

Tools

Figma, InVision, Miro, Google Forms

Timeframe

4 weeks

Project

SLA The Label: Site Redesign

Inspire and empower users with an engaging digital experience which aims to increase conversion and customer retention. The redesigned SLA The Label site provides a significantly improved user experience, where user journeys are clear and engaging content is displayed, adhering to accessibility guidelines. This should allow the site to act as the primary driver of sales, where trust and loyalty in the brand can grow.

Objectives

1. Design a responsive desktop and mobile experience that complies with accessibility guidelines
2. Design a functional e-Commerce platform that improves user experience and is easy to navigate
3. Design a site that increases business revenue, decreases customer enquiries and encourages referrals to family and friends

Solution

The redesigned SLA The Label site pages are as follows:
- Home Page
- Product Detail Page
- About Us Page

Discover

Introducing SLA The Label

Sarah Ashcroft, a successful UK fashion influencer with 1.2 million Instagram followers, has successfully built a loyal community across various social media platforms over the past 8 years. In June 2019, she identified a market gap for affordable, high-quality, off-duty clothing and launched her brand, SLA The Label. The brand caters to individuals seeking a blend of aesthetic appeal and effortless style. Targeting Millennial and Gen Z women, the brand focuses its offering on high-quality pieces suitable for multiple occasions.

Competitor Analysis

A competitor analysis was carried out to understand how SLA The Label is positioned in comparison to its competitors. Benchmarking against direct competitors (House of CB, Kasela Studio, Meshki Boutique), and indirect competitor TALA, was essential to inform my design process. Strengths and weaknesses of each competitor site were identified, and functionality and design elements that are opportunities to align the SLA The Label site with user expectations were also identified. Overall optimising the site in line with competitor brands should help SLA The Label to increase its competitive edge in the market.

User Interviews

I conducted qualitative user interviews with a cohort of three women that matched SLA The Label and its competitors' target demographic. The interviews were conducted via phone calls with the aim of gaining insights into what an "ideal" user experience on a website consists of. This phase of user research helped me to understand users' preferences, expectations, needs and purchasing behaviors.

Key takeaways

- Reviews on product pages build users' trust, and help to create a loyal customer base
- The absence of user reviews make a user significantly less likely to buy products - Engaging, varied content on home pages is key to creating an engaging environment, impacting time spent on site
- Discounts are important to users and are one of the first things they look for on site

Survey

I conducted a survey using Google Forms with a group of participants who were representative of SLA The Label's target demographic. The qualifying participants were female, aged 18-30, in full-time employment. The main objective of the survey was to understand which elements make up a seamless, user-friendly journey on site. I wanted to see what was needed to exceed user expectations, and inspire users to purchase, therefore drive an increase in revenue for the business.

Red Route Analysis

In order to gain an understanding of which features users consider important as part of their browsing journey, red route analysis was conducted with the same cohort that participated in the survey. This part of the research helped to identify important features of the site that are commonly used, and guides users to purchase.

- The features used mostly by users were: Menu (navigation), Search function and Product Reviews
- Almost all users engaged with the Hero Banner immediately
- Product reviews were used by an overwhelming majority of users

Card Sorting

I carried out a card sorting exercise with my research participants to inform my decision on which categories would be featured in an improved, exposed navigation. I asked users to rank categories in order of highest to lowest priority.

The following four categories were identified as high priority:
- Shop All
- Sale
- SLA Luxe
- Back In Stock

The decision to split the navigation into four categories should allow users to navigate the site easily; the exposed style makes navigation easy to find. All other product categories from the original site navigation, including the highly ranked ‘New In’ category are grouped within the ‘Shop All’ category.

Define

The problem

The SLA The Label website fails to engage users and lacks essential functionalities, leading to decreased user trust and a negative browsing experience. This negatively impacts the overall user experience and business revenue.

SLA The Label’s current interface

Several pain points were identified on the current SLA The Label site:

  • The site lacks a variety of user journeys from the Home page, which may cause users to exit the site
  • A limited range of categories displayed in the navigation may also lead to a high exit rate
  • ‘Hidden’ navigation – no exposed categories presents potential user confusion and accessibility issues
  • No reviews on Product pages may impact users’ confidence in products, negatively affecting business revenue
  • No breadcrumbs on Product pages – a crucial part of navigation is missing, which may also negatively impact user journeys
  • The absence of an ‘About Us’ page means that if the brand is new to users, there is a lack of ways to connect with users and build brand affinity

Ideate

Mind Mapping

Insights gathered from the research phase helped me to build a mind map, outlining the non-negotiable features for the three pages I was to design for SLA The Label. Mind mapping was a crucial part of ideation, providing a foundation for the wireframes.

Crazy 8s Sketches

The Crazy 8s sketching process helped to provide a starting point for wireframing. I sketched 8 designs, and ranked the top design for each page, ensuring each design included the information and elements required.

Crazy 8's Sketches: User Feedback

I collected feedback on the highest ranked sketches from my research participants. This user feedback strengthened my confidence in the design choices made for each of the pages:

- Pages look like they 'would be easy to navigate' (functional and accessible)
- Home page design provides 'enough variety to be engaging and exciting'
- Pages follow a layout similar to other e-Commerce sites (familiar user environment)
- Product page designs provide users with sufficient information about products, motivating them to buy products (increased revenue)

Wireframe Progression

Final Deliverables

Improving The User Experience

  • Visible, ordered navigation – This solved a visibility issue, ensuring the designs adhere to WCAG guidelines, an accessibility feature (icon) has also been added to all desktop pages to allow for accessibility adjustments. I ensured logical information hierarchy through categorisation informed by user research.
  • A ‘Shop Now’ link on the main campaign image on the Home Page – A clear user journey prompt encourages users to browse deeper on the site, making them more likely to increase their session time and find their desired products with ease.
  • Product reviews added to product pages – This should make users feel better informed and trusting of their product purchases. Product reviews have been reported to impact purchase likelihood by 270% where products have only 5 reviews, a strong indicator for increased conversion.
  • Breadcrumbs’ added to desktop designs – These allow users to return to their previous pages, and understand where they are on the site (aligns with heuristic usability).

Improved Styling

Design Fundamentals

Jakob’s Law (2000) – Users prefer to use sites that follow a similar layout to other sites similar to them. I have used layouts similar to competitor brands, creating a familiar environment for users.

Aesthetic-Usability Effect (1995) – Users deem sites that are aesthetically pleasing also functional. This makes users respond positively to design, and more tolerant of minor usability issues. I have ensured that layouts are simple, that there is a balance of eye-catching imagery and text to allow users to engage with both, keeping the overall feel of the design clean and luxe.

Hick’s Law (1952) – The number of choices available to users increases the time it takes for them to make a decision. In order to ensure that reaction time was limited and users were not overwhelmed, I included recommended products on product pages, and all additional information including reviews and product descriptions on product pages is visible without the user needing to search for it.

The Law of Proximity – Grouping categories together helps users understand and organise information faster and more efficiently. I have grouped product categories on the Home Page (navigation and product categories on home page) to allow users to establish relationships between the product categories.

Miller’s Law (1956) – Organising content into smaller chunks is beneficial as it helps users to process, memorise and understand information easily. I have organised content on product pages into smaller chunks (reviews, product information) to correspond to this law.

Usability Heuristics state that ‘the design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time’. The addition of breadcrumbs to all desktop pages achieves this, and shows users where they are on site.

 

Accessibility & Inclusive Design

Designs were created with accessibility in mind to ensure an inclusive experience:

  • The navigation bar is clear, with text and logos that are visible to users with sight impairments
  • Page layouts are clear, and easy to navigate, to ensure that they are suitable for users with cognitive disabilities, with buttons and links in consistent, distinguishable formats
  • Colour contrast was tested to ensure users with visual impairments would not be negatively affected, and button contrast adheres to the 4:5:1 rule
  • Accessibility feature on desktop pages allows for the option of custom accessibility adjustments
  • Product and campaign imagery is accompanied by live text to be compatible with screen readers
  • All pages have been designed with no flashing content to minimise overwhelming or overstimulating users

Reflections

I thoroughly enjoyed completing this end-to-end design process of the creation and design of pages from inception. I’m proud that I achieved the objectives outlined in the initial brief.

01.
Recruit critics

It is so important have the ability to hand designs over to people who can pick them apart; not only did it allow me to confidently explain my design decisions, it also provided alternative perspectives on how my designs were being interpreted.

02.
Empathise, empathise, empathise

As designers, keeping users at the centre of what we do is paramount. This project allowed my passion for user-centred design to shine through as each challenge faced by users was solved.