Ghaida Zahran
Project 01: Google Redux Final Design ITGM 709 Professor David E. Meyers
Concept
Introduction I wanted to create a design that would solve a problem for searchers. I’ve 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.
Problem Saving search results, without the need to use the features of the web browser.
Solution 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.
Ghaida Zahran
Project 1: Google Redux
ITGM 709 - Professor David E. Meyers
Initial Sketches
Results page: Once the user has typed in their
Preview: When the user selects a result a
query they are presented with a list of result
preview pane will appear showing relevant
in a side bar
information about the website
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
If the user thinks the preview of the page
final design.
shows promise, they are able to drag the result from the list into the Collection area.
Ghaida Zahran
Project 1: Google Redux
ITGM 709 - Professor David E. Meyers
Final Design: Homepage
user@gmail.com
Saved Collections
I’ve 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
Collector
preview of the website. _ Placing the sidebar on the right side of the page interrupts the typical flow of
Start Collecting
users who read from left-to-right.
Here I’ve maintained Google’s barebones aesthetic and added the “Saved Collections” feature at the top left, in case the user was merely returning to a previously saved collection.
Ghaida Zahran
Project 1: Google Redux
ITGM 709 - Professor David E. Meyers
Final Design: Search query
user@gmail.com
Saved Collections
The user inputs her search query just as she normally would, and clicks “Start Collecting�.
Collector belgian chocolate Start Collecting
Ghaida Zahran
Project 1: Google Redux
ITGM 709 - Professor David E. Meyers
Final Design: Results page
Saved Collections
user@gmail.com
New Collection
The results appear on the left in a side bar. Less Collector
information is available at first than usual, with a button indicating that a preview of the
Web
belgian chocolate
Start Collecting
Save Collection
Images
page will be displayed when it is pressed. The user may click “More� to get more results.
Search Results Belgian Chocolate Online www.chocolat.com
Preview
Belgian Chocolate Online www.chocolat.com
Preview
Belgian Chocolate Online www.chocolat.com
Preview
Belgian Chocolate Online www.chocolat.com
Preview
Collected Items
Belgian Chocolate Online www.chocolat.com
Preview
More
Ghaida Zahran
Project 1: Google Redux
ITGM 709 - Professor David E. Meyers
Final Design: Results page
Saved Collections
user@gmail.com
New Collection
Once a user has selected a particular search Collector
result a preview of it will appear with information about the page along with an
Web
belgian chocolate
Start Collecting
Save Collection
Images
image capture of the homepage. Search Results
Preview
Belgian Chocolate Online
Belgian Chocolate Online
www.chocolat.com
Preview
The Largest Belgian chocolate store in the USA SINCE 1989 with the widest selection of the finest imported chocolates and candies for
Flickr: belgianchocolate's Photostream
wholesale and retail.
www.ickr.com/photos/frank...
www.chocolat.com
Preview
About Us - Ups delivery time - Cool Packagings
What is Unique About Belgian Chocolate?
- Shipping Policy
www.wisegeek.com/what-is...
Cached - Similar
Preview
Homepage captured 4/4/2010
Leonidas Fresh Belgian Chocolates www.leonidas-chocolate.com/
Preview
Collected Items
Belgian Chocolate Online www.chocolat.com
Preview
More
Ghaida Zahran
Project 1: Google Redux
ITGM 709 - Professor David E. Meyers
Final Design: Adding result to collection
Saved Collections
user@gmail.com
New Collection
If the user is satisfied with the preview, she can Collector
drag the page from the results list to the collection area.
Web
Start Collecting
belgian chocolate
Save Collection
Images
Search Results
Preview
Belgian Chocolate Online
Belgian Chocolate Online
www.chocolat.com
Preview
The Largest Belgian chocolate store in the USA SINCE 1989 with the widest selection of the finest imported chocolates and candies for
Flickr: belgianchocolate's Photostream
wholesale and retail.
www.ickr.com/photos/frank...
www.chocolat.com
Preview
About Us - Ups delivery time - Cool Packagings
What is Unique About Belgian Chocolate?
- Shipping Policy
www.wisegeek.com/what-is...
Cached - Similar
Preview
Homepage captured 4/4/2010
Leonidas Fresh Belgian Chocolates www.leonidas-chocolate.com/
Preview
Collected Items
Belgian Chocolate Online www.chocolat.com
Preview
More
Ghaida Zahran
Project 1: Google Redux
ITGM 709 - Professor David E. Meyers
Final Design: Page added to collection
Saved Collections
user@gmail.com
New Collection
Once the page has been added to the Collector
collection the user is free to Save Collection, Start a new collection, or open previously
Web
Start Collecting
belgian chocolate
Save Collection
Images
saved collections. Search Results
Preview
Belgian Chocolate Online
Belgian Chocolate Online
www.chocolat.com
Preview
The Largest Belgian chocolate store in the USA SINCE 1989 with the widest selection of the finest imported chocolates and candies for
Flickr: belgianchocolate's Photostream
wholesale and retail.
www.ickr.com/photos/frank...
www.chocolat.com
Preview
About Us - Ups delivery time - Cool Packagings
What is Unique About Belgian Chocolate?
- Shipping Policy
www.wisegeek.com/what-is...
Cached - Similar
Preview
Homepage captured 4/4/2010
Leonidas Fresh Belgian Chocolates www.leonidas-chocolate.com/
Preview
Collected Items
Belgian Chocolate Online www.chocolat.com
Preview
More Belgian Chocolate Online
Ghaida Zahran
Project 1: Google Redux
ITGM 709 - Professor David E. Meyers
Final Design: Dragging a new page to the collection
Saved Collections
user@gmail.com
New Collection
The user may of course also add more pages to Collector
her collection. Web
belgian chocolate
Start Collecting
Save Collection
Images
Search Results
Preview
Belgian Chocolate Online 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
Belgian Chocolate Online www.chocolat.com
Preview
More Belgian Chocolate Online
Ghaida Zahran
Project 1: Google Redux
ITGM 709 - Professor David E. Meyers
Final Design: Collection
Saved Collections
user@gmail.com
New Collection
The design maintains Google’s aesthetic while Collector
offering more interactive features, and more user-centric features that cater to typical
Web
Start Collecting
belgian chocolate
Save Collection
Images
search and behavior patterns. Search Results
Preview
Belgian Chocolate Online 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
Belgian Chocolate Online www.chocolat.com
Preview
More Belgian Chocolate Online
Ghaida Zahran
Project 1: Google Redux
Flickr: belgianchocol...
ITGM 709 - Professor David E. Meyers