NxL-responsuve-design-1-3

Natural x Lab

OVERVIEW 

 

SUMMARY 

Natural x Lab is a multi brand lifestyle store, selling sustainable products.

I started this company in 2017, after years of working in the fashion industry, seeing the amount of waste, lack of care, and the throw away culture that we have all become accustomed to. After hours of searching for stores with sustainable products from clothes that were actually nice to beauty products and homeware... I really didn't get anywhere... of course I came across a few, but there were none that I actully wanted to buy something from.

So I started Natural x Lab with a mission to create a lifestyle brand that co-exists with both nature and the modern world, taking away the stress and pressure we put on the planet and ourselves. 

Taking social and environmental standards seriously, and believing in making products that are designed and built to last using organic and natural ingredients and contents as well as re-manufacturing and repairing existing products to reduce the environmental impact of landfills whilst being committed to a consistent level of luxury, present in all of the Natural x Lab brands and products. 

I had a basic website already, but it needed an update and I wanted it to be responsive, as almost 50% of sales now come from mobiles, and below is my UX | UI journey of how I made Natural x Lab into a reality. 

ROLES AND RESPONSIBILITIES

Platform - Web and Mobile - Responsive Design 

Tools - Adobe XD / Zoom / UX Tweak / Adobe prototype / Adobe Illustrator

Deliverables - UX Design / Information Architecture / Brand Strategy / UI Design / Copywriting / Illustration / Prototyping

 

PROJECT OBJECTIVE - GOALS 

Fully develop the Natural x Lab Branding by designing a logo, colour palette, and the style and tone for Natural x Lab. 
Keeping in mind their ethos, mission and vision of a sustainable, calm and nature filled world that is fresh and morden.  


Increase revenue and traffic by redesigning a responsive website that is clear, inspiring and user friendly, along with discovering the customers needs and pain points when shopping online.

Asset-11

THE PROCESS

DISCOVERY AND RESEARCH

PRIMARY USER INTERVIEWS

I performed a heuristic evaluation, with 5 current customers and 5 non current customers, but all avid shoppers to find out their pain points and motivations for shopping online. 

Goals 

Pain Points 

Motivations

To feel good and empowered.
Thinking practically (Seasonal / Events shopping).
Experience satisfaction. 
Easy shopping experience.
Find good / better deals. 
Good, easy customer service.

Dislike of distractions (ad pop ups).
Products that do not look as described. 
Complicated returns policy.

Clean, minimal, easy to navigate. 
Durability of the product.
Information about the fabric of the product. 
Edits of clothes creating an editorial feel. 
Being able to see clothes in their size on models.

COMPETITIVE ANALYSIS

I had a look at some of the other sustainable sites out there and these were my favourites, although as you can see from the weaknesses below they are all missing some key elements to having a successful store that hopeful Natural x Lab can combat. 

Asset-13

Reve En Vert 

Strengths

- Built up a great community 

- Have had a lot of investment 

- Nice use of images

- Strong target customer 

Weaknesses

- Lack of diversity 

- Lacks critical functionality

- No product reviews

Asset-15

Status Gaea

Strengths

- Nice use of editorial images

- No overhead costs 

- Blog / Store Hybrid

- On trend and easy to adapt model 

 Weaknesses 

- PPC (pay per click) 

- Lack of branding 

- High dependance on 3rd party brands

Asset-17

Aequem

Strengths

- Diverse pricing 

- Multi-Drop model 

- "On Trend" 

 

 Weaknesses

- Difficult name to remember 

- Lack of Branding  

- Bad UI Design

 

Asset-10

Matches Fashion

Strengths

- Very well known 

- Huge growth 

- Strong target customer 

- Great UI Design 

Weaknesses 

- High Price Points 

- Repetitive Products 

- No Product Reviews 

USER PERSONA 

I created a user persona demonstrating my target customer, this persona is based upon the types of people that would be searching for and shopping at a store such as Natural x Lab, I drew insights from the research above as well as social media and in person observations. 

Natural-x-Lab-Persona-v

EMPATHY MAP

To accompany the above persona I also created an Empathy Map, to help identify and empathetic with our potential customers, and not let my own motivations, goals and pain points get in the way of what my customers actually want and are looking for. 

