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
Role - UX|UI Designer
Platform - Desktop / Tablet / 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.
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.
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
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
Aequem
Strengths
- Diverse pricing
- Multi-Drop model
- "On Trend"
Weaknesses
- Difficult name to remember
- Lack of Branding
- Bad UI Design
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.
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.
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.
.
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.
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.
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
ITERATION AND IMPLEMENTATION
HIFI WIREFRAMES AND RESPONSIVE DESIGN
I was then ready to create the Hifi wireframes across 3 screen sizes:
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).
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.
- Add Prices on to the product page
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
Prioitry 1 Changes
I made the relevant changes from the usability testing, which I have marked them out below.
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
