Aesop

Case Study

'How can I make research-based changes to the Aesop interface whilst maintaining customer retention'

Discover

Background

The E-commerce industry has revolutionized the spending, browsing, and transaction experience. It has transformed the way consumers buy into a brand and invest their time and energy in becoming a part of that brand's story. By mimicking brick and mortar stores, E-commerce sites have managed to harness the authenticity of the buying experience and also added the convenience of having goods delivered to your doorstep.

The act within itself has given more power to the consumer than before. With product consumption and fashion becoming faster than ever, and brand loyalty becoming a thing of the past, it is paramount that these services online are streamlined to *almost* perfection…. But what is *perfection*? Design, therefore, plays an integral role in the E-commerce experience. In order to harness customer loyalty to any degree, you not only need to offer quality goods at prices that reflect your consumer, but you also need to ensure that the entire experience looks and feels like a physical shopping experience.

The Problem

"Based off research,"I don't really see myself represented in the brand"

Brief

In this case study, I carried out research to put together a coherent restructure to 3 of Aesop’s interface pages – Mobile and Web.

These pages were Aesop's homepage, shopping and product page and Aesop's promotions page.

Hypothesis

I'll be using user-centric strategies in order to improve the overall experience of the platform. These will include; making use of colour theories in order to improve on the apps aesthetics, looking at typography, imagery and illustration and conveying the apps message through different mediums. Also looking at the platforms target market and how best to utilise mentioned strategies to improve on Aesop's representation issues.

My Role

I'll be using user centric strategies in order to improve the overall experience of the platform. These will include; making use of colour theories in order to improve on the apps aesthetics, looking at typography, imagery and illustration and conveying the apps message through different mediums. Also looking at the platforms target market and how best to utilise mentioned strategies to improve on Aesop's representation issues.

About E-commerce

How E-commerce has changed over the past 10 years

Like any industry, E-commerce has evolved over time. The need to diversify offerings for consumers is a continuous, almost cyclical cycle.

Many platforms have a lifespan and E-commerce platforms aren’t immune to this trend - innovative methods must be realised. Over time we have seen; the introduction of card payments via online purchases, the inclusion of AI in order to tell what you may or may not order upon your next visit and what products will be of interest, drops of collections online limiting the amount of queueing at actual store locations, shopping via social media apps and other platforms that aren’t classically used to buy and sell goods and even the ability to pay for goods in instalments with Klarna.

Online > Retail

The value of Online shopping has only increased since its inception. According to the BBC, ‘Internet sales as a total percentage of sales in the UK rocketed from 2.8% in November 2006 to 18.9% in February 2020’. The convenience of this way of shopping for the consumer is unmatched. Population rates increase resulting in congested cities, this leaves the physical shopping experience undesirable to many.

Amazon has also had a major impact on the online/E-commerce industry and its growth. However, the online experience doesn’t always work in a brands favour. An unusable site, an aesthetically unappealing site or a site that isn’t dynamic and manned properly can turn users away with ease. Online may be a booming industry, but it is also fickle.

Covid-19 and E-commerce

With the start of the financial year fast approaching, companies were looking to revolutionise the services they provided in-store and online. However, the impending pandemic saw to it that efforts were solely concentrated on Mobile and Web.

The past 10 months have seen rapid turnover and profits for online orders. Companies such as Amazon and Netflix saw exponential growth due to their primarily online presence, monopoly over the marketplace, popularity and overall convenience. Consumers found themselves within their homes for the most part of 2020 and research shows that they swiftly turned to buy online.

According to Forbes, ‘online conversion rates increased by 8.8% in February 2021, reflecting a level of shopping urgency typically seen during Cyber Mondays’.

Define

Research methods

Through carrying out a thorough competitor analysis for the Aesop brand, I was able to identify areas and gaps where they could capitalise, and also areas in which they were more innovative than the competition. This also gave me an insight into their indirect competitors, Boots and The Body Shop, when it comes to skincare and access to it. I researched and annotated and refined my results in the below table; the home page, shopping and product pages and promotions page of Aesop’s competitors.

The following skincare brands, Khiel's, Beauty Pie and Neal's Yard, were chosen because of these factors; high end, luxury skincare, international shipping, a similar target market and seen as a lifestyle as opposed to just a product.

Red Route

