Design Doc--Draft 2

Thesis Overview

Thesis Statement

This project is to create a CD e-commerce site that gives people a more interactive, intuitive and interesting offline shopping experience by focusing on its design and unique shopping functionality.

Thesis Description

This project is going to be a CD shopping site. As an online shopping user, I found that all kinds of online shopping stores have the same standard layout in order to facilitate the process of shopping. In these shopping sites, the interface has to be simple and clear, and the menu is usually like a bar, tags, or a table. For instance, amazon shopping site uses tags to keep the sections in organized way. Hierarchy is going on page by page. Users tend to get used to this formula, and they agree that the outcome is the most important in this action, which means they just want to get items and make sure they will be sent. However, among real life shopping behaviors, people sometimes don’t just want to get something in the store; instead, there are several factors that make them go shopping. For example, they may like to take a look of the store’s interior and display design, try on some clothes they are interested in, or even just want to touch the items. They feel entertained by doing this. They are not really shopping to purchase, but they are more shopping to entertain themselves. Most of the shopping sites emphasize the purchaze and try to make the process faster and faster, so they somehow exclude the group of those people. That is why people still want to go to real store to shop, because it is definitely more interesting than on online store. This reminds me that what the consumers will see and feel during the shopping process is also important.

During the research, I found that there are several common reasons for people to shop online. First is that there are more choices online than a music store. People don’t mind waiting for a CD that they couldn't get in a music store. Secondly, online CD shopping is a convenient time saver. If they don't feel like going out, they can just stay home and shop CDs through the Internet. Third, the Internet breaks the geographic limitation of some areas. If people want CDs that are only published by certain music shop but there is no that shop in the city they live, they can only order it online. Overall, online CD shopping is for the people who are goal-oriented. They order CDs online because they want specific CDs, and they don't want to waste time shopping.

On the other hand, shopping for CDs in a music store offers people lots of fun. The first factor is the shopping environment. When most of the CD sites keep the similar format, music stores have different styles. Good interior design can motivate customers' shopping appetites. The second thing that is fun is to touch the CDs. People like to see it and feel it, so they think it’s real, and feel like buying it. Besides, some of my interviewees agree that finding a CD in a music store is like a trip of discovery. They like to discover a CD that they don't expect, and regard it as a surprise after they see the CD cover or listen to it in the store. This finding fulfills their desire of getting things which are new, unexpected and also good. These are the interesting things that people cannot presently get from buying CD online.

Project Overview

Purpose of Project

The reason I am making this kind of shopping website is all because of “process”. I believe that in digital interface world, the process is always important than the outcome for users, because that’s where they can get the enjoyable experience. It even has no outcome, because there is no end. Users never have idea that where will be their stop. However, shopping sites always end up with the last page that says “thank you, your order has been confirmed”, and close the window without having second look. I’m wondering how to make the process more intriguing, and make consumers feel shopping, not just finishing. I have seen a shopping site that is trying to be different in terms of the screen composition. It doesn’t just list categories and items linearly but tries to play with the interrelationship among the items. In this way, every item becomes meaningful and alive. Also, the action of searching items is more interesting to the users.

So far, I’ve never seen any CD shopping site that is substantially different in design from one to the other. Most of them are filled with CD covers and show all the information and price at the same time. One of my interviewees said he was always overwhelmed by that and got annoyed. He just wanted to get the CD they want, pay it, and get out of the site. However, in my project, I will try to make people stay by letting them watch the CD covers, listen to the music, and then decide whether they are gonna buy it or not, instead of showing all the information at one page.

This project doesn’t intend to imitate a real stroe by creating a real store image, such as a 3D modeling store. Because it is online shopping, it still has limitations; besides, there is no point to create a real store image, because it couldn’t be exactly the same as going to a real stroe. The concept mostly is about the feeling of shopping. Like I said, some consumers like to take a look, or try something new, and that’s what I’m trying to do.

Therefore, this CD shopping site is going to give the users a new experience. Buying music is an emotional experience, and that is joyful, playful, and unexpected surprising. Now this project is going to bring all these emotions to the Internet users, to prove that buying music online can also be fun.

Component overview

This project is going to be a different online shop. It will have an intro screen, which shows the logo of the CD shopping site, and then goes into the main purchase screen. I want to get rid of the frame-like format and page-by-page sequence, and create a space by using near and far perspective technique. Furthermore, the full content of the section will also be shown, and not requiring the user to click a certain button and go to another page. In other words, it will be like a flow chart, which shows all the things at one time. The hierarchy will be built by making them near and far. For example, the section that the users are in is the nearest, and the rest of the sections are further. Besides, expect for the CD covers, all the elements will be types. Since all things are going to happen in a virtual space, they will be moving and floating, and I think dynamic type is more interesting than graphics. Also, in case of the disorder elements floating around the space confuses users, type is the clearest message; it already tells the users “what I am” without doubt or guess.

