Design Document -- Draft#1

Thesis Overview

Thesis Statement

This project is to create a CD e-commerce site that gives people an offline shopping experience by focusing on its design and unique shopping functionality. The process of buying music online can be more interactive, intuitive and interesting.

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 a 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. 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 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, or even just want to touch the items. They feel like being entertained by doing this. They are not really doing the shopping action, but they are more like feeling the shopping action. This is called “shopping for fun”. Most of the shopping sites emphasize on the conclusion 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 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 would rather wait for the shipping days and get the CD that they couldn't get in a music store. Secondly, online CD shopping is convenient and time saved. If they don't feel like going out, they can just stay home and shop CD through the Internet. Third, the Internet breaks the 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 CD online because they want specific CDs and they don't want to waste time for shopping.

On the other hand, shopping CD in a music store offers people lots of fun. First factor is the shopping environment. When most of the CD sites keep in the similar format, music stores have different style. Good furnish design can motivate customers' shopping appetite. Second thing that is fun is to touch the CD. People like to see it and feel it so they think it,s real, and feel like buying it. Besides, some of my interviewers agree that finding CD in a music store is like a trip of discovery. They like to discover the CD that they don't expect but 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 parts that people can never get from buying CD online.

Project Overview

Purpose of ProjectThe reason I make this kind of shopping website is all because of “process”. I believe that in the digital interface world, the process is always important than the outcome for users, because that’s where they can get the enjoyable experience beside trading. It even has no outcome, because there is no end. Users never have idea where they will 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 like shopping, not just finish shopping. I have seen a shopping site which 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 different from one to the other. Most of them are fulled with CD covers, and show all the information and price at the same time. People could get annoyed by that easily. They just want to get the CD they want, pay it, and get out of the site.

This project doesn’t intend to imitate a real store by creating a real store image. 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 store. 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 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. Get rid of the frame-like format and page-by-page sequence, I want to create a space by using near and far perspective technique. Furthermore, the content of the section will also be shown, instead of clicking 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, most of 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. For example, when the users click songs to listen to, the lyrics will be shown on the screen. They’ll move and follow the music.

According to the research I did, I finally converged them to the direction 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 be caught 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 make users be able to view the whole CD case. When they found the CD they might be interested, 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. Final step is to decide they want to buy it or not. Click on the sign of buying, the users will go into buying screen. In this site, it will also offer digital format, to consider the users who don't what to purchase the whole songs in one CD. They can pick songs in certain CDs to download, but still they have to pay for it.

This project is designed for smaller independent music companies that only published CDs of underground musical artists.


Component Design

Component 1

Logo: Click the logo and the main interface screen will be pop-up
Intent: Using pop-up window for the interface screen and also leave the logo window there. So it keeps reminding the users what company it is.


Component 2
Click the logo and come into this screen.ABCDEF…: These letters represent the categories of CDs. Click 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 “A” and come into this screen.

A mark: Telling the users which category they are in.
CDs: These are CD covers that placed in different positions. Every CD cover is in different sizes, too, so they look like near-and-far. 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.Intent: This is like when shopping in music store, every item has different distance to the customers’ eyes.

Component 4
Click any one of CDs and come into this screen.

A mark: Telling the users which category they are in. Click it can go back to the A category.
CD: Click one CD cover and it will be enlarged. There will be comments about this album somewhere on this cover.
Intent: Like when the customer pick one of the CDs and look at it.

Component 5
Click the CD cover again and come into this screen.

A mark: Telling the users which category they are in. Click it can go back to the A category.
Songs: Show the name of the songs.
Earphone: Click it and listen to the song.
Buy: Click it can choose to buy the song.
Buy this CD: Click it can choose to buy this CD.
Intent: Click the CD cover again means flip 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. There will be a label of price stick on it.

Component 6

Click the earphone will come into this screen.

Words: This is a 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.
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 7

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

A mark: Telling the users which category they are in.
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.