After carrying out the competitor analysis, I then felt it important to identify the main routes users use the Aesop interface for. To identify the most important features of Aesop’s site, and to help me with the overall design and concentration on particular areas, I sent around a questionnaire to gather information about what was most important to consumers of the site. This type of quantitative research was useful as it gave me a simple and direct insight into what is important to a consumer of a

luxury skincare brand.

6 volunteers were rallied for this Red Route analysis. Questions were asked about the importance they placed on particular features of the Aesop website, how often they’d use them and if they use them at all. They were given a meter of 1 to 4, 1 being the least important and 4 of most importance, and ranked where they’d place each particular feature on that scale.

Interviews

I then wanted to gather some qualitative research and attain some raw opinions on the brand and the usability of the site for Mobile and Web. For this stage of the research, I ran 3 sets of interviews with 3 volunteers. I requested that they go through the website for about 10 minutes prior to the interview. Interviews are helpful as you’re able to gain more of an opinionated and emotive view on the UI. Through using the program Otter, I was able to transcribe the interviews and pick out keywords that would be integral for the final design. Below are the keywords I identified, my questions and standout answers.

Q. What are your thoughts about Aesop as a brand?

A. ‘Um, I really like that aesthetic. I think it's quite minimal. But you get that luxury feel. And I like that it's all it all looks like a consistent brand, like you will know their product anywhere. Once you see the brown bottles with like, the off-white labels and the strong text, you know, you know what they're about. And I think you get some of that on the website.’

A. ‘I really like a soft brand. I guess when I think of the brand, they think of luxury and minimalism, I think that they have I think they have a really strong brand, I would probably view it as the value for

money. Would be great I guess to have better buttons and have them easier to press’

Q. Would you add anything to the shopping page?

A. ‘I think maybe because a subsidiary. I felt like because nowadays we're so used to having brands that have a model or people on it to be a bit more human, a subsidiary, like, Faro might be nice to see who a consumer is the type of people that buy it the lifestyle that people need, you don't really get that from the website, you get the most beautiful images of product, which is fine and great, their product has always looked great, but I feel like it needs a bit more of humanity.’

Q. What are your thoughts on promotions?

A. ‘So it could be it's nice to have promotions. It's nice to get those newsletters to say this has been promoted, or like there's a key product of the season. And also, I think it's good to have some sort of like, loyalty incentives for customers and consumers because a lot of people do buy more skincare than anything.’

Q. How visible would you say the information on the homepage is?

A. ‘You know unless you go into the different product breakdowns. And get me it doesn't have to read drop-down so you can find the philosophy and stuff. But I feel like more and more people actually want to know what they're buying into. And if I'm a new consumer, I will, I would rather like, I don't want to have this necessarily search for something funded the red tab, I think already on that home landing page. That could be after the season on promotion, but it's still kind of keeps you enticed of what like, the brand pillars are the brand values. So like everyone's paying attention a lot more to that than before.’

A. I think not super visible because there are like sideswiping, menus as well as vertical. I think it takes quite a bit, I felt like it took me a bit of navigation to get a feel for everything that was being displayed to me. Because there's kind of a lot there. I think typically, they like to showcase some of their gifts, suggestions and things like that, and the homepage, which is a collection of things from many of their ranges in one place. And I find that a little charming personally. Thank you.

Q. How did you find navigating the website?

A. ‘I find a little jarring on Aesop's website is that they have quite a mix of products on each of their pages. So they have a really heavy focus on like gift suggestions and things like that, and gift sets.’

A. ‘Okay, although I did notice that there's no way it's to like quickly put something in your basket from the shopping page. Okay, unless you consider you have to go all the way into the detail page to then shop. I know some sides of it, you can just like a quick basket, addition kind of thing.’

A. 'The Live Assistance pop-up covers much of the screen when it appears (unprompted)'

A. 'Less writing on the homepage and the inclusion of more 'skin types' it's limited to 'all skin types' and 'oily''

Main Interview takeaways

All participants showed a definite interest in promotions. Some stated that they weren’t very visible on the Aesop site.

Participants mentioned that the information available on the homepage wasn’t that visible, but still aesthetically pleasing. Also a mention for more accessible CTA's.

2/3 applicants expressed interest in a change of how products are displayed in the shopping section of the page.

