roots before branches

An immersive e-commerce responsive website for a slow-fashion, sustainable & tech-forward brand.

Overview

Roots Before Branches is a tech-forward, slow-fashion, sustainable clothing brand that focuses on transparency and traceability when it comes to their production, while inspiring people all over the world to live a more earth-friendly lifestyle.

Objective

To develop a responsive website for a slow-fashion, sustainable & tech-forward brand.

Role

Product Designer

Tools

Figma, Figjam, Notion

Project Background

Roots Before Branches is planning to launch soon and one of the important platforms to sell their items is a website. This will be their main platform to sell, build an exclusive community, and engage with the customers.

They also struggle to create exclusivity, build anticipation, and maintain consistency in the brand experience for customers, and encourage them to sign up for their first access for those who joined before their official launch.

Challenges

A distinct and immersive shopping experience for each collection, with seamless checkout process.

An online community as vibrant and exclusive as their brand image — not only for the sake of data collection.

A membership tier with different benefits, first-access, and benefits.

Journey tracibility, customers can see the environmental impacts of each order.

Discovery Research

Competitve Analysis

Comparing two locals — Indonesian and two international competitors.

User Interview Summary

Pain Points

Frustrated with the inaccuracy in sizing when it comes to online shopping, the lengthy checkout process, and the lack of images provided for the product as a reference.
Lengthy policies for return/exchanges customers appreciate seamless return/exchange policies.
Lack of filtering when it comes to finding certain categories. Especially, when it comes to seasonal and sizings (e.g: petite, tall, large, etc.)
Too much pop-up that bothers the shopping experience.
Concerned with privacy issues, lack of quality, and accessibility to older generations who might not be familiar with it

User Goals

To create a lookbook, lifestyle inspiration videos, and a brand’s new product release as a part of a brand’s engagement.
To create a filtering system by category, especially in body types: petite, normal, tall, etc.
- Diversity in models — skin tone, body type, application of color theory.
- Intuitive web experience such as; fast-loading pages, order tracking, seamless checkout (fewer clicks), and guest checkout options.
To create a personalized customer service/shopping experience.
To create great brand loyalty, customers values;
- Personalized, time-based marketing.
- Show how the customers are giving back through purchasing.
- Personalized invitations to events, post cards, and exclusivity to new product releases.

Feature Priorities

Curate look-book, lifestyle inspiration videos, and a brand’s new product release as a part of a brand’s engagement

BUSINESS GOALS

Brand engagements on social media
Online reviews and testimonials

To create great brand loyalty, customers values;
- Discounts
- Personalized, time-based marketing
- Show how the customers are giving back by purchasing their products
- Personalized invitations to events, postcards, exclusivity to new product releases

Provides traceability, evidentiary support, and transparency in their supply chain
- Showcased through Quarterly Reports, Brand Highlights, or Milestones
- Brands that abide the international labor laws, no child labor, provide fair wages, no green-washing, and show how they are contributing to the environment and society

Majority would browse and do online shopping through the web, but will do initial and additional research through mobile for;
- Brand engagements on social media
- Online reviews and testimonials
- To see the brand’s product in a more real-life situation from previous buyers

Curate look-book, lifestyle inspiration videos, and a brand’s new product release as a part of a brand’s engagement

USER GOALS

Filtering items by category, especially in body types: petite, normal, tall, etc.
- Diversity in models — skin tone, body type, application of color theory
- Personalized customer service experience
Intuitive web experience such as; fast-loading pages, order tracking, seamless checkout (less clicks), guest checkout options
Responsiveness in online customer chats
Endless scrolling, instead of pages
Less pop-up, no spin-the-wheel
Suggestions based on past searches, instead of random product suggestions

A Summary of Research

Collected from interviews, observations, and secondary analysis, moving forward, covering the materials prioritized, user personas, and the high fidelity of how the final prototype came to be.

Affinity Map

The Personas

“It’s the quality I value most when it comes to buying clothes, which I believe comes with comfort. I tend to shop with brands that I know have an impact on the environment and I’m glad to be notified that my purchase contributes to a cause.”

Motivations

— I shop to be updated with the trend, but lately I’ve shopped for comfort, and longevity.

— I’ve spent more time working instead of shopping. Shopping for clothes became the top 20 things to do for me, so it’s not that important.

Behaviors

— I’m the type of person with a strong sense of like and dislike of things.

— I tend to follow a certain brand, depending on their lifestyle and how it relates to mine.

— I need to know if they can inspire me to wear their products.

Goals

— I’d like to purchase from a brand that contributes to the environment.

— I believe that purchasing from an environmentally-conscious brand and helping the cause is one step closer to the direction I’m going.

