Byrd's Cookies website redesign
Team Member：Hongyuan Wang, Huiren Liu, Ying Lu, Yuan Meng
This project aims to optimize the information architecture of Byrd’s Cookies' website to enhance usability, streamline the shopping process, and improve product information clarity. Currently, users face several challenges when browsing the site, such as confusing navigation, complex checkout steps, inefficient search and filtering, and a lack of interactive product displays. These issues lead to frustration and negatively impact the shopping experience. By refining the website layout, improving categorization, and increasing interactivity, we aim to create a more intuitive and seamless online shopping experience for both users and the brand.
Original Website
The Byrd’s Cookies website currently faces several usability challenges that negatively impact the shopping experience. Users often encounter difficulties navigating the site, with unclear product categorization, inefficient search and filtering options, and a complex checkout process that leads to frustration. The lack of interactive promotional content reduces user engagement, while static product displays and an underdeveloped review section limit trust and informed decision-making. These shortcomings create a disjointed browsing experience, making it harder for customers to find products efficiently and ultimately affecting satisfaction and conversion rates.
Problem Define
Users of the Byrd's Cookies website encounter several difficulties when they are browsing, choosing, and buying products. These difficulties include confusing layouts and directions, complicated processes for paying, promotional information is not interactive, difficult shopping steps, comments feature is sketchy, lack of interactivity in product displays, unclear grouping of products, and not fully effective search and filtering. These problems cause users to have misunderstandings about how to use the website and its information, leading to less satisfaction with their experience.
Persona
Improved Navigation Sitemap
In accordance with the results of cardsorting, we modify the navigation sitemap and re-categorise the products to make them concise and easy to understand.
A/B Testing
Following the card sorting exercise and the creation of a revised navigation bar, we designed two visual layout variations (A and B) to test different user experiences. To assess their effectiveness, we conducted A/B testing with 20 participants, collecting feedback on usability, clarity, and overall preference. This approach allowed us to identify which design most effectively improves navigation, engagement, and the shopping experience on the Byrd’s Cookies website.
A/B Testing Insights
After completing A/B testing, we analyzed the data and visualized the results using a bar chart and radar chart. The findings indicate a strong user preference for Version B. In the Participant Preference Distribution Bar Chart, Version B consistently outperforms Version A across key aspects such as the hero section, banner, product display, and reviews. Furthermore, Version B stands out in terms of visual appeal and overall attractiveness, making it the preferred design among participants.
Radar charts were utilized to compare Version A and Version B across four key factors: usability, information presentation, attractiveness, and visual appeal. The analysis revealed that Version B outperformed in three categories, while information presentation scored lower. This comparison helped us pinpoint effective design elements and areas needing improvement. Based on these insights, we combined the strengths of both versions to develop the final optimized design.
The result of AB testing
Radar charts were utilized to compare Version A and Version B across four key factors: usability, information presentation, attractiveness, and visual appeal. The analysis revealed that Version B outperformed in three categories, while information presentation scored lower. This comparison helped us pinpoint effective design elements and areas needing improvement. Based on these insights, we combined the strengths of both versions to develop the final optimized design.
Final Design
