Carrie Sucharski is an Interactive Media Design student at the Art
Institute of Atlanta. In her spare time, she enjoys listening to music as well
as creating it. Her music alias is “Elephant Trax,” which represents a style of
music that is both new and old. The base of the music stems from tribal roots,
which is then transcended into a modern composition. Carrie Sucharski is
interested in finally having a website for her music, so that she can promote
herself as a music artist as well as a sound designer. She would also like to
use her website to encourage youth to create their own music, as well as
encourage others to collaborate with her.
The purpose of this design document is to provide the client
with a record of the decisions made in designing the site. It serves as a road
map for the site's construction.
Information Architecture (IA) is the process of organizing
and presenting data to the user in a meaningful, clear and intuitive manner - so that the user knows
where to go, what to do, and encourages them to return to the website. IA is the foundation of all great
websites. All other design aspects - form, function, metaphor, navigation,
interface, interaction, visual, and information systems - build upon the
groundwork of information architecture. Initiating the IA process is the first
process when designing a website.
Information architecture also involves the design of
organization, labeling, navigation, and searching systems to help people find
and manage information more successfully. Organization systems are the ways
content can be grouped. Labeling systems are essentially what you call those
content groups. Navigation systems, like navigation bars and site maps, help
you move around and browse through the content. Searching systems help you
formulate queries that can be matched with relevant documents.
·
Abbreviations & Acronyms – for
commonly used phrases
·
Competitive Analysis – variations
and similarities between our competitors
·
Web Site Requirements – a guide used
to create consistency and accuracy through out the site, and to keep the
website actively running and functional
·
User Personas/Audience Definition –
definitions of potential and ideal www.Elephant-Trax.com users
·
User Scenarios – tables and charts
used to define Elephant Trax’s user base and case scenarios, which help to keep
the site logically geared towards the user’s actions and goals
·
Site Map – an index of every page on www.Elephant-Trax.com
·
Interactive Wire frames – a
skeleton-like layout for each page, which explains how each section of the page
is divided up and how they are used
This
Document contains the following abbreviations and acronyms.
|
Term
|
Description
|
|
CGI
|
Common
Gateway Interface
|
|
CSS
|
Cascading
Style Sheet
|
|
ET
|
Elephant
Trax
|
|
FTP
|
File
Transfer Protocol
|
|
GA
|
Georgia
|
|
GD
|
Graphic
Design
|
|
HTML
|
Hyper-text
Markup Language
|
|
IA
|
Information
Architecture
|
|
PHP
|
Hypertext
Preprocessor
|
|
PS
|
Adobe
Photoshop
|
|
URL
|
Uniform
Resource Locator
|
|
 