Natural-x-Lab-Empathy-Map

PRIMARY KEY TAKEAWAYS

From this initial research I realised there were already some key elements I could add in or update that my customer would like:

- Look through and update product pages. 
- Making sure each product has a close up fabric shot. 
- Make the descriptions shorter and snappier, and add durability to the products. 
- Add edits and collections like in magazines. 
- Structure sales and seasonal edits.

INFOMATION ARCHITECTURE

CARD SORTING 

 

I want to see how easy it was to navigate the current Natural x Lab website design. So during a remote open card sorting optimal workshop, I designed a search structure based on the existing website. 

Results were good and most items were easily sorted into the correct categories, bar a few highlighted in the site map. 

.

Screenshot-2021-03-12-at-11.44.21-1

SITE MAP

From the card sorting research I then went on to recreate a full site map of Natural x Lab, changing, adding in and taking away items from the nav bar. 

Natural-x-Lab-Site-Map-copy

INTERACTIVE DESIGN

USER FLOWS

Once the site map was ready I then thought about how the users would interact with the website and the journey flows they would take to navigate through from beginning to the end of a purchase, below are some examples.

LOFI WIREFRMAES 

After looking at the user interviews, personas and flows I created some lofi responsive wireframes, to give me a base to work from. 

 

Screenshot-2021-03-12-at-13.36.52-1

BRANDING AND UI DESIGN

BRANDING 

To add a splash of colour and some personality I then designed all the branding for Natural x Lab, Keeping in mind the ethos and vision of a sustainable, calm and natural world. Using high-end editorial images that would inspire the target customer, as well as be relatable to them, creating an idyllic lifestyle. This is shown throughout the branding and UI design, in the imagary, copyright, type font and colour palette complementing the products available. 

MOODBOARD

Screenshot-2021-03-12-at-13.40.06
Screenshot-2021-03-12-at-13.59.49
Screenshot-2021-03-12-at-17.47.22

ITERATION AND IMPLEMENTATION

HIFI WIREFRAMES AND RESPONSIVE DESIGN 

I was then ready to create the Hifi wireframes across 3 screen sizes:

Screenshot-2021-03-12-at-14.40.02
Asset-21-1
Asset-10

USABILITY TESTING

USABILITY AND AFFINITY MAP

Process makes perfect: After creating the responsive wireframes above I conducted some users testing (results shown the in usability testing affinity map below).

Affinity-Map-–-2

NEXT STEPS

The overall feedback was great, they loved the overall branding and design of the site, saying it looked fresh, inspiring and trustworthy. However a few issues arose, and I discovered that a few users were unable to find the "Accessories" tab in the menu with ease, and some other users were unsure of where to find the "Wishlist" section once they had favorited an item. 

I also added in a Priority 2 list for considerations for future innovation ideas and testing, a lot of these ideas came from a mix of customer comments and research conducted while doing this case study, and could be great editions for the next phase of Natural x Lab.


 

Priority 1 (Changes to make now)

- Make the "Accessories" tab more visable.

- Make the "favourites" tab more visable. 

Priority 2 (Future consideration) 

- A/B testing with Reviews higher up on the product page. 

- Test out a "quick-view" option to products when cursor is hovered over them 

- 360 video and images 

- Changing Room mood board (integrate with wishlist) 

- AR View (See how the product looks in your home before you bring it home) 

- Natural x Lab Perks 

- Recycle and Revive Service 

PROTOTYPE:

FINAL THOUGHTS

MY TAKEAWAYS 

With over 16 years of working in the fashion industry, it was great to be able to understand and gain in-depth insight into the customers' minds which can differ from mine and give me more understanding and setting the whole mood and experience which goes far beyond the branding. I would love to drive deeper into the priority 2 (future considerations) to really maximise and focus on the personalised user experience. Even the simple realisation of customers wanting to see the clothing on someone that had the same body shape as them, was an eye opener to something I had taken for granted being a size 6 and ex model and I not realised the full impact it could have on both sales and return rates. 

 

THANK YOU 

indigo@indigogoss.com

Back to top Arrow