User
Experience

arrow Medidoc    /    Baobab    /    Etsy
Project 2

Baobab

Overview

Building an E-commerce site for a start-up clothing company thats trust worthy for new potential customers. In addtion, developing a content hub to keep current users active in the website.

Methods

Competitive & Comparative Analysis, Surveys, User Interviews, Online Contextual Inquiries, Wireframes, Prototyping, Usability Testing

Team

Caitlin A., Ramon G.,
Diego M. G.

Role

User Testing, Prototyping, User Interface designer

“Word of mouth is the way I find most new brands
and more often, Instagram is the new word of mouth.”

Online Contextual Inquiries

We prompt users to browse the site, examine content, and checkout with a product. While talk us through what they were thinking. Our goal was to see how people interact with e-commerce websites, what they like, what they don’t like, and what current pain points are.

Allbirds

1. Main navigation menu is clear - not too many options. Downward arrows next to options indicate that a menu will drop down - that there are more options to choose from.
2. Constant live chat pop up hovers at bottom right, regardless of scrolling.
3. Image includes actionable buttons: “Shop Men” or “Shop Women”

allbirds screen

Casper

1. On the homepage and while shopping, Casper makes it very clear that it has free shipping, 100 night trial, and free return.
2. The slide-in of the shopping cart adds to the experience as an interactive element. Ability to edit the number of items in the cart and to add a promo code. Also cross selling items within the cart.
3. Upon clicking checkout in cart, customers are brought to a page where they can either checkout as a new memeber or with their account. Highlights warranty and trial period.

allbirds screen

Mr. Porter

1. Men’s content highlights new articles. Big image tiles draw people to specific pieces of content. Button to load more articles on located in a sidebar.

allbirds screen

Insights

1.They like seeing third-party checkout, such as PayPal. It makes them feel secure.
2. Free shipping and returns is a must for users. Zero commitment.
3. Large pictures when viewing products.

allbirds screen

“I rely on detailed ratings and reviews for my purchases. What’s most useful that 100 people have reviewed something and commented on the fit.”

Low Fidelity

Ones we got our research on what the users from our interviews and online contextual inquiries want to see from a trusted site. We developed our low-fi paper prototype based on the features that would make customers gain trustworthiness, feel condifent in buying and save.

Tasks

Purchase a Baobab Polo and Complete Checkout. Locate the “World of Baobab” Content Hub.Learn the story of the brand

Insights

1.No one wants surprises during checkout.
2. User-Generated content is in the eyes of the user; some users really enjoyed content pieces, while others saw them as more self-serving and promotional.
3. 4/4 Participants completed checkout and correctly identified content hubs.

baobab lofi

“I’m open to buying from new brands, but I don’t want to be a guinea pig.”

Mid Fidelity

Based on our test from the our paper prototype, we tweaked the checkout page and moved around sections inside the Content Page. The remaining pages we kept as is because users had no problem identifying what the page was.

Tasks

Purchase a Baobab Polo and Complete Checkout. Locate the “World of Baobab” Content Hub.Learn the story of the brand

Insights

1.Moving to mid-fidelity increased the speed at which people interacted with the site.
2. Utility confirmed.
3. Confusion arose from lack of images and placeholder text.
4. All four participants completed to checkout and correctly identified content hubs.

baobab midfi

“I like when brands tell you about the model in the photos - size, chest measurements, pants size. So you can use it as a comparison point.”

Hi Fidelity

Added images / assets to reduce confusion from mid-fi testing. Made action buttons consistent in color and size.

Tasks

Purchase a Baobab Polo and Complete Checkout. Locate the “World of Baobab” Content Hub.Learn the story of the brand

Insights

1.The navigation of the website because second nature due to proper styling and images placed. New participants didnt encounter and navigational problems.

Next Steps

1. What does a superior customer service experience look like?
2. What kind of unique size and fit guide can Baobab offer that eliminates any doubt?
3. What will content really look like, including email marketing content and trigger emails?
4. What do customers want from brands for gifting and what could e-gifting look like?
5. How would the desktop site translate to mobile site? Mobile app?

baobab hifi