I once had a chance talked to the interaction team lead in Amazon.com, we talked about redesign of Amazon.com homepage, I think it's a good example of interaction design, so here I'm going to share with you the redesign story.

How I encounter the chance of Redesign
I was reading this book Don't Make Me Think, it's a very good book about user experience design for websites. I found the author of the book, use Amazon.com as examples in many cases, such as bread crumb design, category tags, and etc;



So I became curious about the interaction design on Amazon.com. Coincidentally, Amazon was looking for an user experience expert, I got a phone call from the recruiter from Amazon, then we talked about redesign of Amazon.com homepage.


Amazon.com Homgpage
Amazon.com is actually a clean website, regarding the vast amount of content. I have to say the interaction team did a pretty good job, if you can remember those past versions of it's home page.


If you are a interaction designer/ information architect with many years experience, I bet you can understand how painful it is handling lots of ads banner on a page. What makes it even worse is, when you have to deal with lots of images and text, and you want to differentiate these contents from ad banners, it gets more complicated. Why it's so complicated? Because the ad banners client sometimes doesn't want those ads looks obviously like ad banners, otherwise users might just ignore them and never click on them.

You can see that Amazon.com nowadays use a smart way to differentiate ads and non-ads content: background color. Most of the non-ads content, such as product categories, search column, user account & suggestions, are filled with background color;s and vice versa, most of the ads are plain white background. Usually on a white background webpage, users tend to seek for colorful contents, so this strategy Amazon use is pretty good, user can easily find the most important contents on the homepage.

Redesign Idea
However, it doesn't mean that the home page of Amazon.com is so perfect that nothing can be improved at all. Information architecture wise, the homepage of Amazon.com is well-organized; but it could be better if the designer takes user's individual difference into concern. For example, a 32-year-old sales manager might not be very interested in "New and Used Textbook", while a 15-year-old kid is not so interested in "Shavers from BRAUN".

How can we improve that part? Can we create a customized homepage for different user groups?
... to be continued

Redesign: Image Search of Windows Live Search

Then, Microsoft people asked my opinion about their image search of Windows Live Search page.

I'm a designer, a programmer, and a manager, and also a family member of my sweet Taiwanese family, so for my personal experience, I search images for different purpose. 

While people told me that Britney shaved her head bold, I was pretty surprised and I couldn't wait to see her bold head. I used image search to find the picture of her bold move, bold head. For that experience, I just wanna see her head, the image, and pass the image to my friend without download it to my laptop. I was thinking about how I can do it, and found that no image search engine (Google, Yahoo, Windows Live) provide that "quick share" function.

While some other times, I use image search to find pictures that I can use for my blog, to enhance things I wanna explain in my article. Also, sometimes I look for pictures for creating website, design name cards, poster, make banner for my clients. I appreciate that most of the search page provide the size option of search results. However, that seems to be the only kind thing they have. 

Windows Live image search now has Black/White option I can choose, but it doesn't really feed my need(even though, it's a good start). Why not gives users more option they can choose? I believe there're tons of people search images for artistic and design usage, but they only have limited choices of function on search page. 

I have an idea that, it'd be great if I can manage those image search result on the site like managing my email. I can select them, and download multi images at once, or forward them to my friends, or even do some simple photoshop stuff on the search pages. (If you see some car manufacturer website, they actually provide the select and download interface like, shopping cart.)

To sum up, people use image search for various purpose, and use it in different ways, it'd be great to give people useful options of images handling for better user experience.

Something about accuracy

In fact, I got the experience of having hard time of finding the images that fulfill my need. Why? Because, first of all, it's hard to get the precise keyword to find images that exactly I need. Let's say, I need a pictures showing that people use internet to communicate with each other. What kinds of keyword come to your mind? internet? communicate? If you tried that, I believe you'll get lots of result that doesn't show you what you want. Then, I tried keyword like "internet", "social", and still, I don't get the image that I want.

What's wrong with this image search keyword problem? The problem is, I use the keyword that I'm describing a concept, instead of physical object that can be shown in the image. I used "Social", "Communication", and no one knows what they exactly look like. So, as a designer, how do I tackle this problem? The first answer come to my mind is, give people more detail option to choose, or to fill with, to find the images they really want. 

For example, provide a function call "Element". Let people to input the element that shows in images, like People, Action, Item, Place, and etc. Here's what I've got in my mind:

Through the more detail elements  showing in images, people can get more precise search result. By showing user those instruction box I design (as above), user might have better idea what they really want to search. You can type in different people's name in the box, and think about the locations, or what they're doing there.  For example, I can type Jennifer Lopez into the "people" box, and "Oscar" into the location box, and "dancing" into the action box, I can more likely get the image that I'm looking for.

Understanding the user scenario

This is how I started: Thinking out of the box. Because interaction design is always about deeper understanding of user and usability, so I thought about several questions:

