Introduction
Galleria is a distributor of sanitary products in Indonesia, offering a guarantee of quality for every product and service with over 40 years of experience in this industry.
In the competitive world of sanitary product distribution, Galleria, a leading player in the industry, recognized the need to strengthen its digital presence. Their primary objective was to drive more foot traffic to their physical stores through a revamped online experience. As the UX designer for this project, my role was to address critical issues in accessibility, information architecture, and content quality, ultimately enhancing the user experience and increasing in-store visits.
Role & Team
My responsibilities as a UI/UX Designer included accessibility testing, design audit, information architecture, and interface design.
- Fajar Riadi (UI/UX Designer)
- Annisa Savira (Project Consultant Manager)
- Desva Herzani (Project Consultant)
- Fadhlillah Ariefianto (Lead Web Production)
- Berliana Putri Prasetyanti (WordPress Developer)
Goals
Project Tenure
November 2022 – January 2023
Problem Statement
Galleria faced several significant challenges in their digital presence:
- The website lacked proper accessibility features, including poor color contrast, which hindered users with visual impairments.
- Improvement needed for the Information Architecture
- Content on the website was often unclear and failed to effectively communicate the value of their products and services
Research and Discovery
Client Questionnaire
As part of our UX design process, we engaged in a client questionnaire to gain valuable insights into Galleria’s objectives and the unique characteristics of their target audience. Below, I present a selection of questions from our questionnaire that helped shape our design approach:
Please note that we maintain strict confidentiality regarding the answers provided in the client questionnaire to protect the privacy and security of our client’s information.
User/Customer Questionnaire
In our goals to create a user-centered design, we conducted a user/customer questionnaire to gain valuable insights into the preferences and needs of Galleria’s target audience. Below, I present a selection of questions from our questionnaire that helped inform our design approach:
As with the client questionnaire, please note that we maintain strict confidentiality regarding the answers provided in the user/customer questionnaire to protect the privacy and security of our users’ information.
Key Content Identification:
We identified key content that aligned with Galleria’s business goals and their target market audience. This information guided our content strategy and design decisions.
Accessibility Testing
To address the accessibility issues, we conducted thorough accessibility testing, focusing on improving color contrast, text legibility, and keyboard navigation. These changes aimed to create an inclusive experience for all users.
Design, Testing, & Iteration
Color Theory
We applied the 60-30-10 color theory to create a visually pleasing and balanced color scheme that enhanced the overall aesthetics of the website.
Hero section (homepage)
We presented two hero section layout versions for consideration:
Version 1
This design featured separated information boxes, providing dedicated spaces for promotions, visiting the store (main CTA), and catalog downloads (secondary CTA).
Version 2:
In this alternative design, we centered the headline and subheadline, featured two prominent CTA buttons, and included a large image. Notably, this layout omitted a promo section.
Due to time constraints, we used heatmap tools for UI validation, providing rapid insights into user interactions and preferences. While our testing options were limited, these tools proved instrumental in refining the user interface.
The heatmap testing results clearly indicated that Option 2 achieved a higher clarity rating, offering an optimal user experience. However, the decision-making process for selecting the final design went beyond these metrics.
Despite the superior clarity of Option 2, we made the strategic choice to proceed with Option 1 for several compelling reasons. This design featured separated information boxes, providing dedicated spaces for promotions, store visits, and catalog downloads. This layout offered the client greater flexibility to update promotional content rapidly, aligning with their need for real-time updates and flexibility in managing their online presence.
While Option 2 excelled in terms of clarity, Option 1 offered a well-balanced solution, ensuring that not only did users have a clear understanding of the website’s offerings, but the design also catered to the client’s requirements for ease of content management. This decision underscored our commitment to delivering both an optimal user experience and practicality in maintaining the website’s content.
Product Card
We explored two layout options for product cards:
Slider
This design allowed users to cycle through products using a slider interface.
Four-Card Display
This alternative displayed four product cards in two columns, ensuring immediate visibility of key products.
we implemented the Four-Card Display layout for product cards, ensuring that users could readily access vital product information without the need for sliding through multiple items.
User Flow
To better understand user behavior and track visitor journeys, we established several key user flows within the Galleria website:
Flow 1 – Home Page > Showroom:
Users navigating from the home page to the showroom section are typically seeking a direct route to view Galleria’s physical store locations. They may have a specific showroom or store visit in mind and are looking for quick access.
Flow 2 – Home Page > Brand > Product Category > Showroom:
Users who start on the home page and then explore specific brands and product categories before arriving at the showroom are often engaged in comprehensive product research. They are likely interested in exploring various offerings and narrowing down their options before considering an in-store visit.
Flow 3 – Brand > Product Category > Showroom:
Users directly accessing a brand page and then delving into product categories before reaching the showroom are likely brand-focused shoppers. They may have a preference for specific brands and are interested in exploring the available products within those brands before deciding on a visit.
Flow 4 – Product Category > Showroom:
Users who begin their journey within a product category and proceed to the showroom are usually category-focused shoppers. They may have a specific product type in mind and are interested in locating the nearest physical store where they can view and purchase items within that category.
Flow 5 – About Us > Showroom:
Users visiting the “About Us” section and then navigating to the showroom are typically looking to learn more about Galleria as a brand before deciding to visit a store. They may be interested in understanding the company’s values, history, or mission as part of their decision-making process.
Understanding these user flows allowed us to optimize the website’s information architecture and content presentation to better align with user expectations. Additionally, it guided our design decisions, such as the placement of CTAs and the organization of content to ensure a smooth and intuitive user experience.
Refinement
Results/Impact:
The impact of our redesign efforts was substantial, and we evaluated the project’s success by tracking the increase in in-store visits in the months following the website’s release. Below is a visual representation of the impact:
