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.
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.
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.
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.
Give the option for the user to explore different sizes / variations of the family.
Be able to view the product images & fabric options all above the fold.
Reduce clutter and improve the visual hierarchy of key product information.
Give users more options to explore similar products based on their cookies.
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.
With my wireframes 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.
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.
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.
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.
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.
Limit the amount of input fields on a single page to reduce clutter and ease of use for the user.
Optimise the basket layout to fit in the vertical scrolling space of mobiles.
Improve visual hierarchy of key product information like prices, quantity, and totals.
Reformat the delivery / personal details flow the align with industry standards.
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.
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.
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!