1) Regardless of the PC or laptop I'm using to do video search, what would be the best way of viewing video? like watching TV, DVD at home? or watch movie in theater with popcorn? What kind of experience is enjoyable when you think about watching video? For me, definitely not like those using iPod, watching [Lost] TV series on subway.

This is a cellphone application, which lets you relax anywhere you want. No matter what kind of situation you're in, it suits your need with different modules (unless you're under water !!).

If you're busy at work, sound module allows you to relax with soothing music and comforting shapes, while you have both hands on work.



If you're tired both mental and physical, thermo module helps you relieve by helping you increase your body temperature. Base on the theory of the relationship between, once your body temperature get higher, your vessel get better circulation inside, and you will feel more relax.



What if you're really stressed by someone, that you hate or you love? Try "Shake Shake" module! It allows you to take a photo of the one you hate with cell phone camera, and shake him as a virtual character on your cell phone screen; The harder you shake, the better score you will get! [Try it] with your cellphone, if you have Nokia phone with Flash player in it.













This Relax Application is created by Daniela Stepensky and Roger TSAI, see the whole presentation [here].

Should you have any question of this application and related question(e.g. how to build a cellphone application, please do not hesitate to reply)

Rather than talk, we act. Rather than say it, we draw it. Here are the different scenario drawing to describe how people interact with various mobile relax modules.

1. Sound Visualization Module
(by Daniela)

1) standing on New York City subway platform, she's trying to squeeze in the packed cargo.


2) She feel exhausted getting a place on subway, so she started to use the mobile relax module: Sound Visualization Module.



3) As simple sound repeating, the peaceful ripple shape animation gradually changing with the tempo of sound.




4) she feels relaxed! Thanks for mobile relax module!!



2. Shake It Real Good
(by Roger)

1) in ITP workshop space(pcomp lab), things are messy; wires, cables, motors, soldering iron...


2) and crowded, people squeezing to find a place to work;


3) and noisy, metal cutting noise, people talk with unknown language, someone think he's a rocker and singing;



4) "I can't stand for these sh?t !!"


5) "go die" He pretend his cellphone is a wander stick, swing away these evil things (or a bat hitting someone)


6) he becomes Peacful again~




3. Temperature Module
(by Daniela)

1) He feels stressed from school works



(2)He use mobile relax module: visualizing your body temperature (above)


3) His body temperature get higher, using cell cable attach to his thumb and index finger to measure.



4) And as body temperature goes higher, he becomes relaxed

Conclusion:

Sometimes we need something physically balance our abnormal status, and sometimes we need an EXIT for our stimulated mind. We're trying to offer people various way to let go stress, come back to peace and relax. More thoughts will be updated on this blog.

----------This project is co-worked by ----------
Daniela Stepensky & Roger H.T. TSAI
---------------------------------------------------

So now, we have a bunch of ideas, and we thought about scenario, we started to think evaluate each ideas' benefits and shortcoming. Click on the link below and you'll see the analysis presentation.

See the analysis(click here)



This analysis brought us confidence and questions. Some of the idea are really attractive but with technical challenge, while others seems mediocre but more feasible. So, how do we proceed? The answer is: tackle challenge by using design method: Visualizing user scenario, animation prototype. We're gonna start drawing and some simple flash animation(specifically Flash-Lite, flash for cellphone). I also think about Google Sketch-Up which allows me to do fast easy 3D concept drawing/ simulation.

Since we decided to focus on ITP student as our potential user, we started to think about different user scenario, and also their potential need. Here is some interesting description:

1. Subway
User:
- Itp student, alone, commuting in a loud environment, with no privacy,
Stress Source:
- School work, loud environment, crowded places, time consumption
Existing Relaxation:
- iPod, PSP(game console), reading, cellphone game
Potential Need:
- entertainment relaxation method, talk to familiar people,

2. School
User:
- ITP student, faculty, admin, working on project
Stress Source:
- school project, time consumption, job hunting, noise, distraction
Existing Relaxation:
- iPod, wii, fuse-ball, friends, youtube video
Potential Need:
- quiet place, possibility of escaping ITP while at ITP,
relaxation method while working

3. Home
User:
- ITP student, faculty, admin, working on project
Stress Source:
- school project, finance in NYC, bills, grocery shopping, laundry
Existing Relaxation:
- TV, computer, bed & couch, alcohol, pot, Wii(game console), read, music
shower, smoke
Potential Need:
- to be discussed (you've almost got everything in your home)

4. Street
User:
- ITP student, faculty, admin, daily life and/or commuting
Stress Source:
- loud, crowded, time, crazy traffic in NYC, direction, weather
Existing Relaxation:
- iPod, smoke
Potential Need:
- wonderful map, portable entertainment relaxation

Later on, we'll discuss more about how we integrate our idea and the user scenario.