Swoon

Reinventing Swoon's online presence

Overview
At my time at Swoon I was tasked with redesigning our website as it was outdated and clunky, whilst not following modern UX principles. As a result, I created a visually consistent and accessible site overhaul which was published live in July 2020. The main areas of focus were on our MTO / Editions listing pages, our checkout flow, and the general aesthetics of the site.
Delivery
UI / UX Design
Competitor Research
Prototyping
Year
2020
Phase One

MTO / Editions

Due to being a solely online retail store with no physical shops, being able to display our products effectively is key. We focused on customisation and variant navigation as we offer many colours and finishes of our products, whilst ensuring image clarity and aesthetics improved too.
Phase Two

Checkout

Creating a trust-worthy and hassle-free customer checkout experience was also of high importance, as this is ultimately what can make or break the success of a sale. I made sure to improve the user flow, accessibility of the input fields and clarity of information displayed to the customer.
Phase One
PDP Analysis
Before going ahead and reviewing competitors, I made sure to review our current site and what are the key issues being experienced in the flow are. Being a completely digital store, I also ensured to analyse our mobile experience too.
Competitor Research
I conducted research and analysis of Swoon's key competitors to be able to see what core components are consistent throughout, and to identify features and layouts that can help us differentiate from them. I mainly looked at how users are able to select different colour variations of products, as Swoon's MTO range is one of its best sellers.
Key Objectives
With the main bulk of my research done, I put together some key changes I wanted to make to our PDP's in order to increase their usability, be visually better, and overall improve the users experience when shopping.
Objective One
Give the option for the user to explore different sizes / variations of the family.
Objective Two
Be able to view the product images & fabric options all above the fold.
Objective Three
Reduce clutter and improve the visual hierarchy of key product information.
Objective Four
Give users more options to explore similar products based on their cookies.
Wireframes
Going forward it was important to explore different avenues of the site redesign so that I can create something that is both an improvement on the current site, yet feasible to develop. As a result, I worked with developers to identify what features could actually be implemented in the new build so that I could focus on designing a real outcome.
Hi-Fidelity Designs
With my wifreframes complete, I went on the develop these as Hi-Fidelity designs. In doing so, it would give the developers an in-depth proposal of how to build the site. I also decided to develop some basic prototype flows in order to show how a user would interact with the pages, particularly with the MTO colour selection. By splitting the page into halves it allows image visibility and fabric customisation all above the fold, and can easily be applied to many different variants such as sizes, feet finish, or materials.
Phase Two
Checkout Analysis
With the main PDP screens designed, it was just as important to look into our checkout flow and how this can be improved. The existing checkout UI was extremely cramped and lacked accessibility, with far too many input fields and a poor step-by-step process.
Competitor Research
Ensuring we stuck with industry standards of the checkout process to better the familiarity for the user between sites, I again looked at Swoon's main competitors. From the research, the majority of the content in the checkout process was similar to our current flow, so this meant there wasn't a great deal of implementing new back-end features or data points.
Key Objectives
Once again, I set myself some main goals to achieve when designing the new checkout flow. Doing so gives me a checklist to ensure that what I am creating is meaningful and actively making an improvement for the user.
Objective One
Limit the amount of input fields on a single page to reduce clutter and ease of use for the user.
Objective Two
Optimise the basket layout to fit in the vertical scrolling space of mobiles.
Objective Three
Improve visual hierarchy of key product information like prices, quantity, and totals.
Objective Four
Reformat the delivery / personal details flow the align with industry standards.
Wireframing
With the main goals of the checkout redesign set, I begun sketching out different layouts for the basket, identifying which details and content needed to be shown to the user first, as well as the order of checkout steps taken. I kept in mind that the checkout CTA was needing to be clear and with minimal scrolling for the user to encourage purchasing.
Hi-Fidelity Designs
In the final designs, I made sure to clearly present each products key information, such as price, quantity, and delivery times. By not overcrowding the UI it gives more of an emphasis on the checkout CTA. As for the checkout flow, I split up delivery address and personal details, as this was previously all in one with far too many input fields. Doing this gives the user a sense of progression and therefore increase successful purchases.
Live Site & Reflection
During my time at Swoon, this is the project I am most proud of as it was all about UI/UX design, which is my most passionate area of design. Given more time and resources, I would have loved to user test my prototypes, or potentially run A/B testing on our existing site, however as it needed to be developed in a short time-frame I was unable to do so. Despite this, I do think that I was able to improve Swoon's site, especially on mobile as it heavily lacked responsiveness and accessibility. In June 2020, my designs were developed into what is now Swoon's live site. Please check it out!
Go to Swoon!

Fancy a chat?

Feel free to ping me a message, I’m always open to new opportunities and inspiring conversations!
‍
hey@samtruman.design
Say hello!

Check me out!

@2022 Sam Truman. All rights reserved.