Reponsive website
B2B website for
sustainable brand
A real world project with team: Salkyn Adysheva for icon design, color palette and type face.
My role
UX Designer, Marketing, Content Strategy, Copywritting
Duration
1.5 month
Tools
Figma, wix, miro, whimsical
Project overview
-
Tumar is a leading manufacturer of sustainable indoor shoes located in Bishkek, Kyrgyzstan;
-
Tumar's distributor partners resell its products abroad by customizing under their own label;
-
Tumar’s website is one of the main online platforms, where potential partners get to know about the brand and its wholesale offers. Current website: tumar.com.
Challenges
-
Converting the new website visitors into wholesale customers to resell Tumar products abroad;
Problem
-
To design a responsive website about Tumar and its products;
-
To communicate trustworthy brand image and business content;
-
To highlight the product and its sustainable quality;
Target audience
-
B2B customers:
Retailers focusing on sustainable shoes;
Opportunity
-
To help the brand to represent itself as a professional manufacturer;
-
To better meet the business needs and converting users into long-lerm partners representing Tumar in other countries;
Quickly jump to:
Key questions:
1) What is the company trying to accomplish?
+
2) What is the B2B customer trying to accomplish?
+
3) What is the end consumer trying to accomplish?
What do they all share in common?
Research
Research goal
-
To understand wholesale user needs and pain points when looking for a manufacturer;
-
To understand the global market trends, business competitors and competitve advantages of Tumar;
-
To discover opportunities for Tumar to communicate trust and transparency which is vital in establishing long-term business relationships;
I created business model canvas in order to put every player on the map and to understand what they all share in common.
Business model canvas
Key activities
-
Designing, manufacturing, delivering;
Products
-
Sustainable indoor and outdoors shoes
Target user
-
B2B customer: retailers
Channels of communication
-
Website;
-
International trade fairs;
-
Emails;
-
Social media
-
Newsletters;
End consumers
-
Women and men, 30+ age;
-
Decision making influenced by: conscious consumption, quality over quantity, shoppers of small boutiques, trust, eco-friendly
Value proposition
-
Sustainable production;
-
Products directly from manufacturer;
-
Customization & branding;
-
High quality guarantee;
-
On time delivery;
What makes retailers and the end consumers choose Tumar?
This is the bigger product a retailer brand wants to sell to the end consumer.
Tumar provides that opportunity. So the goal is to clearly communicate the value and the business opporunity to become a partner through the website.
Global market trends
Antithesis of fast fashion
-
Demand for maximum comfort, reliability;
-
Clothes being treated as extension of our homes, amidst global turbulence;
Conscious consumerism
-
Demand geared towards causing less harm to the environment;
-
An alternative way of charitable giving;
-
Resale, second market, repurposing;
Slow fashion
-
Priority to the clothes that will be fashionable longer period of time;
-
People are willing to invest in higher quality items at a higher price point;
Circular design
-
Composting;
-
Plastic free;
-
Organic;
-
Giving a second life to items by reusing;
Who does Tumar compete with the given values and products?
See the sources here
The competitor analsysis helped to understand that Tumar shares very similar types of products, sustainability story and target audience.
Similarities
Knowing this would help later on, in designing the website and its content around the competitive advanatges of Tumar.
Competitive advantages
Similarities
-
Key value: All the brands highlight sustainability as one of their main strengths;
-
Brand story: All the brands use their social impact and story as their uniqueness;
-
Product range: All the brands offer both indoor and outdoor shoes;
-
Shop vs B2B: All the brand have online shop as their main website and add B2B CTAs as an additional feature;
-
Location: All the brands are located in the European countries with stable economy;
Define
-
Who are the key users who will be comparing Tumar with its competitors;
-
What business interests do they follow?
-
What questions do they ask when looking at Tumar as a potential partner for their business?
Business thinking of the target user:
Gains
-
If successful, a customer can establish a long-term business and get exclusive distributor rights for their country;
-
The product meets the global trend for responsible business and this could positively effect on the brand’s reputation;
Pains
-
Risky. Investing own money or raising investment money;
-
Expensive shipment cost;
-
Existing and future competition;
User persona
Empathy map
See the original here
See the original here
How does the user get to the company's website?
I mapped out the journey user takes in searching for a manufacturer, finding Tumar and interacting with the brand;
This helped to understand the role of the website in the bigger picture and the importance of the content showing:
-
clarity of information;
-
transparency on pricing, delivery, production and materials;
-
openness for long-term and trustful business partnership.
Key takeaways
Positioning: In contrary to the competitors, the website should be B2B oriented, by optimizing information about the delivery period, quality assurance, samples policy, international shipment, customization and order terms.
Brand message: Tell the story about TUMAR being a responsible manufacturer of modern, high quality and sustainable products for conscious lifestyle.
Visuals: The content should be supported by customized icons communicating care and sustainability imagery.
End consumer portrait: progressive young people, creative Millennials, conscious consumer. Everyday life in urban sustainable lifestyle;
Features: Effectively show product choices and product specifications, delivery period;
An optimized wholesale catalog with clear categories, product specifications and delivery information;
Feel: Communicating trust, professionalism, transparency;
I mapped out the site map based on the content the website would contain and placed each part according to the order of importance for the user.
Then I drew out the flow of key steps within the website in learning about the product, the business processes, customization and the brand itself.
Site map
User flow
Design
Wireframing
Identifying the key info and CTAs
Accoring to my contextual inquiry observation:
-
Users mainly stay at the top of the homepage and the navigation when looking for info;
-
So the Hero section has the main CTA and the secondary CTA;
-
The menu lists out all the B2B focused links;
-
Main pages: PRODUCTS, SHOP, ORDER, CUSTOMIZE, PARTNERSHIP, ABOUT US, SUSTAINABILITY pages
Content & visual language
Usability testing
I asked the users to complete the tasks based on what B2B customers frequently search for on the website:
-
Products and price list
-
Placing wholesale order
-
Customization and samples policy
-
Zero-waste policy
90%
6.6%
3.3%
of users were able to complete the tasks without any problem or slow down;
of users were able to complete the tasks, however it took them comparatively longer time. The challenge was to find in SAMPLES POLICY and CUSTOMIZATION features;
out of all users could not complete the task. The user could not find information about products. The user looked specifically for the word PRODUCTS while the prototype had the wording COLLECTION instead.
Final design
Based on the test findings, i iterated information hierarchy by:
-
Adding PRODUCTS on the menu and listing out all the shoe categories under it;
-
Provided detailed info on each product category by providing transparency about the materials, production, laboratory certificates, sizing system and product care;
-
Created a shortcut to Customization and Samples policy through the main CTA on the homepage;
-
Added Order Terms link containing delivery and shipment info on the main page;
Final thoughts
This was a real world project which involved communicating with the company stakeholders and the real B2B customers. The most interesting part was watching user behavior during contextual inquiry and understanding what type of information they seek for.
Competitive analysis provided useful insights as to how to differentiate Tumar and what unique features should be highlighted. As a result, the content story evolved around the brand being women-run business which produces sustainable shoes.
I worked with a photographer and a digital designer in visualizing the products and icons. The process took a team work and in ensuring that the brand messages are clearly communicated throughout the content elements.
