.png)
Case Study: Boutique Jewellery App
I created a concept for a mobile e-commerce app to help users browse and purchase jewellery from an independent boutique. The focus was on creating a luxury, trustworthy, and accessible mobile experience for time-poor shoppers, giving them fast and easy access to their favourite jewellery boutique.
Role: UX Designer
Duration: 3 months
Tools: Figma, Miro, Google Forms, usability testing methods
The Challenge
This was a design challenge completed as part of the Google UX Design course. The brief was to create a mobile e-commerce app for a boutique jewellery brand.
Goals:
-
​Design a clean, accessible app to help users quickly find and purchase jewellery from their favourite boutique.
-
Make buying jewellery via mobile an easy and delightful experience.
-
Encourage return purchases by creating an easy way for users to see and buy the latest jewellery collections.
User Research
​I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group I identified was working adults who don’t have much time to buy gifts or clothing for themselves and need a reliable source for jewellery. User feedback also emphasised the importance of trustworthiness when shopping online.
01. User Paint Points
1
Time
Working adults don’t have much time for shopping. Online shopping can be overwhelming. The app provides a way for them to easily shop online from a trusted jewellery designer.
2
Accessibility
Platforms for shopping online are often not equipped with assistive technologies.
3
Trust
Judging quality of products online is difficult. High quality images of products must be shown so users know what they are purchasing and trust can be built. Reviews also help users to trust they are making the right choice.
4
Experience
Users should be clearly informed about delivery and return times so they know what to expect and have a smoother experience.
02. User Personas and Journey Mapping
I created user personas and user journey maps to imagine the typical process of buying online and see how my mobile app could improve this.
03. User Flow
I created a user flow to determine which pages of the app were required.
Starting the Design
01.
Paper wireframes
02.
Digital Wireframes
03.
Low-Fidelity Prototype
04.
Usability Studies
01. Paper Wireframes
I sketched out a variety of different ideas for the app screens. I based these designs on feedback from the user research and findings from competitor analysis. The images above show 6 different versions of the home page. Wireframe #6 was the final combination of my preferred elements.
02. Digital Wireframes
As the initial design phase continued, I created digital wireframes. Notes on the design so far:​
-
Category box with image and title for easy navigation. Large clickable area, large text and images make the design more accessible
-
Navigation bar with icons for easy navigation to search, account, wishlist and basket. Users have access to their basket at any time
-
Large images to show many sides of product and ability to try product on virtually
-
Customer reviews to build trust and confidence in the product
.png)
.png)
03. Low-Fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. I then connected the primary user flow: choosing and ordering a piece of jewellery.
View the Low-Fidelity Prototype here (link to Figma preview).
04. Usability Study - Findings
I conducted a moderated usability study of the low-fidelity prototype. There were 5 participants aged 22 and over. I asked them to test the primary user flow by ordering an item from the app. The main feedback points were:
Lack of multiple payment methods
Scroll on checkout is confusing
Lack of discount code option
Lack of option to create account
Menu is difficult to close
Icons in header are too close together
.png)
01.
Mockups
02.
High-Fidelity Prototypes
03.
Accessibility
01. Mockups
After the usability study, I updated key areas such as payment methods, discount code, and menu functionality based on the feedback.
Next, it was time for branding, colour theme and typography. I created a design system and applied this to all the screens.​ Notes on design choices:
-
I chose neutral gold and silver tones to reflect the jewellery theme and provide a neutral background for the jewellery to stand out.
-
Small accents such as the logo and basket counter are in dark amethyst purple, reflecting the idea of jewels
-
I chose an elegant serif font for the headers, and a more readable sans serif for the main body.​
02. High-Fidelity Prototype
View the High-Fidelity Prototype here (link to Figma preview).
03. Accessibility Considerations
1
Contrast
Colours adjusted to provide enough contrast where necessary.
2
Font size
Typography: a large font has been chosen to make mobile reading easier.
3
Images
Images showing different sides of the products will be added to help users understand the item. Alt-text will be added to help with screen readers.
4
Icons
Icons added to help navigation.
Reflection
Throughout this project I developed my skills in creating wireframes, mockups and high-fidelity prototypes in Figma. A central part of this process was user research, where I practised many different methods to gather user feedback. I also learnt how to consider accessibility when designing and researching.
​
The next steps would be to get (more) feedback from stakeholders or management. It would then be handed over to developers who would code the app, followed by further user testing and refinement.