Bridget’s Irish Cottage
About the Project
Bridget’s Irish Cottage is online destination for an authentic Irish shopping experience that have collection of exquisite jewelry, unique clothing, and gifts, allowing to express love for charm and rich cultural heritage of Ireland.
As a UX Designer tasked with redesigning outdated website, my role was crucial in enhancing the overall user experience. I was responsible for conducting thorough user research, identifying pain points in the current design, and creating innovative solutions to improve usability and engagement.
UX/UI design
Study Case
Problems
Users struggle on Bridget’s Irish Cottage website due to a lack of functionality and indicators, impacting their overall experience.
The website lacks visual hierarchy, personalization features, and intuitive categories, creating complexity and confusion for users in finding relevant products.
Users lack comprehensive product information, causing uncertainty about the brand's quality and reliability and contributing to decision-making difficulties.
A complex checkout process creates friction and frustration for users, introducing obstacles and additional steps that inconvenience the purchase
legacy homepage
Solutions
Implement clear navigation and a visible menu structure to guide users seamlessly through the website.
Optimize the website with a comprehensive hierarchy, personalized features, and intuitive navigation to enhance user experience.
Provide detailed product information, high-quality images, and customer reviews to empower users with the information needed to make confident decisions.
Streamline the checkout experience by eliminating unnecessary steps, introducing faster checkout options, and offering clear instructions.
updated homepage
UX Design Process
In the process of redesigning Bridget’s Irish Cottage website, I employed a structured approach based on the four-stages of the Double Diamond design model.
I started by meticulously assessing the current website's functionality, applying Jakob Nielsen's 10 principles for interaction design. The examination unveiled issues—Bridget’s Irish Cottage site was confusing and overwhelming. Insufficient product information, poor navigation and missing features were identified as key challenges.
Heuristic Evaluation
Discover
1.1
Consistency & Standards
The top navigation bar lacks the logo and “favorite” feature. The various sizes of items, numerous empty spaces on the pages, and unstructured, misaligned filters and products make the shopping process challenging .
Flexibility & Efficiency of Use
The website lacks information about the majority of the products and some pages are not found. Users don’t have the possibility to choose the correct size for jewelry and view it properly due to the low quality of the photo.
Recognition Rather Than Recall
Many pages lack sufficient information, photos or icons, making the user journey less recognizable and challenging to remember.
Error Prevention
The website doesn't help users recognize errors and allows inputting the wrong information about shipping information.
Discover
1.2
User Research
To identify specific issues related to user experience and user interface, I performed a usability test involving interviews with 6 individuals aged 20-40 who frequently make online clothing and jewelry purchases. The insights obtained were organized through Affinity Mapping, categorizing them into two main groups – users' frustrations and preferences.
Product details
Users want detailed product information to make well-informed purchase decisions.
Robust filters
Users want a robust filtering mechanism to efficiently tailor their shopping page searches.
Intuitive navigation
Users want an effortlessly intuitive website navigation experience to enhance their overall shopping journey.
Interactive product visualization
Users want to interact with the product, exploring high-quality imagery and rotating products in a 3D.
User-centric checkout
Users desire a streamlined and user-friendly checkout process for a seamless and efficient shopping experience.
Customer reviews
Users want to rely on customer reviews and product ratings for added confidence in their choices.
Discover
1.3
I conducted a Element Analysis with direct competitors, such as “The Irish Store” and “Irish Shop”, focusing on user experience elements. My objective was to unveil their diverse offerings, scrutinize the encompassed categories, and identify unique features. I delved into their homepages, examined content inclusions, and pinpointed strengths. This initiative was crucial, as Bridget’s Irish Cottage lacked essential elements like a distinctive logo, prominent features, and well-categorized categories.
Competitive Analysis
The top navigation bar features a range of categories, the company logo, a search bar, my account, currency($), and a shopping cart.
Highlight their top four best-selling items, showcasing popular choices to simplify the decision-making process for customers.
They empower users to explore shopping through four primary categories, streamlining the shopping experience.
The hero banner captures users' attention by offering a compelling discount.
Provide a myriad of customer-centric advantages, such as complimentary delivery, free returns, and a commitment to ensuring 100% secure payment transactions.
Discover
1.4
Comparative Analysis
To gain a deeper market understanding, I conducted a comparative analysis of three companies: Macy’s, Tiffany & Co, and Etsy. While operating in distinct markets, these companies offer similar products. The Feature Inventory focused on critical elements on the Home and Product pages, crucial for enhancing user experiences on the Bridget’s Irish Cottage website, which lacked all those highlighted features.
Search Bar
Top Navigation Categories
Account, Save, Cart
Filters
Subcategories by images
Breadcrumb navigation
Adding a personalization
Option “Buy Now”
Size Guide
Define
2.1
To guide design decisions, I crafted a young user persona representing the traits, goals, and frustrations of the target audience.
User Persona
2.2
Define
Journey Mapping
Subsequently, I developed Tina’s journey – a hypothetical scenario depicting her motivations and emotions from the desire to buy new Irish earrings for a party online to completing the purchase process.
2.3
Define
Problem Statement & HMW
Identified frustrations and preferences were distilled into solid problem statements, and insights were reframed into opportunity areas using the "how might we" approach.
Tina Murphy needs detailed and efficient product information because she wants to purchase good-quality Irish items that align with her cultural sense and fashion style.
How might we provide a intuitive navigation structure for Tina seeking Irish products?
How might we enhance the search functionality for easily finding the Tina’s desired product on the website?
How might we provide enough product information to encourage Tina to make confident purchase decisions?
How might we simplify the checkout process to make it easier and quicker for Tina?
Design
3.1
Mid-fidelity prototype
Then I translated brainstormed ideas into tangible form through rough sketches, incorporating key features into the page layouts. Subsequently, moved on to creating mid-fidelity prototypes that provide a visual outline of the layout and functionality without delving into finer details, all while following the user flow.
Design
3.2.1
Usability Test - Quantitive Data
I conducted usability testing with five participants, focusing on their ability to accomplish desired objectives. All testers successfully navigated through tasks like finding products in the top navigation bar, applying filters for search refinement, and completing the purchase. However, certain elements on home and product pages were identified as confusing during the test.
homepage
Average duration
40.4s
Users who misclicked
80%
The most perplexing element on the home screen was a sizable rectangle featuring an icon intended to represent the primary photo. As a result, three out of four users clicked on it. This led to confusion in user navigation.
product page
Average duration
26.8 s
Users who misclicked
25%
On the product page, users misclicked on the photo icon, the size form input, and the dropdown navigation menu; they wanted to interact with the product, checking available sizes and information, forgetting the main goal of following instructions and completing the purchase.
Design
3.2.2
Usability Test - Qualitative data
To gather qualitative data, I conducted interviews with participants, delving deeper into the challenges they encountered and extracting valuable insights for further improvement.
Design
3.2.3
Usability Test - Improvements
In response to received feedback, I identified several opportunities for enhancing the mid-fidelity prototype.
Enhance the user experience by providing a more detailed product description immediately following the product name.
01
Show how many items are available in specific category and after applying filters showcase how many items left.
02
03
Change the location in the description of product: name, rating, description and price.
04
Establish a clear information hierarchy within the filter system for improved user experience.
Deliver
4.1
Color & Typography
To infuse visual interest and balance, I strategically combined serif and sans-serif fonts, aiming to improve readability and add dynamic flair. Opting for a minimalist aesthetic, I chose a color palette consisting solely of white and black, elevating the website's visual appeal.
Deliver
4.2
Hi-Fidelity Prototype
Finally, I blended together all refined elements from the design process to create a stylish and visually captivating website. The outcome included user-friendly navigation, a well-defined information hierarchy, and effective usability, in accordance with the goals outlined during the initial stages of the redesign.
updated homepage
updated homepage
updated shopping bag
updated catalog page
Reflections
Overcoming the challenge of redesigning a website without established branding and functionality presented a valuable learning experience. Prioritizing e-commerce features based on user preferences gathered from interviews was crucial for me for incorporating meaningful and relevant elements into the redesign.
Recognizing the website's lack of hierarchy in navigation and overall structure, I delved into building information architecture from scratch.
This project served as a significant learning opportunity, especially in designing with the goal of proving that a website featuring Irish heritage in clothing and jewelry can be both stylish and fashionable. Adding a personal and empathetic touch to the project contributed to its overall success.
Next Steps
Establish a robust social media presence and seamlessly integrate it with the website for enhanced visibility and audience engagement.
Implement Key Performance Indicators and analytics for tracking of the most visited pages, abandoned pages, user engagement metrics, and other relevant indicators to measure performance and gather valuable insights.