1 applicant, in particular, was quite satisfied with what Aesop had on offer visually from the site, and felt that the aesthetic led to an aspirational price tag and lifestyle.

Applicants expressed interest in seeing themselves represented on the homepage of the site, and mentioned throughout the interview other inclusive brands. They made reference to not actually knowing who Aesop’s target market actually were.

All applicants made reference to the brand being luxury and lifestyle, and that this is evident when on their site. They all also made reference to the store having a similar aesthetic to the site itself.

Analysing Data - Affinity Mapping

To help me understand the main insights from the above research, I carried out an Affinity Mapping exercise. The purpose of this was to summarise and draw out patterns and trends. The above findings helped me gather some key information that would then help with my iterations and overall designs. This method was very helpful as it solidified some of my assumptions of what users would want to be changed and streamline their thoughts about the brand.

Main Insights

The research showed a pattern of users wanting the design to theoretically meet the standard they're expecting of the brand.

Users were expecting a lot more smooth interaction between pages and product and some showed shock at the fact that buttons were a bit hard to comprehend and the site came across a bit bland in places.

Key bugbears for users was visibility with text, wanting to purchase items quickly and places where promotions were housed.

Something that I noted was the disappointment users showed with the lack of representation the site showed. It is imperative brands are inclusive as possible in order to attract new customers and benefit from customer retention.

Users made reference to certain features being adjusted such as seeing previews of products vs a list, dark mode for mobile, slightly larger text and for the help interaction screen to not take over a page in of itself, but to be a small chatbot.

Surveys

I then gathered more quantitative research. It was important to get a wider insight into the user journey and experience using the site. I sent a survey out to a total of 17 participants, of which 10 participants completed the survey. I asked a total of 3 closed questions in order to get some numerical data on what they thought about the site's accessibility and navigation.

In terms of demographic, I asked a wide age range of people from 22 - 60 years of age. I also included 1 open-ended question to round off the survey and get participants more coherent thoughts.

Q. If there were 5 things you could change about the interface, what would they be?

Feel free to bullet point your answers!

More colour, the site could be brighter, more description of the products and their benefits.

80% of users found the site quite accessible. Comparing that with research I have attained from interviews gives me insight into the need for other elements such as including people within the UI, or illustrations.

The app was seen as aesthetically pleasing by the majority voting at 4 on a scale of 1 to 5. This then strengthens my views on the Aesop brand having the right approach but needing to look at expanding their design choices.

Dark mode option of the Mobile interface was recommended twice.

Some participants felt that the illustrations currently used didn’t lend themselves well to the minimalism of the homepage and interface.

Larger font to be used for important information around promotions and general options. This gives me insight into possible changes that need to be made to the IA.

Many applicants noticed how expensive the product was. That put them off the product and even caused them to critique

with a more scrutinised eye.

A more personable experience was requested and differentiation between sections on the site.

An important comment was Aesop’s aesthetic and nude tones mimicking skin colour, however, lacking brown and black.

Would be inclusive to incorporate these colours also.

Research Summary

Through analysing the competition and carrying out a series of qualitative and quantitative research, I was able to draw some helpful conclusions to aid my re-design of some of Aesop’s pages and UX/UI experience.

Helpful information I took away from this was; the need for an accessible piece of design and for it to be as inclusive as possible, UI/UX is married to the pricing of products and the user expects high-end experiences throughout their user journey and the need for a mixture of actual faces and bodies within UI and how the price of a product determines how people judge every aspect of a product.

The Red Route analysis enabled me to properly grasp what features and routes are mostly used by the general public. The interviews that were carried out gave me a more in-depth look into what participants thoughts about the website and they were able to elaborate on their views a lot more and provide key information and words to feed into my design. The survey carried out provided numerical data. I also found that participants were more willing with this mode of questioning as they were mostly closed questions and took less time to complete.

Persona

Before moving onto the ideation and design process, I was able to create a Persona. This made it that bit simpler to design for Aesop's target market and possibly a market they are yet to successfully penetrate.

Hannah

Age: 29 - 40

Goals

Cherelle works within a Fashion PR firm. She tends to work unsociable hours due to a heavy workload and earns between 40-55k a year. She wants access to skincare and luxury goods that represent her and also extends benefits to their users. The platform needs to be easy to use, aesthetically pleasing and has convenient features.

