Designing an Adaptive Boutique E-Commerce
Website
Overview
Shiraz Galeria is a fashion industry startup founded by two Iranian women in Luxembourg. Its primary goal is to sell and promote the handcrafted works of Iranian artists, specialising in clothing and jewelry. Their success in hosting local shows and observing the interest and loyalty of customers inspired them to take their business online and expand across Europe.
They approached our team to bring their vision to life. Our objective was to create a user-friendly platform that met both business and user needs, highlighted the products' uniqueness and artistry, ensured smooth transactions, and reached a wider European audience.
Role
Platform
Process
Duration
Tools
Team Size
UX/UI Designer
Desktop/Mobile
Discover, Define, Ideate,Implement
3 months
Figma, FigJam, Photoshop
3 Members
We followed the Double Diamond approach, aiming to incorporate the key phases of Discovery, Definition, Ideation, and Implementation into our work.
#Steps
Design Process
#brainstorming
project kickoff
In our first official Zoom meeting, we encountered the following challenges :
1. Convincing the Founders
We concluded that showcasing products that appeal to the European audience is crucial to our design. We needed to make it clear to the founders that, to attract new customers, we required new photos in the style and format essential for their business's success. Our research, particularly the interviews, helped us convince them.
2. How to Showcase the Business Main Value on the Home Page
Shiraz Galeria's main goal was to emphasize that its products are handmade. After extensive user testing and iterations, we achieved this by using appropriate images.
3. Identify our two categories at a glance
Our research discovered that users need to grasp what we are selling quickly. By splitting our hero image into two sections, we were able to achieve this.
4. Highlighting Empowering Women
It was important to inform our customers that the products they purchase are the result of collaboration between designers and local women artisans from various regions of Iran. We planned to dedicate a section on the home page emphasizeise the significance of their work.
#interview
First Meeting
We scheduled our first official meeting with the founders of Shiraz Galeria to learn about their business goals and their vision for expanding onto an online platform. We aimed to understand their needs and expectations of us. Prior to the meeting, we prepared several questions during a two-hour online brainstorming session to guide and assist us. We successfully identified the primary business goals:
Introducing and promoting the works of Iranian artists
Showcasing women's empowerment
Expanding their business onto an online platform
Targeting European customers
Increasing sales
#methods
Research
Our first step was to determine which research methods could provide the most information about our business, customers' needs, and competitors to help us build the foundational structure of our website. We identified three key methods:
Competitive Analysis
Interview
Survey
#competitors
competitive analysis
This analysis was conducted in two phases: first, examining the competitors introduced by the founders, and second, studying global brands selling couture. From this, we determined the following key points:
First, the target audience and their preferences significantly influence the website's structure and design, helping us stand out. Second, to highlight the beauty and uniqueness of products, a minimalist design is essential. Third, the story, the artists, and the craftsmanship of Iranian women behind each product are what distinguish us. Last but not least, by drawing insights from their information architecture and user flow, we made improvements to our platform.
#users
Survey
To gain deeper insights into user preferences, we conducted a brief survey consisting of 13 questions, including a crucial one: "Are you interested in purchasing Persian artworks (accessories, embroidered clothing, etc.) online?" This question helped us identify potential customers. The survey was distributed across Instagram, Facebook, Telegram, and LinkedIn. Here are some key findings:
#interviews
Affinity Diagram
We interviewed 10 users who responded to our survey and were open to further participation. These interviews played a crucial role in shaping our affinity diagram. Below are some of the key groups identified, which later guided us in drafting our sitemap.
Ease of navigation
Clarity of information
Artistic Story Behind the Products
Device
#Learning
Takeaways
During our research, we identified essential elements that are important to users when purchasing clothing or handmade accessories online:
Providing easy navigation and access
Offering comprehensive and accurate product descriptions
Revealing the story and designer behind each item
Recognising that users prefer using laptop and desktop versions for purchases
Ensuring the quality of the product to the user
The availability of secure payment and multiple payment methods
Ensuring the reliability of the shopping website
#Pain Points
Fun fact
During one of the brainstorming sessions, a team member who was several hours ahead of us had it around 2:00 AM in her time zone while we were still in the meeting regardless of the time. We were in the middle of the meeting when we suddenly heard a snoring sound and realised that our fellow group member had fallen asleep behind the computer. She was so tired that even our loud laughter did not wake her up. We continued the meeting for another hour and a half, and she was still asleep. At the end of the meeting, she suddenly woke up and said, 'Are you guys still here?!' We burst out laughing again.
#IA
SITEmap
Using insights from our competitive analysis and affinity diagram, along with business values, we created the first sitemap through card sorting with potential users. User testing then helped us refine and finalize the design based on participant feedback.
#inspiration
Mood board
Our mood board was carefully crafted to reflect our business objectives while honoring Iranian cultural motifs. We selected the primary color after researching Shiraz, a city renowned for its grape wine, which has a distinctive red shade registered in Pantone as "Shiraz." This color was a perfect fit for our brand. After thorough research, we paired it with Persian blue as an accent color. This combination aligns seamlessly with our branding, merging our strategic vision with cultural significance.
#users
Persona
The previous steps gave us a clear understanding of our potential users, leading to the creation of our persona: Charlotte Martin, a 45-year-old art professor at the École des Beaux-Arts in Paris. Her passion for art shapes every aspect of her life. She consistently selects pieces crafted by artists, not only to support them but also to appreciate their creativity. This is reflected in her personal style, where her appearance beautifully embodies her love for artistic expression.
#journey
User story
At the art school where Charlotte teaches, she notices one of her students, Sarah, wearing a stunning hand-embroidered coat that immediately catches her eye. As Charlotte is in search of a unique handmade coat for the year-end party, she decides to ask Sarah where she got hers.
#journey
UserFlow
#assets
UI-Kit
#HWM
Design Goal
How can we present our business to users in a way that's clear, engaging, and trustworthy at first glance, while keeping the design simple and easy to navigate, without compromising on the core business value?
Through our interviews with both business owners and users, we uncovered a key shared priority: the need for immediate visibility of products on the website. While business owners stressed the importance of showcasing their company’s values on the landing page, users also emphasized their desire to understand the business's purpose and vision. This level of transparency builds trust and encourages users to make a purchase.
Therefore, based on our research, particularly competitive analysis, we created sketches of the landing page during a brainstorming session to define the best design solution.
#Learning
Takeaways
A
we compared how effectively different sites introduced their services or business using hero images. Through this process, we determined that the second option was more successful in clearly conveying what we offer. Similar websites with a single hero image often failed to communicate the core focus or what the business was selling, leading us to conclude that the second option provided a better user experience for showcasing our services.
B
Information about the founders will be relocated to a dedicated section in the navigation bar, rather than being featured on the landing page.
C
Building trust with first-time visitors is essential for converting users into customers. To achieve this, we decided to prominently display customer reviews on the homepage.
#Discovery
Design Decisions
A carefully selected hero image can meet business requirements while simultaneously transforming a curious visitor into an engaged user.
Selecting the right hero image to represent our business was a central focus of our design process. To ensure the best choice, we conducted A/B testing with two key groups: business customers on Instagram and potential users. This approach allowed us to gather valuable feedback and choose the images that most effectively represented our services.
Our proposed options included:
1. The first option highlights our categories with two images showcasing designers at work.
2. In the second option, we highlight our two categories with images featuring models showcasing our products.
Here are the hero images presented on Instagram for user feedback:
Here are the hero images presented to potential users for their feedback:
A
Almost all users who tested this hero image initially assumed that the website was for an educational center offering various workshops.
B
Users identified the website as a clothing business, but the photos lacked appeal, and the text was unreadable and uninformative
“Once the structure and foundation of our design became clear, and we gathered crucial insights from our users, we proceeded with the remainder of the design, focusing on high-fidelity wireframing & user testing.”
#Design
Wire framing
Design Approach
The following outlines the design evolution from the initial wireframe to the final product, based on user testing.
Landing page
STEP 01
STEP 02
Final
Introducing our products and business through a captivating hero section
After analyzing the A/B testing results, we crafted the initial design. Following several rounds of user testing, we identified the final design that effectively conveyed the business's values and addressed user needs.
To fully address the concerns raised by users, we developed a comprehensive strategy and implemented the following key measures to improve the overall experience:
1.Photo Replacement: We replaced the photos with new ones featuring neutral backgrounds to better highlight the categories.
2.Enhanced Button and Text :We used a primary color for buttons and text to create contrast with the background and reinforce our brand.
3.Text Size and Positioning: We increased the text size, refined the style, and centered it in the hero image to draw attention and encourage action.
In the final version, we addressed three main issues: First, we replaced all images with new ones that clearly represent the categories. Second, we chose more intuitive titles that users can understand immediately. Lastly, we redesigned our buttons, replacing the underlined text with more visually appealing elements to encourage users to click.
A
During the first user test, 90% of participants failed to grasp our intended message. They identified three key issues contributing to this misunderstanding:
1.Distracting Images: The hero images were found to be unsuitable, and better suited for Instagram or catalogs.
2.Text Readability: The text was difficult to read because of its low contrast and the use of a small font size, making it less accessible.
3.Button Visibility: Buttons were difficult to find, with low contrast and small size, making them less inviting to click.
B
Users indicated that it would be beneficial to learn more about the business's additional features and services. They felt that simply seeing the main categories upon landing on our website was limiting. By offering more information about our complete range of services, users would be able to make more informed decisions and explore a wider array of options that meet their needs.
During the second user test, we found that users were still hesitant to click on the buttons, despite spending time on the hero section. They noted the following issues:
1.Confusing Images: One photo was an overview, the other a close-up, making the categories unclear.
2.Unappealing Background:The background color was too sharp and visually unpleasant, making it hard for users to focus on the content.
3.Flat Buttons: The buttons looked flat and were overshadowed by sharper elements in the images, making them less noticeable.
In the second design, we reduced the size of the hero images to make room for additional categories that might interest users and help them find products more easily. Although feedback was positive, we noticed a lack of user action. Upon inquiry, users indicated that the title was difficult to understand and that it wasn't clear where to click to navigate to new pages.
A
A
B
STEP 01
STEP 02
Final
Introducing the Designers Equally
The client requested a way to introduce designers to customers, aligning with user feedback that knowing the creators adds value and trust. We added a dedicated section on the landing page to showcase the designers, making this information easily accessible.
In the first design, we created a slider section for designers that showcased only three at a time. Users misunderstood this format, thinking these were the only designers or questioning if they were the main ones, which implied they were more important than others. Additionally, some users didn’t realize it was a slider and were unaware they could view more designers. This approach ultimately contradicted the business’s core value of showcasing all designers equally.
In the final design, to highlight the business’s core value of introducing Iranian designers, we added a dedicated "Our Values" section to the landing page. One part, titled "Meet Our Designers," featured a single image showcasing all the designers equally. We also included a "Read More" button, inviting users to explore their stories. This approach ensured that this unique aspect of our brand was communicated clearly and meaningfully.
In the second design, we treated the designers as a category and placed them alongside other product categories. However, after user testing, we discovered that this placement caused confusion, especially because there were two distinct product categories. This inconsistency led some users to mistakenly believe that this section showcased hand-sewn and haute couture clothing, treating it as separate from the rest of the products on the site.
STEP 01
STEP 02
Final
Empowering Women
Each product sold by Shiraz Galeria is crafted by strong women in Iran, each with its own unique story. Stakeholders requested that we highlight these stories, showcasing the meaningful connections between the product, designer, and artisan behind it.
A core value of the business is empowering women, especially those from underprivileged areas in Iran. Designers at Shiraz Galeria collaborate with these women, incorporating their traditional hand embroidery into modern designs, giving them opportunities to earn income and gain independence.
Initially, we created an "Empowering Women" slider on the homepage, where users could browse images and descriptions. However, user testing showed this format didn’t engage users as expected, leading us to rethink how to better highlight this important initiative.
Our user testing of both the "Meet Our Designers" and "Empowering Women" sections led us to create a new section titled "Our Values." This section includes a photo, a brief text snippet, and a "Read More" button, inviting users to explore the stories and images of the women and designers involved.
This approach allows us to showcase the brand’s core values beyond just selling products without overwhelming users with excessive text or images on their first visit. It provides a more balanced, engaging experience, enabling users to connect with the brand’s mission at their own pace.
STEP 01
Final
More Categories Section
To enhance user navigation and encourage more interaction, we initially added a section showcasing multiple product categories on the landing page. The goal was to help users easily find specific items.
In the initial design, we showcased the bestsellers from each category, thinking users would be interested and that it would increase purchases. However, we discovered that users preferred to explore each category independently, finding the curated list more time-consuming than helpful.
we revised the design to offer direct access to specific product categories. This allows users to first select their desired category, then browse relevant products on a dedicated category page, improving overall clarity and usability.
STEP 01
Final
Review Section
As a new business, gaining customer trust was crucial for us. We believed that authentic reviews from our users could play a significant role in building that trust.
In the first step, we positioned the review section at the bottom of the homepage and displayed each review as text only. However, during user testing, participants expressed concerns about the authenticity of the reviews, perceiving them as potentially fake. This skepticism led them to question the website's credibility and even view it as a potential scam.
In the second design, we improved the section title to be more friendly and trustworthy “Join Our Family”. We showcased Instagram photos from Shiraz Galeria that feature authentic customer reviews. Clicking on these images redirects users to the Instagram page, allowing them to view real product feedback from actual customers and enhancing trust and credibility.
After further testing, we identified a more effective approach. Many customers and influencers shared their experiences with our products on Instagram, tagging our business. To leverage this social proof, we renamed the section “Join Our Family” to “What People Say About Us” and replaced Instagram photos with clickable images of real customers linking to their original posts.
STEP 01
STEP 02
Final
The Story Behind the Screen
We need to convey the story and philosophy behind Shiraz Galeria to our customers. To this end, we have created a short video highlighting these key aspects.
During the initial design phase, we included a business video on the landing page, based on user interviews that highlighted their interest in learning more about the business, which promotes handcrafted works by Iranian artists. However, through user testing, we discovered that the video created distraction and confusion. While users expressed interest in the content of the video, they preferred having the choice to engage with it rather than encountering it immediately upon landing on the page.
Taking this feedback into account, we decided to remove the video from the landing page. Instead, we collaborated with the business to create a new video, which we strategically placed in the final step of the purchase journey—right after the customer receives their order tracking code. We designed a clickable envelope, inviting users to watch the video as a “thank you” from the business. This optional approach allowed users to either enjoy the video or simply return to the homepage without interruption.
STEP 01
Final
Categories Page
STEP 01
Final
Categories Page
Designing a Comprehensive and Informative Categories Page to Encourage Longer Engagement
To give users a clear overview of our offerings, we developed a page that showcases all categories, each represented by relevant images and paired with CTA buttons to encourage user interaction.
STEP 01
Final
B
A
C
A
C
B
During the first user test, we noticed that users felt overwhelmed by having to scroll through the entire page to view all the categories and locate the one they were looking for.
The "Discover" button was confusing for users and didn’t feel inviting or motivating enough to encourage them to click on it.
We observed that the large number of photos and clothing items created confusion. The consistent framing of images made it hard for users to differentiate between categories at a glance, causing them to rely on reading the titles to understand which section they were in.
In the final design, we placed CTA buttons for each category at the top of the page, enabling users to access their desired categories instantly without having to scroll, creating a more efficient and seamless browsing experience.
We updated the button text to "Shop Now," making it more clear and inviting for users to take action and make a purchase.
We requested updated photos from our clients based on our feedback. Our next step was to enhance the visual hierarchy and create clearer distinctions between categories, allowing users to quickly identify each section without depending solely on category titles.
Product Page
STEP 01
Final
C
Designing a Clear and Concise Page that Provides All the Information Users Need
Our goal was to design the page with a seamless flow, enabling users to navigate and complete their purchases effortlessly. To achieve this, we divided the page into four key sections: detailed information about the selected item, a "Complete Your Look" section for discovering complementary products, a brief bio of the designer, and a "See More From This Designer" section for those interested in exploring additional products. However, during user testing, we identified key issues that prompted further revisions, leading us to the final design.
STEP 01
A
B
C
User feedback revealed that most participants preferred to see the total number of product photos and have an easy way to browse through them. Many didn’t notice the slider button and assumed there were only two images of the product.
In the item description, we identified several issues:
In the item description, we identified several issues:
“Based on user testing, we introduced new features that were missing in the initial design to enhance the overall shopping experience for our customers.”
Users preferred to view product information before encountering the purchase button.
We concluded that the PayPal payment option should be moved to the shopping cart page, allowing users to select their payment method after reviewing their cart.
Users expressed interest in the short story behind each product, aligning with the business’s goal to highlight these unique narratives.
In the new design, we introduced a "Regular Fit" section to improve user convenience. This section includes details about the mannequin wearing the product, helping users better assess the fit and choose the right size. We also added a comprehensive size guide to further assist users in making informed sizing decisions.
Adjusting the layout to place the purchase button after the product details, in line with user preferences.
We moved the PayPal option to the cart page, giving users the choice to pay with PayPal or continue through the site’s payment steps to select their method.
We placed the product story before the purchase button, directly after the designer's name, so users engage with it before buying.
To encourage purchasing and keep users informed about product availability, we added a feature directly below the product sizes that displays the number of items left in stock. This creates a sense of urgency to buy while ensuring users are aware of the current inventory.
Below the ‘Add to Cart’ button, we included a heart icon with the label ‘Add to Wishlist,’ allowing users to easily save items to their personalized wishlist for future reference
To enhance user engagement and attract new customers, we added a “Share” option next to the “Add to Wishlist” section. This option enables users to easily share their favorite items with others.
We addressed these issues by:
Based on this insight, we redesigned the product image section by adding a photo gallery next to the main zoomed-in image. This allows users to quickly preview all available photos, zoom in on any image, and select which one they want to view in greater detail.
B
A
C
Final
Offering more options and flexibility to help customers make informed purchases.
To streamline the shopping process for customers looking for quick purchases or those who struggle to find suitable products among many options, we introduced two sections: "Complete Your Look" and "See More From This Designer." These additions help guide users to complementary items and explore more from their favorite designers easily.
STEP 01
Final
In the initial design, we placed "Complete Your Look" immediately after the product details and "See More From This Designer" at the bottom of the page. However, during user testing, most participants expressed a preference for seeing the "See More From This Designer" section first.
In the final design, we switched the sections, placing items from the same designer first, followed by "Complete Your Look" to highlight complementary pieces. After user testing, we received positive feedback, confirming this adjustment improved the shopping experience.
#Overview
prototype
Landing Page
Item Page
SHOPPING CART
Cart Page
Payment Page
Categories page
Size Guid
COMPELET YOUR LOOK
CHECKOUT
Summery page
Product page
Size Guid
ORDERD SUMMERY
Shipping page
Confirm page
Prototype
#Design
Wire framing (Mobile)
Design Approach
For the mobile version of our website, we adapted the design to provide a better user experience while retaining all features. This was a challenging process, but user testing guided us in achieving the final design.
In our user tests, we found that using a single photo for the hero image, instead of two, provided a better user experience. By incorporating two buttons consistent with the desktop version, we were able to create a sense of familiarity and cohesion, enhancing the user’s overall experience across devices.
During user testing, we discovered that the interaction patterns on the mobile version differ from those on the desktop website. Instead of using icons with titles, it’s more effective to guide users in other ways to indicate clickable elements. This approach aligns better with how users naturally interact with mobile devices, simplifying navigation and enhancing the overall experience.
To maintain consistency between the mobile and desktop versions, and given the importance of highlighting the business’s values, we included a mobile-optimised version of the “Our Values” section from the desktop site. This ensures that the brand’s core principles are effectively communicated across all platforms.
To show the click ability of the "more categories" part, we used the same solution as the upper part. Then by adding a bracket icon, we signalled to users that this section can be scrolled both right and left, making it clear that more categories are accessible through horizontal scrolling.
STEP 01
Final
#Steps
Next
Conducting usability testing on the final design to ensure the improvements enhance the user journey.
Designing additional pages with potential user journeys in mind for a more seamless experience.
Collaborating closely with the developer to ensure smooth development and implementation of the website.
#Learning
Takeaways
Asking the right stakeholder questions early helps align business and customer needs.
Clear, organized material requests ensure smoother collaboration.
Thorough user research (questionnaires, interviews, competitor analysis) provides key insights.
Keep moving forward even without all materials, testing with what’s available.
Effective communication with the team is crucial for success.
Balancing user needs and business goals requires patience, research, and iteration.
Understanding others’ needs is the foundation of good design.
Embrace changes based on user feedback for continuous improvement.
