Final3 Copy.png

Google Gift

Wireframe, UI Design and Prototype

Google Gift is a gift searching engine assisting the user to choose the gift. With Google Gift you can save your observation from the giftee, and have the best match of the gift for the person you care about for any special day.

 
Media3New.jpg
 

A  customized gift searching engine for any person you care about for any special day.

 
SearchResultNew.jpg
 

GOALS:

User Research
User Hypothesis
Business Model
Wireframe
Detail Features
Logo Design
Color Scheme
UI Design
User Test
High Fidelity Prototype

DESIGNER:

Ka-Wai Hung

TOOLS:

Paper & Pencil
Sketch
Proto.io
Photoshop
Illustrator


 

USER GOAL: HAPPY PATH

8 Brand Matcher Copy.png

WIREFRAME SKETCHES

Web Structure2.jpg

Wireframe structure and profile adding details.

Web Structure.jpg

Web app layout and  button function.

Search Result.jpg

Search result detail.


SITEMAP

Artboard Copy.png
Artboard Copy 2.png

USER FLOW

Artboard.png

USER FLOW WITH SCREENSHOTS

Artboard 7.png

USER FLOW ANIMATION

Prototype.gif


CREATE GIFTEE PROFILE

FirstPage.png
Create Profile-1.png

When the user first enter this app, the system will lead the user to create the first giftee profile. The user is able to save any memorable days as notification for gift preparing.


CONFIGURATION 1: SEARCH PREPARATION

When the giftee profile has been created, here is the page before searching gift. Google Gift is like a notebook to help you note down any details for gift searching in case you need to find an ideal gift for specific person.

In search preparation it contains 3 section as below:

1. Giftee Profile: The person that the user care about. This section saves all the giftee info in here. The selected profile will be highlighted.
2. Note: The note of the user's observation from this person (Highlighted Target), the user is able to add and save any details anytime. These note elements can be the factor of gift searching.
3. Search: Drag the note element from the user created to this section. The price range is a optional filter for gift searching.

Insight.png

CONFIGURATION 1: NOTE SECTION

Note section helps you note down any detail of your observation and idea about this person for gift preparing after creating a giftee profile.

Gift Preparing Notification Copy.png
My Expectation.png
Product.png

Note section includes 3 categories, and each category has input field. Once you input your insight or idea, the app will generate your input to be a draggable tag underneath.

These 3 categories are:
1. Insight: Allow the user input the giftee's personality, hobby or anything about this person.
2. My Expectation: This category is about user's expectation to the giftee. How or what can benefit this person?
3. Product: What kind of product you are considering as a gift to the giftee?


SCOPE OF THE 3 CATEGORIES IN NOTE SECTION

8 Brand Matcher Copy 4.png

"Insight" is a broader picture of this person, and"My Expectation" is adding value based on this person. "Product" is what product this person going to have. Same as the brand image of any product, the search result will reflect to be a persona to match the brand, collection of brand or product.


These categories are not necessary to fully input. The more factors you have, the more accurate result will achieve. We will talk about the Configuration 2: Search Result later.


CONFIGURATION 1: SEARCH SECTION

Artboard 2.png

Now you can drag the notes from Note section to Search section when you need to search gift. The price range is optional.


CONFIGURATION 2: SEARCH RESULT

Insight Copy.png

This configuration is the search result based on the factors the user chose.

It contains 3 sections:
1. Giftee Profile: The person that the user care about. This section saves all the giftee info in here. The selected profile will be highlighted.
2. Click to Go Back: To Configuration 1.
3. Search Result: Reveal the result based on the factor you chose.


CONFIGURATION 2: SEARCH RESULT SECTION

Brand.png
Collection.png
Product-1.png

The search result section contains 3 categories: Brand, Collection and Product.

Each individual result will be shown as image. More detail will be revealed when the user click on the image.
It shows the overall match rate based on the factors the user picked, and shows the factors with various transparency based on how well they relatively match.

Artboard 3.png

Click the button will lead you to the official website of the result.

Artboard 4.png
Artboard 4 Copy.png
Artboard 4 Copy 2.png

SCOPE OF THE 3 CATEGORIES IN SEARCH RESULT SECTION

8 Brand Matcher Copy 5.png

The Search Result section provides different options of scope to match the request. It also reflect the persona what the user provided.



BRANDING

Final1 Copy 2.png
Artboard 6.png
GoogleFirstPage-1 Copy.png

TYPOGRAPHY & COLOR SCHEME

a.png

USER TESTS

Reorganizing the Visual Path
Before: Some testees didn't notice the input field at the bottom.
After: Placed the input field on top of the input result area. This helps the visual path closer and easier to read.

Before

Before

After

After

Adding Hint Box for Drop Area
Before: The testee didn't know how to put input factors into Search section because there was no hint.
After: Added a hint box with instruction in Search section.

Before

Before

After

After

Adding Gift Preparing Notification
Before: Some testees was wondering how the user set notification for specific day.
After: Added a notification setting icon on the giftee profile. The pop up window revealed when the icon is clicked. The user is able to customize the day and gift preparing time. The gift preparing notification will be integrated into google account notification.

After

After

Indicating the match rate in search result
Before: The testee was wondering how well it matched to the user's request.
After: Added an overall match rate of each result, and indicated factors with various transparency based on how well they relatively matched.

Before

Before

After

After


PROTOTYPE
 

If you want to view the full version prototype please CLICK HERE.


NEXT STEP: MOBILE APP

8 Brand Matcher Copy 6.png

The responsive website version is more focusing on the relationship between the search factor and brand/product identity. It also provides the experience to feel the brand/product and ensure the result meets.

Next step I am going to work on the mobile app version.
The mobile version will focus on the notification for preparing gift and the efficiency of noting down the observation in daily life.