User Experience (UX) and User Interface (UI) Design and Definition
An innovative digital platform for purchasing high-quality baby products, emphasizing personalization and a seamless shopping experience.
Overview
User Experience (UX) and User Interface (UI) design and specification.
A unique digital platform for purchasing high-quality baby products, with a focus on personalization and a seamless shopping experience.
Research
Market analysis
Leading up to the website’s specification phase, I conducted a market analysis where I analyzed existing digital platforms, particularly those selling baby products, focusing on their User Experience (UX) and User Interface (UI).
Competing businesses
Online product purchasing platforms
Marketplace and digital content repositories
Take aways
Homepage
1
The pain points were identified and categorized into five categories
Call to purchase
A prominent section with an offer to purchase a gift voucher, including a call to immediate action.
Prominent chat button
A prominent chat button that enables discreet and secure communication with the advertiser.
Customer Reviews: Trust and Smart Decisions
Clearly displaying customer reviews, especially with photos, enhances trust, showcases the product in reality, and helps users make informed purchase decisions.
Valuable Reviews
We incentivized users to submit reviews by providing discount coins for future purchases, which also boosted their loyalty for subsequent orders.
Quickly Contact the Seller
On the product page, we added a quick option to contact the seller, allowing users to easily and rapidly clarify questions or concerns.
Product page
2
"Quick View" Pop-up
The "Quick View" pop-up provides convenient and fast access to product information without interrupting the browsing flow on the shop page.
Atmospheric images alongside products
create ambiance and illustrate the product's use and context.
Shop page
3
Upgraded Checkout Process
We've broken down the checkout process into 3 steps:
Shopping Cart - Summary of Amount
Technical Details such as Adding a Coupon, Shipping, etc.
Entering Credit Card Details.
Reducing Unnecessary Information on the Checkout Page
Saves the user from irrelevant information and simplifies the payment process.
Shopping Cart and Checkout Page
4
Large and realistic product images
provide a wealth of information about the product, increase trust, and enable users to make more informed purchasing decisions.
Pop-ups in the same format and location
create consistency and prevent confusion, thereby contributing to a better user experience.
Filling in Relevant Information Fields
Conserves user time and effort, facilitating rapid and efficient process completion.
Highlighted Price
Draws the customer's attention and makes it easier for them to quickly identify the price.
In general
5
Survey
Distribution of a dedicated survey for parents interested in purchasing baby products online
We distributed a dedicated survey to parents interested in purchasing baby products online. The survey included questions designed to understand their key needs, concerns, and preferences while examining the influencing factors.
The main question: Do you also have disappointments and concerns about purchasing through a website? If so, what are they?
(109 respondents)
Noa, 26 years old, a young mother working as an insurance employee. She is practical, caring, and social, with quick learning skills, multitasking abilities, and strong relationship-building skills.
biography
To provide the best for her baby- To save time and effort in managing daily life- To build a community with other mothers – To receive reliable and easy-
to understand information about parenting and baby products- To use high-quality, safe, and convenient products- To try innovations and technology to make life easier-
Needs
Fear of choosin unsuitable or unsafe products –
verwhelmed by excessive information making decision-making difficult –
– Feeling lonely in motherhood
– Lack of sleep and social pressure to be the “perfect mom”
– Uncertainty in making decisions for her baby
– Fatigue and lack of time for daily tasks
Pains
Naama Levy
Age: 28
Jerusalem
Married +4
payroll accountant
“I just want to buy what I need easily without getting tangled up in all these details.”
challenge
1
Security & Responsibility
How might we instill confidence in users regarding products, even when they are expensive?
How might we communicate with users about shipping to prevent frustration?
How might we ensure user satisfaction even after the purchase is completed?
How might we accurately describe the product the user is about to receive?
How might we make returns and exchanges easy and user-friendly?
2
Personalization
How might we provide personalized service tailored to customer needs?
How might we accurately describe the product the user is about to receive?
3
Delivering the Right Message
How might we ensure the website remains fun and easy to use while maintaining a high-end, boutique feel?
How might we attract both luxury-seeking users and those who prioritize affordability?
Brand Values
Form
We used rounded rectangles on one side alongside rectangular strokes with sharp edges to convey innovation and cleanliness. Additionally, we added ambient images to create a relaxed and comfortable atmosphere, influencing the shopping experience.
Color Scheme
The use of pastel colors, vibrant green, and soft orange evokes warmth and humanity, connecting a soft aesthetic.
Lighting
We used transitional lighting in peach and greenish tones to create a soft and calming atmosphere. The combination of warm and fresh colors creates a sense of harmony and flow between the elements, offering a pleasant user experience that connects the website to the world of babies and parents.
Developing a language
To create a calm and pleasant user experience, especially for users in stressful situations, I chose the color turquoise (#5ED2C8), a light background (#F4F6F7), and blue-gray (#4D5E6D). This combination creates a pleasant harmony and a relaxed atmosphere to reduce stress and anxiety.
Font
Fb Coherenti Sans
Light
Medium
Body- 14px
H2- 18px
H1- 24px
Icons
FCD8CC#
#E7ECDF
#2f4025
Screens
A clear stepper showing the posting steps, helps users in moments of stress.
A prominent section with an offer to purchase a gift voucher, including a call to immediate action.
Adding a search button for item type selection.
The “Quick View” pop-up provides convenient and fast access to product information without interrupting the browsing flow on the shop page.
A prominent chat button that enables discreet and secure communication with the advertiser.
Direct advertisements on the homepage with filtering for personalized results.
Use the notification option to save yourself from laborious ad tracking.
We’ve broken down the checkout process into 3 steps:
– Shopping Cart – Summary of Amount
– Technical Details such as Adding a Coupon, Shipping, etc.