|
Rating: 1
out of 4 (poor)
|
|
|
Rating: 2
out of 4 (moderate)
|
|
|
Rating: 3
out of 4 (high)
|
|
|
Rating: 4
out of 4 (exceptional)
|
Competitive
analysis is a process that not only produces usability metrics, but also aids
in strategic goal-setting and planning for an entire site. By knowing what the
competition has to offer, the design team can create a design strategy that
capitalizes on our strengths and on what we have to offer that is unique.
Esthero is
a talented artist from Toronto,
Canada, whose music
can be described as a combination of hip-hop, trip-hop, acid jazz, R&B,
reggae and ska. Esthero has released 2 full length albums, Breath From Another (1998) and Wikked
Lil’ Grrrls (2005). The design of her website wonderfully represents her
persona and style, and is equally admired by her fans.
|
Assessment Criteria
|
Rating
|
http://www.esthero.net
|
|
Navigation
|
|
The
global navigation is simple and easy to use. There are status indicators and
page headers to tell the user which page they are on. There is no need to
have breadcrumbs as the site does not have any additional layers of content,
other than what is provided in the main menu.
|
|
Features
|
|
Features
include news (current events), music videos, a Flash mp3 player to listen to
songs, email newsletter for updates, and a message board for discussion.
|
|
Design/Layout
|
|
Design is
great because it is consistent: global navigation at bottom, Flash mp3 player
in the upper right hand corner, and content is located in the center of the
page.
|
|
Usability
|
|
The text
throughout the site is readable (but not selectable). The text is white for
content, dark pink for subjects and headings, and light pink for links.
|
|
Overall
Rating
|
|
This site is designed very well and can be used by any
intermediate web browser. The eye-catching design is appealing and grabs the
user in for more exploring. The Flash mp3 is a plus as it allows users and
fans to get an immediate impression of the artist.
|
Figure 1: http://www.esthero.net
Please view
Appendix A, 11.1, for a screen shot of the “News” page.
The Prodigy
is a group of 3 artists from Great
Britain that make electronica and dance
music. The band has released 4 full length albums, all of which have been very
successful in the mainstream and underground music charts. This year, Prodigy’s
website won Best Web Site in the Creative Industries awards.
|
Assessment Criteria
|
Rating
|
http://www.theprodigy.com
|
|
Navigation
|
|
The
global navigation is easy to use and also has a layer for sub navigation.
There are no status indicators on the page but there are page headers to tell
the user which page they are on. The website does not have breadcrumbs incorporated
into the design.
|
|
Features
|
|
This site
has great features such as news, pictures, audio clips, downloads, a store,
and a guestbook. Additionally, the site has a section that talks about the
band’s album concept, as well as the concept for the website.
|
|
Design/Layout
|
|
Personally,
I love the design of the website as it ties into the band’s latest CD art.
The layout is structured and consistent, the content is always presented in
the same place, and the media is very accessible.
|
|
Usability
|
|
The body
text is hard to read since it all has been “graphically treated.” However,
with patience the text can be read. The navigation is intuitive for moderate
web users.
|
|
Overall
Rating
|
|
The website is graphically appealing, hip, and very “in
your face.” The site has great features, and the content is easily
accessible.
|
Figure 2: http://www.theprodigy.com
Please view
Appendix A, 11.2, for a screen shot from Home page.
Bjork is an
extremely talented pop/electronica singer and artist from Iceland. She
has been singing since the age of 12, when she released her first solo album.
From there, she went on to sing for a band called The Sugarcubes, who released
a string of successful and popular albums. In the early 1990s, Bjork left the
band to begin her solo career and was greeted with immediate success. She has
released 8 full length albums and has received many awards and praise
throughout her career.
|
Assessment Criteria
|
Rating
|
http://www.bjork.com
|
|
Navigation
|
|
The
global navigation is simple and easy to use as it sits on the left hand side
of the screen. There are status indicators and page headers to tell the user
which page they are on. Additionally, this site uses breadcrumbs on all the
pages, especially since this site is very deep and informative.
|
|
Features
|
|
Features include
up-to-date news, dates and events, photo gallery, video gallery, lyrics,
gigography, discography, message board, shopping, and mini-features for each
album and single.
|
|
Design/Layout
|
|
The
design of this site is excellent. For the homepage, the navigation is on the
left with text links. For each of the other sections in the site, they have
their own style, which is consistent with the site overall. Each of these
styles also includes bread crumbing and text link navigation. Other feature
pages do not need links as they are presented in a vertical fashion, as if
one was reading a newspaper article.
|
|
Usability
|
|
This site
is very intuitive in terms of navigation and access to information. Additionally,
the information hierarchy is excellent and the layout is straightforward.
|
|
Overall
Rating
|
|
This site also receives a low rating because it forgets to
“preach what you teach.” It is also hard to immediately tell what the site’s
goals are.
|
Figure 3: http://www.bjork.com
Please view
Appendix A, 11.3, for a screen shot from Home page.
Underworld became one of the most
crucial electronic acts of the 1990s via an intriguing synthesis of old and
new. The trio's two-man frontline, vocalist Karl Hyde and guitarist Rick Smith,
had been recording together since the early-'80s new wave explosion.
Underworld has been a big influence
on me musically by pushing me into the beat-making music scene. Underworld is
also innovative for incorporating live video into their shows, which has
encouraged me to experiment with video that is flashy, fast-paced, and random.
|
Assessment Criteria
|
Rating
|
http://www.dirty.org
|
|
Navigation
|
|
The
website for Underworld has no global navigation. There is navigation on the
homepage, but these links only take you to external Underworld feature sites.
Additionally, all of these pages have their own design, and the navigation is
a guessing game. The user never knows where the navigation is going to show
up, making the experience frustrating and lackluster.
|
|
Features
|
|
In the
midst of the site’s current design overhaul, most of the features are still
intact. These include news, tour dates, web cast videos, a message board, and
a store.
|
|
Design/Layout
|
|
The site
lacks a consistent layout. Each section has its own design, look, and way of
presenting information. This is very confusing to the user and makes it hard
to find exactly what they are looking for.
|
|
Usability
|
|
The site is
hard to navigate, and information is difficult to find. The site lacks
information hierarchy and consistency.
|
|
Overall
Rating
|
|
Currently, this site is going through a design overhaul
and therefore lacks in organization, consistency, and the ability to hold the
user’s attention.
|
Figure 4: http://www.dirty.org
Please view
Appendix A, 11.4, for a screen shot from Home page.
·
Business/Functional Requirements – are the goals and
objectives of the business, what the site can offer to the customers, and
functions/features that can satisfy the user goals.
·
User Requirements – outlines what the user will need
in order to accomplish goals.
·
Design Requirements – outlines the requirements in
which the design will abide by, such as resolution, browser compatibility,
contrast, tone, etc.
·
Technical Requirements – the types of
hardware/software necessary to build the site (technical specifications) and
make it work.
·
To promote the musical skills and talent of Elephant
Trax (Carrie Sucharski).
·
To seek potential clients/work as a sound designer –
such as interactive media projects and movie sound tracks.
·
To seek a recording contract and the interest of the
media.
·
To seek the interest of artists like me in an effort
to collaborate on music.
·
Consistent global navigation and labeling.
·
Feedback to provide the user with location, such as
bread crumbs and status indicators.
·
Fast loading time.
·
Visually appealing page design and consistent layout.
·
800 x 600 design resolution.
·
Site adheres to usability and accessibility standards.
·
High contrast and color coding to identify content.
·
Layout relies on tables set at 100% (for width and
height) to accommodate any user with any resolution.
·
There is a relative font size of at least 10pt,
Arial.
·
Links are designed with CSS, easy to understand with
underlines, and rollover state.
·
Graphics are compressed to load in at least 10-15
seconds.
·
Navigation contains image rollovers, status indicators,
and alt tags.
·
All images contain alt tags.
·
CSS formatting for body text, text links, tables, div
tags, etc.
·
HTML to create the basic shell of the site.
·
Macromedia Flash to execute the MP3 player and
“Mix-n-Match” features.
·
FTP to upload the site onto the Web for testing and
browser issues.
·
CGI for newsletter subscriptions.
·
JavaScript for today’s date feature.
An audience
definition is important because it helps us to understand who to design for and
how to make that user happy. To be successful in this process, one has to think
like the user and understand how they see and user the Internet. Again, the
motto is “We must think like the user, not the developer.”
·
Primary Persona – The primary audience is a common user who is both important to the
business success of the product and needy from a design point of view. May also
consist of a beginner user or a technologically challenged one.
o
13-33 years old, mostly females
users but some male, High School education, college students and graduates, Web
and Music Industry professionals.
o
Medium to high technical skills, 56k
to DSL connections, uses Internet 4-6 times a week, owns one to two personal
computers.
o
Enjoys visually appealing design
that is “hip”, global navigation, consistent layout, medium sized text;
dislikes long loading times and banner advertisements; needs fast loading
times, 800x600 resolution, easy access to content.
·
Secondary Persona – The secondary audience may be a powerful user or one that is
novice. They are less valuable from a business standpoint, but cost a lot in
customer support.
o
20-30 years old, male and female,
consists of college students, freelancers, and Web Industry internships and
jobs.
o
High technical and Internet skills,
DSL to T-1/Cable connections, uses Internet daily, owns a personal computer
with access to school labs.
o
Enjoys futuristic design, Flash, web
trends, global navigation, any screen resolution; dislikes banner
advertisements, long vertical scrolling; needs tutorials, books (maybe a
shopping cart), PSD files and downloads, consistency.
·
Complimentary Persona – The complimentary audience is a user
who has radically different needs for the system, and may even need a
specialized design of their own. This audience shows us another side of the
product we might not have seen otherwise.
o
28-48 years old, equal number of
male and female users, college graduates, and various middle-class careers.
o
Low to medium technical skills, 56k
modem connection, uses Internet 2 or 3 times a week, owns one personal
computer.
o
Enjoys simple two-tone design with
professional feel, global navigation on left or top, 800x600 resolution;
dislikes banner advertisements, small text, Flash, bright colors; needs alt
tags, clear labeling, high contrast, fast loading times, and consistency.
User Scenarios
are used to create the site’s potential and ideal user base. Creating these
personas is a calculated process of brainstorming and research findings. For
each user, we provide three scenarios (or goals) that a user may face when
visiting and using www.Elephant-Trax.com. Then we explain
what the user needs from the site, site features that compliment the needs, and
the user’s behaviors used to approach the site and find what they are looking
for.
The site map
documents the pages of www.Elephant-Trax.com,
and also includes the relationship of the pages to each other and any
interaction between them.
To be added in week 4 of the project life cycle.
The first step of
this process included going through www.Elephant-Trax.com
and completing a content inventory, which is the process of determining every
single bit of content on the site, as well as content to be. Carrie Sucharski,
Interactive Media Designer has to divide and label the site with topics
currently available, and yet still leave room for the site to grow. This
process includes directory naming, file names, and labeling. We also had to
keep a few things in mind during this process, such as how a user identifies a
page, whether something was a category or subcategory, determining the content,
and looking for reoccurring topics and phrases.
Wire frames are a basic outline of an individual page, drawn to indicate
the elements of a page, their relationships, and their relative importance.
Only 4 wire frames are included because they are the same for all 10 pages –
and to include 10 schematics would be too repetitive and a waste of paper.
To be added
in week 4 of the project life cycle.
Elephant Trax represents a style of music that is both new and old. The
base of the music stems from tribal beats, which is then transcended into a
modern composition. The name Elephant Trax can be broken down into two parts:
Elephant: represents the very nature of the animals – wild, captivating, and
mesmerizing. They are also creatures that make loud noises with their feet
stomping and vocal calls. Some elephants are known to mimic the sounds of urban
life, such as truck motors and chirping birds. This very idea is conveyed
through Elephant Trax’s music in that what may sound like one thing may
actually be something different. Some elephants live in jungle environments, so
it’s only natural that some of Elephant Trax’s music contains those themes –
whether it’s literal jungle noises, or those of the actual music genre/style.
Trax: this represents the word ‘tracks’ in the sense of a music track on a
CD. Trax also represents the footprints that elephants leave behind when they
walk. Where ever they go, you can follow them as they are the leaders of the
animal kingdom.
To stylize the branding and logo, I would like to use the following
existing logos as a guide.
As this document stands, it provides the client with a record of the
decisions made in designing the site. For any future instances, it will serve
the client and any future designers with insights on how to label navigation,
section/divide content, and design the layout. It will also lie out why the
current design is the way it is: to satisfy the users’ needs, goals,
preferences, and interactivity with the site – and to keep the users coming
back. If a future designer decides to ignore this information, then the company
will lose business, money, and users.
To be added in week 5 of the project life cycle.
To be added in week 6 of the project life cycle.
