E-Commerce Redesign | UX | UI | Personal Project
The story
Or Shpitz is a gifted and successful confectioner known for her colorfulness and cheerful designs. However, her website is a bit "messy" and in my opinion does not reflect her profitable capabilities.
I chose to update her UX with a touch of UI design changes as well, so that the shopping experience would be as fun and delicious as her pastries!
Basically - Giving the site a makeover, making it nice and comfy :)
The Current Situation
Conducted with 22 users who shop at online confectioneries
purchased confectionery products only for special occasions
95%
want to see detailed pictures of the product from the outside and inside
90%
think it is important to know about promotions and prices
59%
said that special categories like recipes are an unnecessary but nice addition
68%
Pain Points
Details
component list
freshness
prices and discounts
inside photos
photos
comments
pics
variety
feel
allergens
smell
taste
freshness
details
validation
flavors
allergens
discounts and sales
choosing
clearness
messiness
taste
feel
Details
freshness
In general, it is important for users to know exactly what they are getting when buying: to see pictures of the product inside and out, to get a detailed component specification, etc.
Among those who don't buy online, the main reason is the inability to smell the product, touch it, understand the degree of freshness and, in general, lose the experience of choosing the product personally.
Originally...
The current site has a lot of unnecessary and undesigned text in places such as arrival directions or cumbersome delivery policies. On the other hand, where it is required - for e.p. in the ingredients and quality specs of the of the food or even in the customer reviews - it is lacking and unedited.
Mixed random info.
Sweets, salty & drinks together.
No filters, all together on home page.
Mixed random info.
Harry, Office party planner
I work in an office with a lot of employees.
We’re celebrating a birthday for someone once a month minimum and we like to order cakes and sweets, since nobody can bake. I hate that it's always the same food...
The Users
Sara, Stay home mom
I’m a mom to a 4 years-old and like to throw him nice birthday parties and sometimes get messy with him in the kitchen. I also like the options to make some big events
(like 10 year anniversary, etc.) unforgateble, though im on a tight budget.
Jennifer, Bakes for fun
I like cooking and baking at home, and as a QA manager i know excactly how important it is to work with good products. I want to choose only the best for my kitchen as well!
Market Research
I looked at other online bakeries and found that most of them have a slightly cleaner design, if still clunky at times.
In addition, some of their categories still remais unclear.
Many patisseries present almost all options as part of the main menu, instead of giving them a place as a filter within larger categories.
On the other hand, on e-commerce sites that aren't necessarily of sweets (e.g. Amazon) there seems to be more hierarchy, which I thought relevant to include in the UX here...
even if in a sweeter way
The Inspiration
Came mainly from e-commerce websites like Amazon, Super-Pharm and Mega Supermarket,
but one interesting idea for reviews came from Cake Factory.
So How
Does It Work?
1. Access Reviews
& Categories Easily
Get to the area that interests you in an efficient way, while enjoying a clean, organized and aesthetic experience.
You can even see right on the home page the original, authentic recommendations that real costumers have uploaded to social networks!
2. Filter &
Sort Products
You can sort the products according to their price, how recent or popular they are, etc., as well as filter them according to taste, color, size and other special features.
You can also save an item as a favotire!
3. See Details & Purchase Specs
Get up-to-date details about the product, including a variety of its photos, information about its components, purchase and delivery options and customer opinions - all this in an intuitive and easy-to-understand way.
Wireframes
The home page includes the main categories and attractive examples of their products.
Since many users expressed concern regarding the purchase of confectionery products online due to the quality and nature of the product, it was important for me to also make available the reviews of real customers.
The patisserie has a young vibe that is based, among other things, on social networks as well as on the brand's colorfulness and its photogenicity - or its "Instagrammability". Therefore, I decided to present these reviews in the most authentic way possible, drawn directly from user tags on Instagram.
It's easy to filter, it's easy to sort, and most importantly - it's easy to find exactly what we need, according to the specifics of what's important to most users.
The general details are accessible, and with them the purchase.
The purchase options and the technical details of the product are arranged in a hierarchical, simple and easy way.
The information displayed next to the item (for example, allergenic components or delivery options) instills confidence and comfort in understanding the product and the website's function.
Alongside this, options are presented that are also adapted to the user's search, to make it easier for him to quickly find what is relevant to him.
Check me out!
