4-
Esmez studio
Ceramic studio website
UX / UI Case Study
​
Revamping and creating a responsive website to boost sales and promote upcoming pottery classes at the studio.
My role: UX Researcher / UX & UI Designer
Duration: May - June 2023
Tools: Figma, Photoshop, Google Docs
.png)
%205_edited.png)
Project overview
Problem
The current website lacks a strong brand identity that reflects the uniqueness of the studio. It fails to highlight the offerings of the new ceramic classes, and there is room for improvement in the shopping experience for a better e-commerce experience.
How can we enhance customer attraction for purchasing unique ceramic pieces and participating in pottery classes to improve their overall e-commerce experience?
Opportunity
Redesign the brand identity and create a responsive website to showcase ESMEZ studio with an excellent e-commerce experience, along with opportunities for learning ceramic techniques and taking classes in their beautiful studio.
%207.png)
Design process
My role
I am the UX & Visual designer spearheading the creation of ESMEZ studio's new responsive website for this project.
I directed my UX design efforts towards embodying the artisanal values of the studio, aiming to enhance online visibility for its distinctive, singular, and aesthetically pleasing handmade products.
01/
Empathise:
User research summary
I analyzed competitors, conducted user interviews to understand needs and pain points, gained insights for a pleasing shopping experience, and created empathy maps to define a comprehensive user persona.
Insights & Pain points
II interviewed five individuals aged 25 to 65, who visit online ceramics shops at least once a month and use mobile devices daily.
Based on research, three pain points were discovered:​​​​​​​
02/
Define:
Define & understand user
The empathy map and persona creation facilitated a deeper understanding of users' needs and pains, providing insights into their expectations that aided in addressing the design challenge.
Problem statement
Charlotte, a busy book editor and food influencer, wants to buy original ceramic tableware online and take pottery classes to showcase her recipes in a personalized manner, valuing handcrafted work.
User journey map
Leveraging insights from research, I empathized with users during the creation of the user journey map, identifying opportunities to enhance the visitor's experience. Charlotte's user journey highlighted the importance of a mobile-responsive website.
This enabled me to pinpoint significant features that can influence and make a difference for the user. My primary emphasis is on the purchasing journey and its associated activities.
03/
Ideate:
Sitemap
Addressing users' struggles with website navigation, I utilized this insight to craft a sitemap. Information Architecture guided me in the process of labeling, structuring, and organizing.
The aim was to strategically optimize information architecture to enhance overall website navigation with a streamlined structure.
04/
Prototype:
Sketches wireframes
Next, I sketched paper wireframes in my notebook, addressing user pain points related to navigation, browsing, and checkout flow. The homepage wireframe emphasizes optimizing the browsing experience with strong, attention-grabbing images.
.png)
Digital wireframes
Due to ESMEZ's customers accessing the site on various devices, the mobile version of the product page adjusts content to fit the screen display size.
.png)
I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
*/
Visual identity:
Mood-board
ESMEZ's potential clients appreciate contemporary craftsmanship, seeking connections with the artisans behind the products and their stories.
Style guide
The primary typeface, Lexend fonts, aims to reduce visual stress and enhance reading performance, originally designed with dyslexia and struggling readers in mind. Paired with Roboto for the body, its largely geometric structure, complemented by friendly and open curves, makes it ideal for natural and easy reading.
The color choices are inspired directly by ESMEZ ceramic products, complementing each other and strengthening the brand identity with their natural tones.
05/
Test:
Unmoderated usability study
In response to usability study insights, I enhanced the site's checkout flow. Two key findings were: first, users lacked the ability to edit the quantity or remove items at the checkout screen. Second, users faced difficulty copying shipping address information into the billing info field, adding an extra step to the checkout process.
01
I added a feature for users to edit item quantities in their carts with a simple " +" or " - " and "remove item" option, providing greater freedom for users with accessibility needs.
.png)
02
I simplified the checkout flow by adding a checkbox for users to use the same address for billing and shipping. I also included a top navigation menu to help users track their progress in the checkout process.
.png)
The high-fidelity prototype ensures a seamless user journey with descriptive features, providing constant clarity about the user's actions.
Final prototype
I minimize long screen scrolls and prioritize clear indicators of the user's location to enhance the flow of the checkout process, ensuring a smoother user journey.
I incorporated considerations for various screen sizes in my mockups, building on my initial wireframes. Recognizing that users shop from different devices, I prioritized optimizing the browsing experience for various sizes, including mobile, to ensure a seamless user experience.
Mockup: screen size variations
Additionally, I aim to introduce landmarks to aid users in navigating the site, especially those who depend on assistive technologies like alt text for screen reader accessibility.
%202%20(1).png)
Take away
Impacts
Our target users seek clear product information and also desire a connection with the creator behind ESMEZ studio. They conveyed that the design is easy to navigate, more engaging with images, and exhibits a clear visual hierarchy.
What comes next? Implementing a feature that enables users to view products in 3D with an AR scanner, aiding potential buyers in selecting their preferred products.
What I learn
Redesigning the ESMEZ studio website taught me that even minor design changes, especially in the checkout process, can significantly impact the user experience. My key takeaway is always to prioritize the genuine needs of the user when generating design ideas and solutions.
