E-commerce Design

E-commerce Project Juri Seo Stefania M Lukito

IM 231 Inteface Design SP’12 | 23 May 2012

Statement Creative Brief

Background Bad Kitty Clothing was born in early 2001, in Los Angeles. It has become a thriving business providing great shopping for teen clothing and women’s apparel ever since. This site has been created 2001, and ever since that it has not done any improvement for the web design.

Target Audiences The audience that they target is young women in U.S. who love cute, edge feel of casual wear.

Objectives Redesigning this website needs to clarify branding of the logo, reorganize navigations, improve user friendly navigation, and attract to buy the products. Developing recognized brand and incorporate the logo to same feel of the website will brings recognizable brand in the industry and brings more customers.

Obstacles Obstacle may be let regular customers can get familiar with new navigations in short time without confusion, so they feel comfortable with a new interface.

Key Benefit Redesign Bad Kitty will create a wanting brand image through the young women and the audience will want to be a part of the brand by wearing and visiting the webstie. Connecting a social network sties and pinterest to boost traffic to the website.

Tone Bright, eye catcher colors Media Web page IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Mood Board Inspiration

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Style Guide

Primary Colors

Navigation: Gill Sans Bold Body: Gill Sans 14pt

Xerovit, optis qui autE cum et que ernam, quunt que aut as magni hic temped quis non reic tota dolupie nimendi sinctatem.

R: 255 G: 41 B: 133 #FF2985

R: 13 G: 217 B: 255 #0DD9FF

R: 255 G: 255 B: 0 #FFFF00

Secondary Colors R: 255 G: 232 B: 245 #FFE8F5

R: 153 G: 153 B: 153 #999999

R: 255 G: 122 B: 171 #FF7AAB

R: 102 G: 102 B: 102 #666666

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Original site

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Competitive Analysis

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Competitive Analysis

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Competitive Analysis Cart

Navigation Bar

Tone

Sub Navigation

Social Button

Products Page

Free People

Top

Light

Left Horizontal

Bottom

Product thumbnails with product name and price

Slide show images and some advertisements

Hollister

Top

Dark

Left Horizontal

Bottom

Product thumbnails with product name and price

Slide show images and some advertisements

Dripping in Fat

Top

Light

Left Horizontal

Bottom

Product thumbnails with product name and price

Scrollable products

Itself

Top

Light

Left Horizontal

Bottom

Product thumbnails with product name and price

No home page

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Home Page

Process

Logo Sketch

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Process

Concept Sketch

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Process

Concept Sketch

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Process

Wireframes

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Process

Wireframes

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Process

Wireframes

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Process

Wireframes

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Process

Wireframes

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Process

Wireframes

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Process

Wireframes

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Process

Wireframes

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Process

Wireframes

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Process

Wireframes

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Process

Wireframes

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Process

Wireframes

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Process

Wireframes

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Final

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Final

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Final

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Final

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Final

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Final

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Final

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Final

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Final

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Final

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Final

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project

Final

IM 231 Interface Design / SP’12 / Juri Seo & Stefania Lukito / E-commerce Project