.png)
.png)
Role: UX/UI Designer, UX Researcher
Deliverables: Ecommerce Website MVP, Branding
Timeline: 150 hours
Tools: Figma, Optimal Workshop, Miro, Whimsical
My DesignLab mentor acted as my stakeholder. By explicating my decisions and designs to him, I was able to ensure the product was fulfilling our success metrics and stakeholder expectations.
• Create cohesive branding assets: name, logo, and style
• Site design that encourages searching and purchasing
• Elevated customer service experience to rival in-store assistance
In the 21st century, (and especially since the pandemic) selling online is a key factor in business profitability. Venturo customers were already complaining about not being able to find items in store in their size and expressed a desire for a website to supplement their in-store experience.
The company stakeholders agreed that e-commerce expansion needed to be prioritized. Their main goals were to improve customer satisfaction, retention, and attract new customers as well.
Ecommerce for apparel is rapidly increasing YoY. This growth is especially notable in the outdoor apparel segment. Not only is this a good investment for Venturo, industry expected growth means the timing is perfect.
Studies of most successful ecommerce sites identified strong product categories and search functionality as key components.
For this research I focused on the content, organization, and site flows, as well as the way they craft their brand identity through the types of imagery, header text, and called out features on the sites. I studied established outdoor apparel companies: Patagonia, The North Face, and Columbia.
Through preliminary research, I knew how brands thought they should present themselves. Now it was time to talk to customers to learn if the brand cultivated experience aligned with what customers are actually looking for.
Due to the pandemic, I conducted the interviews over Zoom. I talked to two Americans, and two international participants.
What makes a shopping experience positive and instills confidence to purchase?
What struggles do customers encounter? How do they overcome these issues?
What are their shopping behaviors? i.e. browsing vs. searching for something specific? And does this behavior change with context?
All participants valued lots of images with good lighting. +1 for multiple models/sizes shown
2 out of 4 participants heavily weighted free/expedited shipping, and flexible return policies.
3 out of 4 participants mentioned weighing product price, in relation to expected product quality.
2 out of 4 participants relied on word of mouth, and in-store experience to establish trust.
All participants appreciated resonant brand mission, sustainable production, or supporting small business.
Visiting or seeing a physical location significantly aided in reputability for 3 out of 4 participants.
I was starting to see trends emerging through the interviews, and I grouped the most common goals, pain points, and behaviors to spot patterns. I organized quotes, and opinions voiced by my interview participants to see how commonly certain viewpoints were expressed.
.png)
From here on out, the questions would be: “would this content or structural decision make sense to Haley?” “how can I design this fore-fronting her goals and needs, or how would she expect this feature to work?”
THINKS
FEELS
SAYS
DOES
It was time to begin thinking about how to organize and structure the content on the website. Retail is generally standardized, but I wanted to ensure that products were grouped in the way that makes sense to users, that specific items were discoverable, and that we were designing the necessary screens for the MVP that users would need to complete tasks.
The first step was to validate or re-structure the site information architecture.
Because of the split results in the card sort and the specialty nature of the products, I decided that product categories should be as granular as possible to help users find what they were looking for through the mega menu.
.png)
The user flows were from Haley’s perspective. Why would she be visiting this site? And how would she navigate around the site in order to fulfill her mission?
.png)
It was finally time to start the design process!
First off: branding. I knew I wanted to use earthy, muted tones to convey a natural, and calm demeanor. The brand identity was to be simple, timeless, and functional. I played around with several different concepts for the branding.
With a finalized logo, it was time to nail out the rest of the visual aesthetics.
.png)
I started the design process by brainstorming as many different ideas and directions as I could. After A/B testing with a few people, I distilled my ideas to create wireframes. I annotated and presented the wireframes to my stakeholder explaining how the design functioned, and how it would meet our client's success metrics.
After additional feedback, I used the wireframes to designed the mid-fidelity prototype.
I finally had a mid-fidelity prototype created. I made sure to incorporate a lot of lifestyle imagery, as for ecommerce it's helpful for people to imagine themselves doing the things and using the products as the models are, or how they would like to.
In terms of product imagery, I wasn't able to find a lot of uniform stock imagery, so I used some existing product imagery from various retailers. None of the product images belong to me, and I do not claim to own or take credit for them.
I wanted to keep product images themselves very clean and uniform. This clientele is looking for a very specific type of item generally, and I want to ensure the site is functional first.
The layout of the filters and sorting is similar to conventional ecommerce sites - Jakob's law states that users are more at ease and willing to explore in design systems that seem familiar already. I wanted to lean into that.
On the homepage, I have a floating button that can triage any customer support needs. CS can also be found in the footer, on the product pages, and wherever else it's expected, but I wanted to make sure users don't have to go far to find help.
This is important because Venturo's priority is top-tier CS, and ensuring users aren't sacrificing by online shopping rather than in-store shopping.
Here is how the sitemap translated to the design. Products are broken out quite granularly, so users don't have to sift through a bunch of irrelevant products if they're looking for something specific.
If they're just browsing, shopping through a collection or promoted products list will provide a great mix of different types of products.
With my first version prototype created, it was time to test the product. I began working on my usability test plan. The goal was to ensure people could complete our 'success task': make a purchase. For supplemental actions, I also wanted to test the specialist consultation flow, as it isn't a standard feature.
"You want to buy your sister a white hooded jacket. Look around for one to purchase, she is a size medium."
"You’re going on a winter hike soon, and you want to ensure you will have the gear that you need, especially footwear. Look around and find what you need."
"There are so many options, you decide to seek assistance. Book a specialist consultation to help you determine the right hiking boots for your needs."
I recruited 5 usability test participants and conducted moderated usability tests. Due to the pandemic, I conducted usability tests via Zoom, using the V1 prototype.
As there are a multitude of ways to complete the tasks, I mapped out a few possible paths and used these breadcrumbs as a guide for additional needed screens. Here's a glimpse of the minimum viable product scope in terms of screens:
3 out of 5 participants expressed trouble discovering scrolling on the landing page due to the height of the hero image.
All 5 participants began scenario 1 by using the mega menu and all participants utilized the filter feature for gender, size, color, body fit, and/or activity.
3 out of 5 participants used the ‘Shop by Activity’ section on the homepage. 2 participants used the mega-menu: 1 participant went to the women’s shoes section in the mega menu, 1 participant navigated to ‘hiking’ via the mega-menu.
4 out of 5 participants expressed a desire for alternate assistance; email or chat-box in addition to the specialist consultation; or surprise about what the specialist consultation flow entailed.
None of the participants utilized the search bar for any of the tasks.
Based on the data from the usability tests I prioritized revisions for V2. Obstacles encountered often were top priority. I divided up revisions into two categories: minor UI adjustments (sizing, nomenclature, etc) and experience changes -- larger adjustments to the flow itself, or page structures that had impeded usability in V1.
For this project, sweeping revision were focused on the customer service flow: lowering the stakes to engage with it, and making it more discoverable from all pages.
I documented the major changes to share with stakeholders along with rationale for how the V2 solution addressed the original design issues.
With clothes shopping and e-commerce being so ubiquitous -- especially in the pandemic age, I realized how paradoxically variable people's online shopping behavior is. For example, I was shocked during usability testing, when none of the participants used the search bar to search for any of the tasks. As a heavy search bar user myself, I assumed that others might do similarly -- you know what they say about assumptions though.
–––––
As my first full UX project, I undertook the full UX process for the first time. Through doing so, I have gained significant confidence -- I freaking did it!
I'm proud of the amount of research, thought, and detail I put into this project. I also gained a great deal of humility -- interviewing, crafting relevant, non-leading questions, following the data, but tailoring to the participant is a nuanced and high pressured skill that I am looking forward to continue to better.
.png){kind=small}
.png)
.png)
.png)
.png)
.png)