Netanella is a popular provider of arts & crafts supplies, but the website was in need of a make-over. So as part of my studies, I took on the mission of redesigning this real e-commerce website.
Netanella
community, creation and muse
Areas of Responsibility
UX Research
Wireframing
Prototyping
UI Design
Responsive Web Design
Original Homepage
The Challenges
Disproportionate sizes - cards and icons were huge.
Lack of typography scale - text was too small or without proper hierarchy.
The titles on the menu were incomprehensible.
Lack of search filter options.
The website was only in Hebrew.
The homepage wasn’t divided into sections, it was just an endless scrolling of product cards with some DIY cards in between.
The distinction between product cards and DIY cards was unnoticeable.
The tutorial pages had no layout whatsoever and looked like an outdated Word file. The typography was very small and the photos were disproportionately big.
The Original Design
Original Tutorial Page
Original Product Page
The Goals
Re-organize everything in order to make it easier for the website navigation.
Simplify the titles to make them more comprehensible.
Redesign the homepage - separate it into sections.
Redesign the different cards in order to differentiate one another.
Reorganize both typography and objects scales.
Translate the website to English to suit the global market.
User Research
Questionnaires Results
90%
Buy craft supplies online. Half of them buy only online.
100%
Follow tutorials when crafting.
60%
Answered that the reason they buy online is because there are more sales and it’s faster to find what they’re looking for.
89%
Buy supplies when they have a specific purpose.
100%
Gave up a purchase online at least once because of the website’s appearance or the display of the product, even though it was the product they were looking for.
Arta
Hobby
Yooletta
Strengths
Homepage separated into sections.
Good distribution of categories.
Weaknesses
Not many search filters in the category page.
Lack of offers for similar items in the product page.
Essential buttons and labels are sometimes unnoticeable or even missing.
Arta
Hobby
Yooletta
Benchmark
Strengths
Homepage separated into sections.
Good distribution of categories.
Homepage separated into sections.
Good distribution of categories.
Clear UI design.
Good typography scale and readable font.
Well designed product cards.
Homepage separated into sections.
Good distribution of categories.
Very clean UI design.
Font could be easier to read (maybe if it wasn’t serif).
Not enough filters options in the category page.
Lack of hierarchy in the text in the product's page.
The “Let me know when is back to stock” button is almost unnoticeable.
Lack of offers for similar items in the product page.
Lack of search filters options in the category page.
Labels on product cards (Sale/New/Hot Product) are almost unnoticeable, and they look like stickers rather than labels.
Lack of offers for similar items in the product's page.
Wrong sizes and spaces between elements in the product's page.
Small typography.
The CTA button in the product's card is unclear - just a “+” while hovering representing “Add to basket”.
Lack of “Buy now” button in the product's card.
Weaknesses
Special Conclusions
The websites of these stores often mirror their physical locations with a dense, busy appearance.
A website offering a wide range of items should have a user-friendly design that facilitates easy navigation, enabling users to quickly find what they're looking for.
Special offers should be visible.
The whole buying process should be fast and it should be easy to get to the products.
Tutorials should be easy to find.
Arta
Strengths
Homepage separated into sections.
Good distribution of categories.
Weaknesses
Font could be easier to read (maybe if it wasn’t serif).
Not enough filters in the category page.
Lack of hierarchy in the text in the product's page.
The “Let me know when is back to stock” button is almost unnoticeable.
Lack of offers for similar items in the product page.
Benchmark
Hobby
Strengths
Homepage separated into sections.
Good distribution of categories.
Clear UI design.
Good typography scale and readable font.
Well designed product cards.
Weaknesses
Lack of search filters options in the category page.
Labels on product cards (Sale/New/Hot Product) are almost unnoticeable, and they look like stickers rather than labels.
Lack of offers for similar items in the product's page.
Wrong sizes and spaces between elements in the product's page.
Yooletta
Strengths
Homepage separated into sections.
Good distribution of categories.
Very clean UI design.
Weaknesses
Small typography.
The CTA button in the product's card is unclear - just a “+” while hovering representing “Add to basket”.
Lack of “Buy now” button in the product's card.
Special Conclusions
Special offers should be visible.
The whole buying process should be fast and it should be easy to get to the products.
Tutorials should be easy to find.
A website offering a wide range of items should have a user-friendly design that facilitates easy navigation, enabling users to quickly find what they're looking for.
The websites of these stores often mirror their physical locations with a dense, busy appearance.
New Architecture Information
User Flow
Purchase an Item
New Wireframes
The main focus of the UX redesign process was to separate the homepage into different sections for an easy navigation, thus giving space to the many items displayed without being overloaded.
Another important step was to re-organize the mega menu, and re-write the titles with familiar ones so users can quickly find what they’re looking for.
Finally, filter options were added to obtain better search results.
Homepage
Product Page (Product on Sale)
Category Page
Product Page (Product Out of Stock)
Sub-Category Page
UX Process
Homepage
Thanks to the clean design, the harmonious colors and the new space given to the different elements, the website can finally breathe and convey the calm tone appropriate for the arts & crafts activity.
The new “Hero” section is now inviting, and the “About” section was added at the bottom of the page so users won’t miss the story behind the brand.
Final Designed Screens
Category Page
Adding a category page guides the user to find what they’re looking for within the right product group.
Sub-Category Page
The new design has smaller item cards with strategically placed labels that draw immediate attention so the user won’t miss a special offer or a product being out of stock.
The original design featured a large "Hero" section at the top, which, combined with the big menu, occupied most of the page. This section was removed to give more space to the items.
Product Page
Everything is now smaller in this page and all the elements are proportional to one another. Moreover, a “Buy now” button was added next to the “Add to cart” one.
Instead of two stripes of recommended items, one stripe is now dedicated to tutorials that use the specific product.
New Logo
Color Palette
For the UI redesign of the website, I wanted to stay true to the soul of the brand and keep the pastel and harmonious palette, since these colors resonate the calmness involved in the arts & crafts.
The original palette consisted of only 3 colors, so it was important to make it more vivid. For this reason, I added more hues to the predominant pastel pink, and included a mint green to spice it up a little and add more contrast.
973E43
Cordovan
FFAAAE
Cherry Blossom Pink
FFD6D8
Tea Rose
50B081
Mint
F1F9F5
Light Mint
1F1F1F
Eerie Black
525252
Light
Eerie Black
Rebrand & UI Kit
Heading 1 (38px)
Button (14px)
Price 1 (22px)
Heading 2 (34px)
Heading 3 (28px)
Secondary Title (18px)
Secondary Title 2 (18px)
Label 1 (35px)
Label 2 (22px)
Label 3 (16px)
Price 2 (16px)
Caption (16px)
Caption 2 (13px)
SubCaption (12px)
Body (18px)
Desktop
Heading 1 (28px)
Button (16px)
Price 1 (18px)
Heading 2 (24px)
Heading 3 (22px)
Secondary Title (18px)
Secondary Title 2 (16px)
Label 1 (22px)
Label 2 (16px)
Label 3 (13px)
Price 2 (15px)
Caption (14px)
Caption 2 (14px)
SubCaption (13px)
Body (16px)
Mobile
Type Scale
I chose a playful font for the titles that resembles the creativity needed for the arts & crafts. For the rest of the website I went for a solid font.
Aa
Purple Purse
Aa
Assistant
Desktop Grid
1440x1024
Gutter
20 px
Columns
142 px
Margins
80 px
8 columns
Mobile Grid
360x800
Gutter
8 px
Columns
48 px
Margins
16 px
6 columns
Product Cards
Category Cards
Tutorial Cards
Filter Options
Components
Menu
Newsletter Pop-Up