Frustrations

Due to the social climate we live in, it's important to connect with a brand she feels represented by. Doesn't want to support a brand that doesn't have a seamless system, but charges premium prices.

Ideate

In order to generate ideas and innovate my design, I carried out 2 ideation techniques that I felt were applicable to this case study. I wanted to focus on solving certain bugbears experienced by consumers of the site and utilised what I had learnt from my research to aid this particular process.

I carried out Mind Mapping and Crazy 8’s to get an idea of paths I wanted to go down for user journeys, fixate more so on consumer bugbears and try and sketch out rough designs for the UI I ultimately put together and complete.

Mind Mapping

Crazy 8's - Mobile & Web

Homepage

Shopping Page

Product Page

Promo Page

My main objective throughout this phase was to concentrate on basic user bugbears and brainstorm quick ways to fix them. Mind Mapping allowed me to home in on particular routes that could be undertaken to solve particular problems. This method was helpful as it showed me simple ways to alter my design to fit what the general consensus wanted.

I also carried out the Crazy 8’s method, but for each screen I wanted to adjust. I split the task up into parts where I spent 2 minutes creating screens for Mobile and Web for each page. The results helped me come up with basic structures, and not so traditional structures to this E-commerce platform. Again, the aim with this method was to think of different ways to adjust and fix user bugbears.

Wireframes

The above ideation techniques put me in good stead to complete Low, Mid and High fidelity wireframes. At this particular stage, I wanted to concentrate on the problem areas showcased from my research and the different elements I picked up on whilst designing with Crazy 8's and important User journey findings with Mind Mapping.

Low Fidelity

I wanted to base my decisions on problem-solving. I annotated the below to showcase my design suggestions to fixing frustration points pointed out by interviewees and survey/questionnaire participants. Below I have included an example for my LF Wireframes for the homepage, Mobile & Web.

Mid Fidelity

When designing the MF Wireframes, I wanted to elevate the designs from the LF Wireframes. By going into a bit more detail I was able to make some informed changes to designs that I primarily thought I was happy with. Below I have included annotated screens from my Product Page design.

Notable changes from Low-Mid Wireframes

Defined buttons with rounded corners as opposed to angular corners.

Increased and defined spacing for illustrations and other forms of media.

Drew on themes from a design-led perspective. Wanted to stay true to the Aesop aesthetic, which in fact holds design in all forms close as a brand 'must'.

Lines to gently guide the user down the screen and lead them to important CTA's such as 'ADD TO CART'.

Small icon decisions.

Solidified the structure of the page and gave it more order compared to the Aesop website. I wanted it to feel more accessible and easier to navigate.

High Fidelity

Having established elements I wanted within my MF Wireframes, I was able to build on these with the below HF screens.

Illustrations completed by myself in order to showcase Mother's Day promo and adhering to Aesop's refined, design-led aesthetic.

Placeholders secured for imagery of people to slot in. Also, space made for other forms of media.

Sliding/carousel function kept for product page.

Lines added to HF wireframes to guide use down the page and clear signage to membership prompts.

Font and Icons are chosen.

Prototype

Design Inspirations/User Empathy

Throughout my design journey of the pages I chose to re-design, a number of elements inspired my design choices. It was important to develop a mood board based on the keywords I took from the interviews, my overall understanding of the Aesop brand and looking at their bricks and mortar stores. Below I go into a bit more detail about some of my decisions and inspirations.

Accupunture

The premise of Aesop has always been self-care and maintaining/nurturing the body. I wanted to include elements of this within the re-design. Thin lines were used to guide the user to certain buttons, but also to evoke an image of Acupuncture. I felt that this feature was important as it not only structurally works with the re-design but also evokes certain imagery within the user when going through the UI.

In-store experience

I wanted to also harness some elements of Aesop’s physical stores. The stores themselves are actually presented in an array of colours, hence my colour choices for certain elements of the UI. I do feel that the current site mimics the stores to an extent, but I wanted to a add a more architecturally centred element to the re-design. Aesop as a brand is

design-led and everything is taken into consideration, from their stone-clad counter tops to their curated fragrances and refined bottles - no stone is left unturned. I wanted to harness this in the design of the site and add more structure through placing information in subtle boxes, and adding elements of colour and gradients.

