Baobab Clothing
Prototyping an e-commerce and content website for a clothing brand
original Desktop Site Design
Project Scope
Two and a half week time frame, working with a new-to-market clothing brand to research and design a DTC e-commerce platform that will also serve as a hub for men's lifestyle content
Team
Ramon Gamarra - Diego Mas Gonzalez
Tools
Google Forms - User Interviews - Microsoft Excel - Paper Prototyping - Sketch - Marvel - Invision
n=18 Male Survey Respondents
The Problem space
When customers have consistently positive experiences with brands, they become loyal customers. Additionally, customers who have positive experiences are likely to recommend new brands to friends, with word of mouth referrals being the most influential and effective form of acquiring new customers.
Baobab is a new-to-market brand.
How might we create an e-commerce enabled website that communicates trust and instills confidence in first-time customers, while providing existing customers with relevant lifestyle content in-between purchases.
n=18 Male Survey Respondents
Approach
We approached the study with four goals based on our client's needs from their website.
1. Showcase the Baobab polo shirt in a way that incites conversion.
The Baobab polo is a highly technical shirt, with patent-pending elements and thoughtful details throughout. We needed to showcase all these details in a digestible and visual way.
2. Provide a seamless checkout experience with a unique-to-brand feature.
The client wanted to include a unique element that would make the shirt seem "right around the corner" despite not having any physical stores.
3. Convey trust and instill confidence in new Baobab customers.
As a new-to-market brand, we needed to find out from users what makes a new brand seem trustworthy enough to go through with a purchase.
4. Provide content that engages Baobab customers in-between purchases.
In addition to selling the Baobab polo and expanding their own product lines, the brand wants to position itself as a content hub that will provide additional revenue streams in the form of affiliate product marketing and advertising.
n=18 Male Survey Responents
Initial Sketches
Checkout Sketches
What Usability Tests Revealed
Online shoppers don't want any surprises during checkout. The team designed and placed an interactive element during the checkout process that coordinated the zip code of the delivery address with weather channel data (via API) to predict the weather on the estimated day of delivery, highlighting the versatility of the Baobab polo shirt in all different climates and situations. While participants voiced enjoying the unique checkout element, the appearance of the graphic in between pages made them question if they had accidentally added another item to their cart without knowing. To address this confusion, we decided move the weather-related graphic to the purchase confirmation page, as to not confuse shoppers during the actual checkout process.
Additionally, many participants voiced their hesitations in reading brand-produced content, citing its seemingly self-serving nature. While the content hub was a requirement from the client, we produced mock lifestyle and travel-related content to remove it as far as possible from the brand and brand products.
Initial Challenges
Without any digital assets provided by the clothing company, the team had to come together to take product images as well as simulate editorial pieces for the content hub that were in line with brand positioning.
Additionally, the team had to research and design branding, including images and graphics, around the brand's "smart luxury" market position.
Moving to Mid-Fidelity
What USability Tests Revealed
Increasing the fidelity of the prototype shortened the speed at which participants were able to complete checkout. However, the placeholder images and text prompted participants to ask questions, an issue which would be addressed upon moving to high-fidelity.
Moving to High-Fidelity
Task Scenarios
1. Learn about the Baobab Polo and proceed through checkout
2. Locate and interact with branded content, looking at a brand ambassador's profile
3. Learn about the Baobab brand and where the products are made
Measuring Success
As an e-commerce website, the main success measurements pertain to conversion rates, traffic growth, and cart abandonment rates. Additional success metrics include number of pages per visit (especially content-related) as well as email capture. Many of these metrics are attainable through tools like Google Analytics, Alexa, and SimilarWeb.
Next Steps
1. Begin building out main navigation menu information to accommodate product line expansions
2. Per client's request, research and design interaction customer and design live chat experience for customers
3. Research and design custom size and fit tool that accommodates buyers shopping for themselves as well as for others
4. Being prototyping mobile site version of desktop site
5. Research and design e-gifting feature integration and user flows