Design
an Ordering App for Jewelry Designer
Google Certificate Program -Sep 2021
VIMA GALLERY
PROJECT OVERVIEW
Problem:
-
Online jewelry shopping can be time-consuming and overwhelming, especially for new shoppers and gift buyers.
-
Trust and assurance can be challenging to establish when buying such a valuable item.
-
70% of e-commerce users don't finish their purchase and leave their shopping car
Business Goals:
-
Simplify jewelry shopping to attract more young customers and increase sales.
-
Cut down salespeople's in-store presence for safety and cost reasons.
-
Enable shopping outside of store hours.
-
Let customers browse freely and decide at their own pace.
My Role:
As a UX designer, I managed the entire project, from defining objectives to creating wireframes, conducting research, and developing high-fidelity designs and prototypes in Figma.
Duration
Completed a family-owned online store project in one month.
METHODOLOGY
Design Thinking System
Design thinking is a user-centered approach to problem-solving. There are five phases in the design process: empathize, define, ideate, prototype, and test.
CONDUCTING A RESEARCH PLAN
Empathize
-
Project background:
We're creating a new app to help people buy jewelry easier and faster.
Nearly 70% of shoppers abandon their carts, In other words, 8 out of 10 online shopping carts are abandoned with the purchase being completed, according to Baymard Institute.
According to research from the Baymard Institute, many users abandon their carts because they are just browsing or need more time to be ready to buy. Other than this, people abandon their carts because of extra costs, such as shipping, taxes, or other fees.
-
Research goals:
Determine the elements of online jewelry shopping that could be more appealing. Identify the criteria that help the customers to process and place the order and be confident about their purchase.
User Research: User Needs
Interview Questions
-
Have you ever shopped on an e-commerce website?
-
How easy was it to understand the information on any online store you have used?
-
Did you encounter any difficulties while shopping, and what were they?
-
How easy was it to navigate the e-commerce website you have used?
-
Did you feel satisfied with your experience on any e-commerce website?
-
How do you think any of the websites you have used could be made better generally?
-
Do you have a favorite online store you use?
-
If yes, what is the name?
-
What is your ideal shopping experience at your favorite online store?
-
How visually appealing is your favorite online store?
Participants
-
5 participants
-
Two men and three women 22- 56 years old.
Interview Method
-
About 20 min
-
Phone interview and virtual
Key Insights from the Interviews and Market Research
1
Service Name
When shopping online, it can be difficult to choose from a wide variety of items. One common issue is narrowing down options.
2
Service Name
Purchasing jewelry online can be difficult since you are unable to try it on.
Service Name
Shoppers are hesitant to provide credit card information on jewelry websites due to concerns about the accuracy of materials.
3
4
Service Name
Many users feel frustrated when they are required to sign up or log in before they can proceed to checkout.
Service Name
Many users prefer websites offering 24/7 customer support; a chatbot is a great example.
5
6
Service Name
Some websites have an unclear information structure, which results in information being dispersed and difficult to locate.
Define
Personas
Melissa, a busy mom and fashion follower, needs to try and examine options before purchasing due to a lack of time for returns.
User Story:
As a busy mom who follows fashion, I prefer to see more reviews and photos to make an informed decision without trying the product. This reduces the number of returns and saves
Taha, a busy engineer and father of two, seeks to purchase valuable jewelry quickly and easily due to the time-consuming and challenging nature of selecting models and sizes.
User Story:
As a busy engineer and father of two, I require comprehensive information to assist me in placing my order quickly.
Storyboard
Big picture storyboards focus on what the user need, their context, and why the product will be helpful to the user. This Big picture storyboard indicates the user, the environment we can imagine for him, a description of the solution or benefit offered by the design, and how the invention solves the problem.
Here, we have a closer view of the app and its problem-solving capabilities through close-up sto
User Journey Map
User Journey For: Taha Samimi
Taha is on a mission to purchase a precious ring
![Google Jewelry User Journey Map [Taha].jpg](https://static.wixstatic.com/media/10042a_3d942848b96640c0a76142eb989577ed~mv2.jpg/v1/crop/x_23,y_15,w_898,h_524/fill/w_898,h_524,al_c,q_85,enc_avif,quality_auto/Google%20Jewelry%20User%20Journey%20Map%20%5BTaha%5D.jpg)
-
Open app
-
Home screen
-
Select jewelry category
-
Jewelry category page
-
Use the tool for gift filtering. Yes or No
-
Filtering screen
-
Click to choose a style that the person think the target person has
-
Filtered items
-
Decide on the item. Yes or No
10. Selected Item page with details
11. Item news sizing? Yes or No
12. View measuring info
13. Select size
14. Add to cart
15. View Cart
16. Insert checkout information
17. Confirm order. Yes or No
18. Order confirmation
Pain Points
PROTOTYPE
After defining the sitemap and getting a good idea of what screens and interactions we need for this app, we decided to start working on creating wireframes and a design system.
Sketches
Brainstorming & Sketches
Paper Wireframe
Digital Wireframe
Wireframe evolves after each usability test based on user feedback. After receiving input, I ran three usability tests and designed a new set of pages.
USER TESTING
Usability Considerations and Goals
-
What can we learn from the user flow or the steps users take to purchase a jewelry piece?
-
Are there parts of the user flow where participants get stuck?
-
How can we narrow down the choices so users can decide faster?
-
Can we make design changes to improve the user experience with shopping?
-
Do users think the app is easy or difficult to use?
Participants
-
5 participants
-
Two men and three women 22- 56 years old.
Interview Method
-
10 minutes to complete
-
Location: Virtual
-
Format: Moderated and unmoderated usability study
-
High-level procedure: 2 users were tested by supervision, and three filled out forms.
Usability Study Insights
Key Insights from the Usability Test
1
Service Name
All participants feel that the filtering system needs to be changed and simplified or removed.
2
Service Name
Most participants would like to confirm their shipping and payment either sign in or sign up
Service Name
Most participants feel that all pictures need description.
3
4
Service Name
Most participants want to clarify the shipping and payment part more clearly
Filtering System Evolution
Our goal was to make shopping easier and faster. To achieve this, we designed a simple filtering system that is easy to follow. This system allows users to limit their search based on their interests, helping them to make decisions faster and more easily.
First step in designing the filtering system: 4 out of 15 users provided positive feedback for this model.
The second design model was confusing for users and required an examiner to provide explanation.
The final design received overwhelmingly positive feedback from users, with the majority able to navigate it without assistance.
Other elements Evolution
![Google UX Design Certificate - Create a Research Presentation - Zia's Pizza [Template]-2.j](https://static.wixstatic.com/media/10042a_f9518381bdb1445bac45af90e19d0c9c~mv2.jpg/v1/fill/w_960,h_540,al_c,q_85,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20Create%20a%20Research%20Presentation%20-%20Zia's%20Pizza%20%5BTemplate%5D-2_j.jpg)
In order to provide a fast and easy shopping experience, a "help" button is always accessible throughout the entire shopping process, eliminating the need for users to search for help on other pages.
Refining the Design
Revised Wireframe
A/B Testing
A
%35
B
%65
Accessibility Consideration
At first, the UI design showcased buttons with a golden tint to align with the branding. Nevertheless, upon conducting a comprehensive accessibility assessment of the application, we determined that a shift to black buttons was imperative. This modification guarantees improved accessibility and ideal contrast with the background hue.
Next Step
Figma Prototype
1
I was unable to conduct usability tests with people with disabilities, so I recommend recruiting individuals from diverse backgrounds for improved accessibility testing.
2
In the future, I plan to expand the app's product offerings and
3
Having a critique session with colleagues to receive feedback would be beneficial.