“I don’t have a particular style that I gravitate towards, but I like my clothes comfortable, I tend to shop once every blue moon to stock up and to get rid of the ones that are worn out, so with that in mind I prefer something that lasts long.”

Motivations

— I’m a traveler, I spend most of my days exploring new places and I mostly wear basics.

— I need my clothes to be versatile so I can combine them with most of my clothes and still look decent.

Behaviors

— I have a strong sense of what is comfortable or not, I tend to stick by them because I’m too lazy to search for new brands.

— I can only hope the brands that I’m loyal to stay consistent with their quality.

Goals

— I don’t know much when it comes to sustainability, I’d be glad to invest more to a brand that is sustainable and proven to have a strong environmental impact.

Sitemap

User Flow

Brand Identity

Logo

Color Palette

Buttons

Typography

Icons

Components

Low Fidelity Prototype

Exhibit I — Home

Exhibit IV — Product Details

Exhibit II — Gallery

Exhibit V — Shopping Cart

Exhibit III — Sanctuary

Exhibit VI — AR Try-On

High Fidelity Prototype

Home & The Garden Gallery

The flow of this web is to ensure customers know the next steps without straying too much from the main objectives:

To browse and eventually purchase an item.
Options available to do “quick add to cart” while perusing.
Roré the AI-bot to help with FAQ and connect to an agent if needed.

Product Details & Sizing

Continuing on, customers have the option to view the product on a separate page altogether, which provides more product details, such as;

Sizing & Color Options
Customization Option
Production

Product Summary & Checkout

The checkout process should be simple and quick. By understanding that a lengthy checkout process reduces successful purchases, RBB focuses on simple and trackable steps.

By viewing a summary of their cart, which is still editable before finalizing a purchase.
Steps on the checkout process, to anticipate the next steps.
A closing statement of the experience and a guide for the next steps.

Usability Test Plan

Research Objective

To test the ease of navigating through the web, from the flow to the checkout process. As this might not be designed like any other e-commerce platform, through this experience we would be able to identify pain points, feedback, and suggestions to improve the customer experience.

Research Method

This test will be conducted through a guided interview. By giving them a prompt and seeing if they can finish the task without having to guide them step-by-step.

Measured by how they could complete tasks without stopping along the way, asking for validation on what they were doing was right, and how digestible and easy to navigate through the information laid out as well as the journey to complete tasks.

Task Completion – 100%
Product Satisfaction – 100%

Usability Test Results

Key Learnings

Ease of browsing the gallery section as well as the option to go into more detail about a certain item or add an item directly along with a brief explanation of the product.
They would like similar style recommendations as well as weather suggestions.
The checkout process was also easy to navigate and the steps helped them track how many more they had to go to before completing the action.
They are impressed with the Sanctuary (Membership Program) and to be more immersed in the experience.
This includes donations to NGOs, charity programs of their choosing under the collaboration of the brand, and a pre-loved market for vintage items from past collections

Next Steps

Following the first round of testing, the next steps would be to iterate and design for features beyond the MVP.

To add NGOs or charity in the membership the members can choose to contribute to.

Personalized add-ons in the product details.

Future pre-loved market link, track its originality and story behind the item.

Key Takeaways

Shopping is a journey.

By understanding the purpose of an e-commerce site I have learned that they would like to know what the next steps are, the element of surprise should be a part of the shopping experience.

Instant gratification improves customer satisfaction.

By adding Roré as a bot integrated with AI technology to help answer FAQs as well as anticipate customer behavior, helps the company to reduce any unfinished purchases even if an agent is not online at the moment.

Importance of customers involvement.

Loyalty programs should be available not only to collect points and the company’s database collection, but it should also act as a community to the customers and how their purchase makes a difference. Go beyond the common loyalty program benefits.

Home

take me here

take me there

Home

roots before branches

Overview

Project Background

Challenges

A distinct and immersive shopping experience for each collection, with seamless checkout process.

An online community as vibrant and exclusive as their brand image — not only for the sake of data collection.

A membership tier with different benefits, first-access, and benefits.

Journey tracibility, customers can see the environmental impacts of each order.

Discovery Research

Competitve Analysis

Comparing two locals — Indonesian and two international competitors.

User Interview Summary

Pain Points

Frustrated with the inaccuracy in sizing when it comes to online shopping, the lengthy checkout process, and the lack of images provided for the product as a reference.

Lengthy policies for return/exchanges customers appreciate seamless return/exchange policies.

Lack of filtering when it comes to finding certain categories. Especially, when it comes to seasonal and sizings (e.g: petite, tall, large, etc.)

Too much pop-up that bothers the shopping experience.

