Duration
8 weeks
Type
Volunteer
Role
UX/UI Designer
Overview
Nimbus Fragrance is a small business that provides customers with discount prices for popular luxury fragrances. I was tasked with redesigning the website to better match the company's brand identity as a reputable and customer-focused fragrance retailer.
The Problem
Nimbus Fragrance, as a luxury fragrance retailer, inherently faces the challenge of establishing credibility in a market prone to scams. The proposed redesign aims to address this by utilizing UX practices to promote the company's professionalism and build confidence among customers looking for discounted luxury scents.
User Research: Identifying the Problem
To begin the redesign, I first had to identify areas of improvement. To do so, I recruited 5 participants and conducted a usability test of the current website. I had each participant complete tasks related to navigating the site and hypothetically purchasing a product. After the test, I asked each participant questions about their experience using the website and their opinions about its overall design and effectiveness.
Issues with Organization
Lack of Filtering Options
-
Users expressed frustration with the absence of filtering features when searching for products.
-
Customers had to go through multiple pages of products, leading to a less efficient and time-consuming browsing experience.
Visual Clutter
-
Participants expressed discontent with the presence of visual clutter throughout the website.
-
Large blocks of text and lack of whitespace between product images were noted by participants as "overwhelming."
These findings highlighted the need for a more streamlined and organized website design and flow.
Current Catalog Page
Issues with Branding & Visual Identity
Outdated Font and Design Choices:
-
Participants noted that the font and design choices felt outdated, impacting the overall visual appeal.
-
Recommendations were made to update these elements to look more modern and professional.
Simplistic Homepage:
-
Feedback indicated that the homepage was perceived as too simplistic. Some elements were described as "pointless."
Untrustworthy Appearance:
-
Participants expressed concerns about the website appearing as "sketchy" due to the font choices mentioned previously.
-
Participants found it difficult to locate information verifying the company's credibility.
Overall, these perceptions identified a need to improve the overall trustworthiness of the brand.
Current Homepage
Market Research
In addition to user research, I analyzed a handful of popular business (both large and small) selling fragrances and related products such as Amazon, Sephora, Ulta, FragranceNet, etc., to understand how these companies approach organization, credibility and customer engagement.
Common Design Conventions:
Identified common design elements including straightforward navigation, prominent search functionality, and streamlined checkout processes.
Increasing Reliability:
Leveraged insights from successful small business websites, emphasizing the importance of an engaging homepage, organized menu structures, and customer testimonials to instill trust.
Enhancing Customer Engagement:
Drew inspiration from industry leaders like Sephora, proposing features such as personalized recommendations to enhance product discovery and user engagement.
Ideation
During the ideation phase, I consulted my client and utilized my research findings to produce sketches of possible website layouts and features. One significant insight from the user research was the need for improved product discovery, prompting me to brainstorm features that would enhance the overall browsing experience. Leveraging market research findings, I drew inspiration from successful ecommerce platforms and integrated these insights into the ideation process.
Wireframing
After sketching, I translated my ideas into wireframes that directly addressed issues identified earlier during the research process. Following the completion of the wireframes, I presented them to my client in order to gain feedback and approval of the design before moving forward with the design process.
Homepage
-
The layout of the homepage was reformatted to include more whitespace and exclude any unnecessary information that was present in the original design.
-
To give the homepage a solid purpose and further build the company's reputable identity, I suggested the following features in order to help boost customer engagement and make the browsing experience more efficient:
Best Sellers Section: Advertise popular products that customers are more likely to buy.
Popular Collections Section: Organize products based on popular brands that customers are more likely to search for.
Company Recommendations Section: Recommend fragrances based on creative prompts (ex. date night, seasonal scents, etc.)
Product Searching
-
To address the issues with inefficient browsing, I added a variety of filtering options to the left of the product catalog page. Options include filtering by brand, price, fragrance notes and availability.
Product Page
-
The layout for the individual product page was kept mostly the same, however, I suggested the inclusion of customer reviews on each product to increase the company's trustworthiness as a luxury brand reseller.
-
I also designated separate tabs for details about the product to help decrease the visual overload caused by the lengthy descriptions in the old design.
Shopping Cart
-
Following a common trend in popular e-commerce websites, I changed the cart menu from being its own separate page to a sidebar menu. This allows customers to more efficiently manage their purchases on the website.
Branding & Aesthetics
To address the identified issues and elevate the overall aesthetics and branding of the website, I applied the following changes to a Figma prototype of the design:
Color Scheme
-
Incorporated the company's original colors (gold, black, and white) in a way that better aligned with contemporary design trends.
Typography
-
Selected a typography style that not only improved readability but also better reflected the company's identity as a luxury brand discount retailer, contributing to a cleaner and more professional appearance overall.
User Testing
After completing the Figma prototype, I recruited the same 5 participants and conducted a usability test of the new design in order to compare their experiences using the original website with their experiences using the redesigned website. Because my prototype was limited in the interactions it could include, I had each participant complete basic navigational tasks and focused more on asking them questions regarding how they felt about this design in comparison to the old one. Through these tests, I was able to conclude the following:
Enhanced Visual Appeal
Before
After
Participants noted that the new design looked more professional and clean compared to the old design. They expressed satisfaction with the new font and color choices. When asked which design they preferred aesthetically, all 5 participants preferred the new design.
Streamlined Navigation Experience
Before
After
Participants described the new catalog page as "less cluttered" and thought that it would be easier to browse products due to the addition of the filtering feature. Although they liked the inclusion of a filtering feature, some participants noted that there should be a wider range of filters. For example, one participant suggested the ability to filter by the type and size of the fragrance bottle.
Participants also found the updated shopping cart feature to be familiar and more helpful towards streamlining their shopping experience.
Customer Trust & Brand Perception
Before
After
Participants noted an enhanced sense of trust and professionalism in the redesigned website, portraying the company as more customer-focused, organized, and reputable. Participants attributed this to the incorporation of customer reviews, personalized recommendations, and the improved visual aesthetics on the website.
What's Next?
Having verified the redesign through testing, the next step is implementation. The client is currently in the process of executing the design concept on their Shopify platform.
Upon the website's launch, I hope to collaborate with the client to gather success metrics and measure the long-term impact of the new design on their business.
Website coming soon! View the Figma prototype below:
Takeaways & Reflection
-
Through this redesign, I not only was able to apply my design knowledge and skills to a real-world product, but I was also able to gain valuable insights into the intricacies of running a small business. I learned about the importance of optics, such as how visual elements contribute to brand perception. Overall, I realized how crucial good UX practices are to shaping how a business is perceived and trusted by its customers.
-
This project also significantly expanded my ability to work with clients. Effective communication and collaboration were key factors in successfully implementing the redesign. Learning to interpret client feedback, address concerns, and align design decisions with business goals were crucial aspects of this collaborative process.