eCommerce Wireframing with KTP
Individual Project | Web + UX Design

Quick Facts:

Role:

Information architect & Web designer

Time:

Fall, 2013 (2 weeks)

Client:

Keyboard Town Pals (KTP)
(51-828: Advanced Web Design)

[Skills]
Methods:

Content strategy (IA), wireframing

Tools:

Illustrator, MS Visio

Deliverable:

Sitemaps, Wireframes, and Content opinion

Quick Facts:

Please see previous slide

Project goal: Keyboard Town Pals (KTP) aims to become a nationally known software provider for children. KTP wants to ensure that their website’s contents reflect the quality of their software, and establish credibility amongst parents and teachers.

Current Site

The main purposes of this eCommerce site is to inform people about their products, sell their products, and connect with users and potential consumers.

(the current website)

By diving into the old website’s sitemap and major page type wireframes, I found that the Keyboard Town Pals website is full of content. There are blue and purple highlights and bold text scattered everywhere, which makes the site feel confusing and unprofessional. The content itself is categorized in a way that probably makes sense to the site owners, but does not make clear and immediate sense to a human being or even to a search engine. In its current state, the site feels like a personal blog that happens to feature some things for sale.

Therefore, my urgent suggestion is to put the most important tasks that are actionable up to the front.

Redesign the Architecture of the Site

1. The sitemap redesign

2. Wireframing for the main page types and redesign

The wireframes comprehensively considered all the main page types for a eCommerce website, namely:

• Home Page
• General Text Page
• Media Page
• Blog List View
• Individual Blog Post View
• Shop Landing Page
• Shop Product Page

The old wireframes:

The redesigned new wireframes:

Content Opinion

Summary of the redesign approach