I finally concluded my research resource to a solid idea of my project. The audience of this project is going to focus on both the goal-oriented group and non goal-oriented group. The first way is to give users the aesthetic experience, which means transmit the sense of beauty and design to users so they would like to stay in the site. The second way is to create distance. Unlike the existing CD sites that list all the CD covers they have in one page that could make user overwhelmed easily, this project is going to organize CDs in different distance. The strategy is set CD cover in near-and-far perspective, to mimic the view when shopping in real life. Users tend to view the item that is nearest to them, and then further and further. Thus, shopping in this website will be like a trip of discovery. The third way is to allow users to view the whole CD case. When they found the CD they might be interested in, they click it to enlarge the image, and flip it over by clicking it again. In this way, they can see the back of CD and read what songs it includes. They can also click songs' names to listen to them. The final step is to decide if they want to buy it or not. Click on the buying icon, and the users will go into buying screen. This site will also offer digital format, for users who don't what to purchase all the songs on one CD. They can pick songs on certain CDs to download, but still they have to pay for them.

This project is designed for smaller independent music companies that only published CDs of underground musical artists. The intended audience will be the people who like to try different kinds of music and also like to shop in music store. Also, these independent music companies might only have one store in certain city. This website can offer a feeling of shopping in real store to those people who live in other cities.

Component Design
Component 1

Logo: Click the logo and it will go to the main interface screen. The logo will move to the left top of the screen.

Component 2

Click the logo and come into this screen.

logo: Showcasing the logo and will keep in each screen. Clicking on it to see the company’s information.
ABCDEF…: These letters represent the various categories of CDs. Clicking on them and go into the category belongs to the letter.
Scroll bar: Scroll up will go further to the later letters.
Intent: Music stores usually put CDs into categories by letters.

Component 3
Click “logo” and come into this screen.

Logo: showcasing the logo.
Information: showing the company’s brief and contact information.
Arrow: back to the purchase screen.


Component 4
Click “A” and come into this screen.

logo: Showcasing the logo and will keep in each screen. Click it can see the company’s information.
A mark: Telling the users which category they are in. Click it will go back to the letter category screen.
CDs: The CD covers are placed in different positions. Every CD cover is in different sizes, too, so they look near-and-far. Clicking on one will enlarge it. All the CD covers will also be enlarged when clicking anyone of them, and the view looks like going forward.
Scroll bar: Scroll up will go further to the later CDs.
Intent: This is like when shopping in music store, every item has different distance to the customers’ eyes.



Component 5

Click any one of CDs and come into this screen.

logo: Showcasing the logo and will keep in each screen. Click it and see the company’s information.
A mark: Telling the users which category they are in. Click it will go back to the letter category screen.
CD: showcasing the CD cover.
Icons at the right bottom (from left to right):
First icon: Flipping the CD.
Second icon: Buy the CD.
Third icon: See the comments and also write down their own comments.
Forth icon: going back to the A category.
Intent: Like when the customer pick one of the CDs and looks at it. In here the customer can choose to flip it to see the back, to buy it right away, to see comments about this CD and also write down their own comments.

Component 6

Click the flip over icon and come into this screen.

logo: Showcasing the logo and will keep in each screen. Click it and see the company’s information.
A mark: Telling the users which category they are in. Click it will go back to the letter category screen.
Songs: Show the name of the songs.
Bar code sticker: showing the price.
Icons next to the songs:
Earphone: Click it and listen to the song.
Shopping cart icon besides the songs: Click it can choose to buy the song.
Icons at the right bottom (from left to right):
First icon: Flipping the CD.
Second icon: Buy the CD.
Third icon: See the comments and also write down their own comments.
Forth icon: going back to the A category.
Intent: Flipping it over and see the back of the CD. In this screen, the users can choose to buy the song in digital format or buy the whole CD.

Component 7

Click the earphone will come into this screen.

logo: Showcasing the logo and will keep in each screen. Click it and see the company’s information.
Artist: Showing the information of the playing song.
Words: Song’s lyrics.
Control interface: This is like a media player control bar. There are “play”, “stop”, “forward”, “backward”, and volume control. Press “play” and it will turn to “pause” key. Press “stop” will go back to the CD back.
Upper shopping cart icon: Buying this CD.
Lower shopping cart icon: Buying this song.
Intent: This screen is giving the users the visual and hearing experience. The lyrics will move following the music. The beauty of moving typeface will be addressed here.

Component 8

Click “buy this CD” will come into this screen.

logo: Showcasing the logo and will keep in each screen. Click it and see the company’s information.
A mark: Telling the users which category they are in. Click it will go back to the letter category screen.
CDs: Click each of them will enlarge the one. All the CD covers will also be enlarged when clicking anyone of them, and the view looks like going forward.
Scroll bar: Scroll up will go further to the later CDs.
CD at the bottom: These CDs are the ones users choose to buy. Click them can enlarge them and see the details. Intent: This is the first general idea about my shopping cart system. I’m still considering about should I use cart or not, but the purpose is to mimic the feeling of grabbing CD in hands.