Concerned with privacy issues, lack of quality, and accessibility to older generations who might not be familiar with it

User Goals

To create a lookbook, lifestyle inspiration videos, and a brand’s new product release as a part of a brand’s engagement.

To create a filtering system by category, especially in body types: petite, normal, tall, etc.

Diversity in models — skin tone, body type, application of color theory.

Intuitive web experience such as; fast-loading pages, order tracking, seamless checkout (fewer clicks), and guest checkout options.

To create a personalized customer service/shopping experience.

To create great brand loyalty, customers values;

Personalized, time-based marketing.

Show how the customers are giving back through purchasing.

Personalized invitations to events, post cards, and exclusivity to new product releases.

Feature Priorities

Curate look-book, lifestyle inspiration videos, and a brand’s new product release as a part of a brand’s engagement

BUSINESS GOALS

Brand engagements on social media

Online reviews and testimonials

To create great brand loyalty, customers values;

Discounts

Personalized, time-based marketing

Show how the customers are giving back by purchasing their products

Personalized invitations to events, postcards, exclusivity to new product releases

Provides traceability, evidentiary support, and transparency in their supply chain

Showcased through Quarterly Reports, Brand Highlights, or Milestones

Brands that abide the international labor laws, no child labor, provide fair wages, no green-washing, and show how they are contributing to the environment and society

Majority would browse and do online shopping through the web, but will do initial and additional research through mobile for;

Brand engagements on social media

Online reviews and testimonials

To see the brand’s product in a more real-life situation from previous buyers

Curate look-book, lifestyle inspiration videos, and a brand’s new product release as a part of a brand’s engagement

USER GOALS

Filtering items by category, especially in body types: petite, normal, tall, etc.

Diversity in models — skin tone, body type, application of color theory

Personalized customer service experience

Intuitive web experience such as; fast-loading pages, order tracking, seamless checkout (less clicks), guest checkout options

Responsiveness in online customer chats

Endless scrolling, instead of pages

Less pop-up, no spin-the-wheel

Suggestions based on past searches, instead of random product suggestions

A Summary of Research

Collected from interviews, observations, and secondary analysis, moving forward, covering the materials prioritized, user personas, and the high fidelity of how the final prototype came to be.

Affinity Map

The Personas

“It’s the quality I value most when it comes to buying clothes, which I believe comes with comfort. I tend to shop with brands that I know have an impact on the environment and I’m glad to be notified that my purchase contributes to a cause.”

Motivations

— I shop to be updated with the trend, but lately I’ve shopped for comfort, and longevity. — I’ve spent more time working instead of shopping. Shopping for clothes became the top 20 things to do for me, so it’s not that important.

Behaviors

— I’m the type of person with a strong sense of like and dislike of things. — I tend to follow a certain brand, depending on their lifestyle and how it relates to mine. — I need to know if they can inspire me to wear their products.

Goals

— I’d like to purchase from a brand that contributes to the environment. — I believe that purchasing from an environmentally-conscious brand and helping the cause is one step closer to the direction I’m going.

“I don’t have a particular style that I gravitate towards, but I like my clothes comfortable, I tend to shop once every blue moon to stock up and to get rid of the ones that are worn out, so with that in mind I prefer something that lasts long.”

Motivations

— I’m a traveler, I spend most of my days exploring new places and I mostly wear basics. — I need my clothes to be versatile so I can combine them with most of my clothes and still look decent.

Behaviors

— I have a strong sense of what is comfortable or not, I tend to stick by them because I’m too lazy to search for new brands. — I can only hope the brands that I’m loyal to stay consistent with their quality.

Goals

— I don’t know much when it comes to sustainability, I’d be glad to invest more to a brand that is sustainable and proven to have a strong environmental impact.

Sitemap

User Flow

Brand Identity

Logo

Color Palette

Buttons

Typography

— I shop to be updated with the trend, but lately I’ve shopped for comfort, and longevity.

— I’ve spent more time working instead of shopping. Shopping for clothes became the top 20 things to do for me, so it’s not that important.

— I’m the type of person with a strong sense of like and dislike of things.

— I tend to follow a certain brand, depending on their lifestyle and how it relates to mine.

— I need to know if they can inspire me to wear their products.

— I’d like to purchase from a brand that contributes to the environment.

— I believe that purchasing from an environmentally-conscious brand and helping the cause is one step closer to the direction I’m going.

— I’m a traveler, I spend most of my days exploring new places and I mostly wear basics.

— I need my clothes to be versatile so I can combine them with most of my clothes and still look decent.

— I have a strong sense of what is comfortable or not, I tend to stick by them because I’m too lazy to search for new brands.

— I can only hope the brands that I’m loyal to stay consistent with their quality.