FEZ Clothing & Home Goods Boutique
Creating a modern online presence for an eclectic local boutique
Timeline
Sep - Oct 2022 | 2 weeks
Tools
Figma, Optimal Workshop, Maze, Pen & Paper
Platform
Desktop website redesign. Responsive mobile website for a future iteration.
Note
This was a spec project with no involvement from the actual business.
Roles & Responsibilities
I was the lead and solo UX/UI designer, responsible for researching, synthesizing data, defining problems, ideating concepts, wireframing, prototyping, iterating based on testing, and delivering final designs.
Methods
Client research, user interviews, affinity mapping, usability testing, competitive analysis, heuristic evaluation, user persona, problem statements, user flows, site map, card sorting, sketches, style guide, wireframes, mid-fi prototyping, usability testing, hi-fi prototyping
FEZ – A Place for the Modern Bohemian
FEZ is a small brick-and-mortar boutique located in downtown Mill Valley, California, about 20 minutes north of San Francisco. It opened in October 2020 in the midst of the pandemic, and it was built around the owners’ love of art, travel, and music.
To describe FEZ as eclectic would be an understatement. FEZ sells a mix of new and vintage apparel, accessories, art and artifacts from around the world, unique books, and other “uncommon curiosities”. It’s a little bit hippie, a bit bohemian, it’s got vintage, and it’s got some spirituality tossed in for good measure as well. At the same time, the products they carry also cater to regular, everyday folks with fairly mainstream tastes.
The Challenge
While FEZ the physical store is a joy to explore in person, their online presence is a completely different story. Devoid of the personality and style that makes FEZ unique, customers struggle to understand what the store is actually selling from their main page.
A lack of clear navigation and content organization add another layer of confusion that compounds the likelihood of customers leaving the website before even starting their shopping experience.
Overall, FEZ’s online presence feels like an afterthought that was haphazardly put together.
The Research Process
User Interviews
In order to understand how to improve FEZ’s existing website, I needed to first understand what people enjoy most about shopping at their physical store, and more broadly, what people enjoy most about going to physical stores in general (in the context of apparel and home goods). Then, I needed to understand how people shop online right now, and the benefits and pain points involved there.
To kick things off, I sent out a screener survey to narrow down a pool of potential interviewees. Out of 13 total survey responses, I conducted 4 user interviews. There was a lot of feedback collected, and the interviewees had a lot to say about their online offline shopping habits.
Key Insights
Usability Testing
The key to understanding how to improve the existing website is to witness firsthand how it’s currently failing customers. To do this, I asked 4 users to complete a simple task on the website:
Find a men’s casual shirt between $100-$200 that is on sale. Add this item to your cart.
The results were eye-opening:
4/4 users expressed confusion and frustration regarding where to even start from the Home Page. Every user expected to see some sort of main navigation. Some even tried to click the logo thinking maybe it was a hamburger menu. Eventually, most landed on the small Shop All button in the header.
Severity Rating: 34/4 users had difficulty navigating and finding the correct sub-categories and filters on the Shop Page. There were too many sub-categories (20) and many of them only had one or two products listed. There were also too many filters listed (18) with many being completely nonsensical (automated meta-data).
Severity Rating: 44/4 users found the Product Detail page problematic and missing relevant information. Photos that did not reflect the size or color that the user selected. Minimal or nonexistent information about the product. Missing materials, dimensions, care, etc. Users were rightfully upset: “What am I even buying??”
Severity Rating: 43/4 expressed confusion about the overall look of the website. Inconsistent fonts, styling, and negative space. Lack of clear purpose and organization. Confusing Home Page with no main goal or call to action.
Severity Rating: 3
Heuristic Evaluation
In a detailed evaluation of the existing website, I found that it failed 7/10 usability heuristics for UI design::
Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards
Flexibility and efficiency of use
Aesthetic and minimalist design
Help and documentation
While I was not able to resolve every single issue within the scope of this project, there were some critical violations that had to be addressed in order to have a functioning website as a baseline. These include a working and intuitive navigation, clear and consistent product content, and the removal of broken or hostile user experiences in the website.
Competitive Analysis
Understanding the competition and finding inspiration in other great designs was an important step in redesigning the FEZ website. Users spend most of their time on digital products other than the ones we create, and their experiences with other products set their expectations. By keeping up-to-date with the latest industry standards, I can reduce the user’s cognitive load and help them intuitively understand how to navigate the website. In addition, it’s always a good idea to see what types of features competitors have integrated into their products.
For this exercise, I looked at 3 competing websites with similar concepts: Therapy Stores, Urban Outfitters, and Etsy. I wanted to research stores that were both smaller and local, as well as larger corporate brands to get a wider range of possibilities.
Extensive product details
Clear navigation and organization
Multiple delivery options
User Persona & Problem Prioritization
With the insights gained from research, I wanted to continue keeping the user at top of mind throughout the project by creating a realistic persona and drilling down into what their main needs and behaviors are. This would also help in prioritizing the problems I wanted to address first.
Over and over again during the research phase, I saw that organization and categorization were two of the most important factors in helping users find what they need, whether they were shopping in store or online. And beyond that, users directly tied how well-organized a store was to whether or not they would simply turn around and leave. Clearly this was the most critical component of improving the FEZ website.
Second, every single user I spoke to commented on how touching/feeling/trying on the product before making a purchase was perhaps the most important benefit of shopping in-person. Taken in the context of online shopping, this can be translated into the importance of product details and how every bit of additional knowledge, imagery, and context provided to the user can represent the additional trust and confidence needed to press the Purchase button.
Finally, a major detractor I came across during the research phase regarding online shopping was the necessity of a good shipping and return policy. When a shopper is on the fence about purchasing a product, the last criteria that could push them over the edge was a flexible (and ideally free) shipping and return policy.
Card Sort
From both the user research and the competitive analysis, it was clear that rethinking the information architecture of the website should be at the top of the to-do list. So what kind of organization and categorization do users expect exactly?
Especially with a store like FEZ where they sell such a wide variety of eclectic products, the question became even more important to understand. This is where a card sort could help.
After documenting a good sample (40) of the different types of products sold on the FEZ website, I had 20 users complete an open card sort:
60% of participants grouped the sample set of products into 5 or fewer categories.
75% of participants grouped them into 8 or fewer categories.
Based on the Best Merge Method Dendrogram, 80% of participants agreed on 7 groupings.
Using these insights, I could start to craft a potential list of primary categories and even possible secondary categories:
Apparel → Tops, Bottoms, Outerwear
Home Decor → Furniture, Textiles, Antiques
Accessories → Hats, Belts
Jewelry
The Design Process
New Site Map:
With the insights gained from research, I wanted to continue keeping the user at top of mind throughout the project by creating a realistic persona and drilling down into what their main needs and behaviors are. This would also help in prioritizing the problems I wanted to address first.To start brainstorming what the new website should look like, the first step was to understand how to organize and manage the information from the homepage. Taking the results from the card sort, I created a new site map with primary categories and secondary categories that were much more concise and understandable.
I also created an About Page to store all the business details and removed them from the existing clutter of the homepage.
User Flows
I created 3 main user flows to visualize how navigating through the new website would work. During this process, I really began to think about how to address the 3 main problems I discovered during the research phase. Specifically, I thought about how to tackle the shipping and returns component of the users’ needs.
While reorganizing the IA of the website and adding more product details were certainly feasible, forcing FEZ to offer free shipping and returns was definitely not in the business’ best interest. We’re talking about a small local boutique after all, not Amazon.
One advantage local stores have is that their main customer base is also local. What if I addressed this issue by offering free in-store pickup and returns instead? This could potentially combine all the benefits of online shopping while still giving shoppers the option of saving money and reducing hassle. This also costs FEZ nothing.
With a potential solution in mind, I created the 3 main user flows:
Browse a category and choose a product based on filtered results. Peruse the product details and reviews. Favorite the product and add it to your cart.
Begin the checkout process and proceed to enter pick-up/shipping options. Place the order and view the confirmation.
Find the store’s About Page and browse their operating hours, location, and history.
This immediately helped me visualize how a shopper would navigate through the new website intuitively and efficiently. It also mapped out the potential features that would be added or improved.
Sketches
I then translated all of these disparate ideas into more cohesive sketches. While there were some features and flows that had to exist, I could certainly play around with an unlimited number of potential layouts and styles.
Homepage concepts with different visual layouts. Important pieces to keep in mind - clear primary CTAs, prominent navigation, secondary CTAs for exploration.
Shopping concepts. How to access relevant filters, product results with quick access details, product details with clear information, reviews.
Checkout flow concepts with the pick-up option prominently displayed.
Digital Wireframes
From the array of sketches I created, I narrowed them down to the concepts that would provide users with the cleanest and most efficient experience, while still keeping the personality and style of FEZ in the back of my mind. Most importantly, I incorporated the features, flows, and functionality that I developed and prioritized throughout the research and ideation phases.
Usability Testing (Prototype)
With the mid-fi prototype, I wanted to validate whether or not I was close to creating a better online experience for FEZ shoppers. To do so, I designed an unmoderated usability test covering 3 primary tasks:
Find a T-shirt in size large between $100-$200. Add it to your bag.
Proceed to checkout with the T-shirt and set the order for pickup at the physical store location. Complete the purchase.
Starting from the Home Page, find the store operating hours.
A total of 21 tests were administered, and I gained quite a bit of insight, although not all related to the actual design. Overall, over 90% of the users completed the tasks and the comments I received were overwhelmingly positive compared to the initial usability test on the existing website.
“Really clean design. I love your checkout flow, super strong and intuitive! Great job!”
“The site was really easy to navigate! Recognizable flow of tasks. I liked the progress bar you have in the checkout process.”
“Everything was very straightforward. The filters and product results page were really easy to understand. Good amount of product detail.”
There were, however, a few problems I discovered once I dug deeper into the usability test data.
While the correct flow in the task was to use the filters to find the correct T-shirt, I noticed that more than half the users (13/21) skipped the filter completely and just scanned the T-shirts page to find the item. I believe a low number of products shown in the prototype contributed to this issue (why would I filter when I could just look through 9 items quickly).
10/21 users did not select pickup as the method of delivery even though the task asked them to. It’s unclear if this was due to users not reading the prompt clearly or a design issue that caused them to miss the selection. Let’s assume the latter just to be safe.
While the first problem could be attributed to a prototyping issue, the second problem was potentially a serious design flaw that could prevent users from finding the store pickup option completely. This was definitely something that needed to be addressed in following iteration.
Hi-Fi Prototype
I used the learnings gained from the usability test results to iterate to a higher-fi prototype. In this prototype, I also incorporated a simple style guide to better reflect the color, personality, and diverse products sold at FEZ. I tweaked the header layout for a cleaner and more modern look, and added product images from FEZ to give it a more realistic and professional appearance.
Most importantly, I changed the design of the checkout flow in order to make the shipping/pickup selection much more obvious so users wouldn’t miss it inadvertently.
Product details page
Product browsing and filtering
Reflection & Next Steps
Next Steps
Because of the 2-week time constraint, I was unable to flesh out several features beyond the few main user flows that were critical. With additional time, I have several goals I would like to accomplish:
Ensure that this is a responsive website by creating mobile wireframes and prototypes.
Build out several more product categories and filters.
Create a Favorites Section to save a user’s favorite products.
Create a Save For Later section so users can save products already in their bag for purchase later.
Recommend additional photography of all products, including very high-quality zoomable images to emphasize material and build.
Spend more time researching color and typography choices.
Examine accessibility more to ensure the website is usable for everyone.
Reflection
This was my first full UX design project where I completed the entire process from research all the way through to delivering a hi-fi prototype. I’m very proud of the work I produced - utilizing all the different research and data synthesis methods to inform my choices and decisions during the ideation phase. Doing all of this within a 2-week sprint was not easy, especially when I wanted to make sure the final design was in a visually presentable state.
I know there is much more to do with this project. My top priority is making sure that this is a responsive website that can conform to mobile constraints. I will be updating the wireframes to reflect this in the future. If I could redo this project from scratch, I definitely would have started with the mobile design first and then moved to desktop.