Jevtovic Ceramics
Explore beautifully designed, hand-made ceramics from Cape Town, South Africa.
Role: Lead Designer
Time: Two Weeks
Tools: Procreate, Flowmapp, Axure RP, Adobe XD, Figma
Summary
Dragana Jevtovic is a multifaceted artist from Belgrade, Serbia. While she has had a long career as a professional opera singer, she has also established herself as a successful ceramic artist since 1993 in Cape Town, South Africa. Every piece is uniquely hand-made and emulates a vivid African style. The Jevtovic Ceramics website is a place for customers to discover and purchase her beautiful pieces from around the world.
Getting up to speed
While Jevtovic Ceramics regularly ships orders to customers all over the world, they have always relied heavily on local businesses to stock their products. As economic uncertainty struck South Africa due to the Covid-19 lockdown, Jevtovic Ceramics experienced a halt in orders from some of their most loyal customers. With their largest client stating that they would not be able to place a new order until September of the following year, they needed to reflect on their branding and infrastructure to make it more accessible and usable for new customers to place orders directly through their site.
Project goals
After interviewing Dragana to discuss her goals for the business and reviewing the current website, I was able to identify two key problems that needed to be addressed.
The structure of the site was very disorienting, making it difficult for shoppers to browse products and place new orders. By addressing the site’s hierarchy and organization of content, it was my goal to improve the usability and overall experience of placing new orders.
The old branding of the website did not complement the product very well. The site needed to do a better job of communicating handmade and high-quality ceramics. The goal for this project was to develop a color palette that is simple yet sophisticated while using a typeface that emulates that the product is unique and handmade.
Before
After
User stories & flows
After discussing some key goals with the client, I compiled a list of user stories and prioritized them to help define the MVP for this project. From here, I began to research and study various e-commerce platforms that are targeting shoppers with similar motivations. This helped me to familiarize myself with important mental models within shoppers that I needed to be aware of. After this, I was able to create and refine some key user flows for the MVP.
Card sorting and sitemapping
After establishing key user flows for the project, I needed to start familiarizing myself with the product and the content that was going to make up the site. Jevtovic Ceramics has a large catalog of products that come in several different styles. To assist with designing the information architecture of the site, I performed several open card sorting exercises with various participants. This helped me understand how I should group the various elements and design a sitemap.
Before
After
Sketching
Using my iPad, I drew several rough sketches of how I envisioned the information architecture of the site to look.
This is where I focused on defining certain elements such as the site header, landing page structure, and item listing.
Wireframes
I then used Axure RP to refine my sketches into low-fidelity wireframes.
This is where I started to refine the products page. Based on some popular e-commerce platforms that are targeting shoppers with similar motivations, it seems useful to display “popular items” for visitors to browse through. This enables shoppers to view products they may be interested in without having to select a filter. So, in addition to presenting the shopper with the various product styles, I created a section for shoppers to browse popular mugs, platters, teapots, etc.
Landing Page
Products Page
Product Listing
Style
I chose to use a deep blue as the primary color of the website because it is the most widely accepted color around the world and is often used to emulate luxury and artistic appeal. For the background, I used pure white to provide a neutral yet fresh canvas that doesn’t distract from the ceramics. Lastly, for most of the text on the site, I decided to use an off-black to limit as much eye strain as possible while also establishing an effective visual contrast.
Regarding the typography, I decided to use two fonts. For large attention-grabbing headers, I used a crisp serif font as a way to compliment the handmade ceramics. For the body text, I decided to use a clean sans-serif font with a large x-axis to maximize the legibility at a smaller scale while not distracting from the main content.
Final product
After establishing the style guide for this project, I was able to apply a new coat of paint to the wireframes.
Landing Page
Products Page
Landing Page Continued
Style Page
Item Listing Page
Conclusion
Through my research and design process, I feel I was able to successfully craft a solution that accomplished the goals for this project:
Fix usability issues around placing new orders, by improving the visual hierarchy, site organization, and user flow of the website.
Develop a color palette that is simple yet sophisticated, while using a typeface that emulates that the product is unique and handmade.