Breakdown of Design Principles

Aesthetic Usability Law - Aesop as a brand, prides itself on having a minimalistic aesthetic, however my research results showed me that some features were hard to use. I wanted to adhere to this rule, but also ensure that the platform was user-friendly. I looked to maintain a strong colour palette by using a stronger set of neutral tones, played with typography, curning and weight and I also tested with my own illustrations against the design of the interface.

Jacob’s Law - Aesop isn’t above the critique of functionality. Users expect your site to work the same way as many others. My research also showed some frustration with the lack of night mode on mobile and the screen function when asking for help on the Aesop interface. I decided to fix this. I included helpful, smooth transitions to create Day/Night mode and a chat bot that doesn’t open in another window, but in fact stays on the page you were on.

Law of Uniform Connectedness - I utilised this law quite a bit. The Aesop site has a disconnected aesthetic to it that many seem to not mind. I wanted to play around with this and include lines of random proportions that connected text to imagery, imagery to buttons and buttons to boxes. Through utilising this law I feel that I was able to draw the user to important information in a way that the original design may struggle to do.

Accessibility

WCAG

Upon completion of my re-design, it was important that the interface was accessible. The tones used are quite neutral, and I wanted to stay true to Aesop’s strong aesthetic but also comply with inclusive design laws.

I tested the main colour contrasts. The choice to leave some colours as neutral tones was a hard one. I didn't want to deviate too much from the neutral aesthetic of the brand.

Logical Hierarchy & Information Architecture

Structuring elements and copy on all pages to represent the intended flow of information.

Apple Human Interface Guidelines

Aesthetic Integrity:

I made sure to have the interface promote skincare, it’s primary function. Through sticking to what my research showed me by; having products move in a carousel motion, showcasing promotional products and keeping neutral tones, I adhered to the Aesthetic Integrity of Aesop and an E-commerce site.

Consistency:

Staying consistent was paramount when it came to having each page relate to the past one. I wanted to ensure that buttons had the same curviture, paragraph structure remained the same and illustrations kept within the same ‘family’ accross Mobile & Web.

Matephors:

Making sure that real life actions would result in actual movement on screen. This can be seen with the addition of Day/Night mode, the movement of the carousel of products and the hamburger menu option.

Text Size:

Ensuring all text size is 11 points and above.

Test

Notable changes

A clear hierarchy of information and changes to IA to showcase an attention to structure and importance of information.

Illustrations and models used in the final UI to humanise the brand and make the experience more personable/inclusive.

Accessible additions to the UX; Accordion feature for the footer menu and filter menu, important information in bold, richer colour scheme used to bring the UI together, sizeable buttons and night mode for visibility added, burger style menu also added.

Lines have been added to UI to guide the user down the page.

Pricing clearly displayed for products.

An additional promotions page has been made where seasonal gifts can live, and bundle sets.

I also drew and added illustrations and used imagery of models to personalise the experience, all of which was non-existent from Aesop's original UI.

User Feedback

Effective use of neutral tones - this theme translates across all the pages and I like the circular design on the product page.

The use of pictures and illustrations gives the website dimension!

Models are gender-inclusive - skincare is usually targeted towards women. The models are also ethnically diverse - again this is not common for Aesop.

Love the use of colour and the use of your illustrations of course! Would take out the drop shadows on some CTAs for consistency.

The new design really welcomes you into the Aesop world. I find this layout more informative and inclusive, I really love the option of having tutorials! I have always known Aesop but never felt that the brand was relatable, however the use of faces gives the brand more of a relatable identity.

The main web Home Screen is really pleasant to navigate, it’s not overly busy or overwhelming. The minimalism works well for the brand.

I also love the combination of this gift package alongside the illustration and background .

Conclusion and Reflection

Redesigning the Aesop interface through a mixture of UX and UI techniques and thorough User Research, was thoroughly rewarding and enjoyable. I felt that I learnt a lot about inclusive design. I also learnt that from a marketing standpoint, the use of imagery and illustrations can equate to a higher business turnover and even result in conversions. From my research, it was important to showcase an array of faces and bodies for a brand that provides products for everyone and users were more receptive to a visibly inclusive brand.

I love the aesthetic of the Aesop brand, but always felt that it could be

a bit more accessible and inclusive.

I hope I have achieved that.