Google Redux: Final Design Report

Ghaida Zahran Project 01: Google ReduxFinal Design

ITGM 709

Professor David E. Meyers

Concept

I wanted to create a design that would solve a problem for

searchers. Ive observed that many users when researching a topic

they will open search results in new tabs and windows so that they

can continue searching without losing their results.

Introduction

Saving search results, without the need to use the features of the

web browser.

Problem

Google Collector. Implement a collection feature allowing users to

collect and organize their search results into different collections.

Users will be able to access their search collections on different

computers at different times because it is tied to their Google

account.

ITGM 709 - Professor David E. MeyersProject 1: Google ReduxGhaida Zahran

Solution

Initial Sketches

These initial sketches outline a typical user flow of the process. At

this stage there were many design and layout issues, as well as

foreseeable technical problems. All of which are worked out in the

final design.


Results page: Once the user has typed in their

query they are presented with a list of result

in a side bar

Preview: When the user selects a result a

preview pane will appear showing relevant

information about the website

If the user thinks the preview of the page

shows promise, they are able to drag the

result from the list into the Collection area.

Collector

Start CollectingStart Collecting

[email protected] Collections

Final Design: Homepage

Ive completed this design based on feedback

from fellow classmates. Several problems were

noted with the initial sketches:

Live search results might be too

cumbersome for users.

It was not immediately obvious that the

user could click the result and be shown a

preview of the website.

Placing the sidebar on the right side of

the page interrupts the typical flow of

users who read from left-to-right.

Here Ive maintained Googles barebones

aesthetic and added the Saved Collections

feature at the top left, in case the user was

merely returning to a previously saved

collection.


_

_

_

Collector

Start CollectingStart Collecting

[email protected]

belgian chocolate

Saved Collections

Final Design: Search query

The user inputs her search query just as she

normally would, and clicks Start Collecting.


Collector Start CollectingStart Collecting

[email protected]

belgian chocolate

Saved Collections

Save Collection

New Collection

Images

Search Results

Web

Belgian Chocolate Online

www.chocolat.com Preview









Collected Items

More

Final Design: Results page

The results appear on the left in a side bar. Less

information is available at first than usual,

with a button indicating that a preview of the

page will be displayed when it is pressed. The

user may click More to get more results.



[email protected]

belgian chocolate

Saved Collections

Save Collection

New Collection

Images

Search Results Preview

Web


www.chocolat.com

www.chocolat.com


Preview

Flickr: belgianchocolate's Photostream

www.ickr.com/photos/frank... Preview

What is Unique About Belgian Chocolate?

www.wisegeek.com/what-is... Preview

Leonidas Fresh Belgian Chocolates

www.leonidas-chocolate.com/ Preview



Collected Items

The Largest Belgian chocolate store in the USA SINCE 1989 with the widest selection of the finest imported chocolates and candies for wholesale and retail.

About Us - Ups delivery time - Cool Packagings

- Shipping Policy

Cached - Similar

More

Homepage captured 4/4/2010

Final Design: Results page

Once a user has selected a particular search

result a preview of it will appear with

information about the page along with an

image capture of the homepage.



[email protected]

belgian chocolate

Saved Collections

Save Collection

New Collection

Images


Web


www.chocolat.com

www.chocolat.com


Preview









Collected Items



- Shipping Policy

Cached - Similar

More



Final Design: Adding result to collection

If the user is satisfied with the preview, she can

drag the page from the results list to the

collection area.


[email protected]

belgian chocolate

Saved Collections

Save Collection

New Collection

Images


Web


www.chocolat.com

www.chocolat.com


Preview









Collected Items



- Shipping Policy

Cached - Similar

More



Final Design: Page added to collection

Once the page has been added to the

collection the user is free to Save Collection,

Start a new collection, or open previously

saved collections.



[email protected]

belgian chocolate

Saved Collections

Save Collection

New Collection

Images


Web











Collected Items

More


Final Design: Dragging a new page to the collection

The user may of course also add more pages to

her collection.



[email protected]

belgian chocolate

Saved Collections

Save Collection

New Collection

Images


Web











Collected Items

More

Belgian Chocolate Online Flickr: belgianchocol...

Final Design: Collection

The design maintains Googles aesthetic while

offering more interactive features, and more

user-centric features that cater to typical

search and behavior patterns.


Documents

Google Redux: Final Design Report