E-commerce site
Skateboard shop
Introduction
I redesigned an existing e-commerce site. It is on sale apparel for men, women, and kids and skateboard or snowboarding products on this website.
Typography
This characteristic is unique because this is Sanserif. But sometimes it has Serif. When we play skateboarding, many people who have different ages, genders, nationalities, and specialty styles gather in the same place to do this. So I chose this font to represent this scene.
This means “Flat” or “Neutral”. I chose this font to get a contrast between "Cantora One" and "Noto Sans". Also it increases visibility and literacy.
Colors
Color Scheme
I chose a simple color for the color of the main because there are a lot of skateboard brand items on this site. The skateboard items are generally very colorful. So if I use a lot of colors, the items aren't highlighted. But I wanted to use an accent color for the button or line. So I use complementary color usage.
Keywords from color
Problems
1. Navigation Menu
It is difficult to instantly see this section because there are a lot of text.
It's hard to see the navigation menu because of yellow box.
→The yellow box is stronger than navigation menu.It's impossible to check second category in the navigation menu.
2. First View Image
It's hard to understand what is this or what is infomation because the catchphrase and image don’t match.
3. Brand section
It's hard to see the logo because the colors are too light.
It’s hard to understand these are category section.
4. Category section
The category column is confused because there are three categories in one picture.
5. Category section
The category name can’t be read because the pictures for the category are portraits
It takes time to read the category name because the users have to scroll to reach the category name.
6. Instagram section
It’s hard to recognize this section is introduce Instagram because the pictures aren’t square.
Solution
Top Page
① Header
Some function for the header is changed from text to icon for easy understanding immediately. Also, the drop-down is placed for the navigation menu. So the user can also see the second categories on the navigation menu.
② First View Section
The slider is placed on the first view section because some campaign banners are possible, and the space reduces in the content area.
Eg: Package deal, Gift card, Pick up in store, Seasonal campaign, Other
③ Brands Section
The "More view" button makes new because it has more than 100 brands sold on this site. So the user can search for other brands from the top page. Also, these brands are organized by changing color or putting text for the brand name.
④Feature Categories
It is forcused only equipment in this section. Also, the user can see this section easier because the banner shapes are from portrait to landscape. So they can see it without scrolling.
⑤Item Sections
Added the Item sections for ranking and new arrival because there are no items on the original site. So they can't see the products without going to the other page.
⑥News Letter Section
Changed the position from the footer to the content area because it’s a high priority to collect potential customers, and most people don’t see the footer.
Category Page
① Sub-categories
It changed the image shape from portrait to landscape. So the user can see all sub-categories without scrolling at the first view. Also, it unified the category name between this section and the navigation menu.
② Items Chart
It made the Item chart on the category page. So the users see the items even if they don’t go to the other pages. Also, it made the sort function because it’s easier to find a product they want.
Detail Page
① Color Chart
It is a better visual understanding of what color is available by putting the color chart instated of the text.
② Description
It changed the position between the description and the recommended products because the users want to get more information about this product than other products at first.
③ Size chart
Almost apparel brand sites have a size chart for inches and cm. So cm added, too. The users can see by using the tab function.
Design (Overall)
Trying and Learning
Making a rhythm in the layout
I’ve never tried to make the layout has a moving or a rhythm. Therefore, I contrasted with the content area by shifting the shape of the title and picture. That was hard to adjust the position or size. Hence, I researched more than 20 sites’ designs. I learned the way to collect the components or parts which I can get an inspiration.
Prioritizing the information
When I did user testing, I gave interviewers some questions and showed them my design. But some users tried to reply to the questions before checking the website until blow. I thought this phenomenon was similar to the actual website on the internet. I've known that most people see just the first view or judge by only 3 seconds whether this website has the information I need or not. But I encountered that situation in person for the first time. So I learned again that we have to choose what information is essential and put them on the top as well as possible.
