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.
A customized gift searching engine for any person you care about for any special day.
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
WIREFRAME SKETCHES
Wireframe structure and profile adding details.
Web app layout and button function.
Search result detail.
SITEMAP
USER FLOW
USER FLOW WITH SCREENSHOTS
USER FLOW ANIMATION
CREATE GIFTEE PROFILE
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.
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.
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
"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
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
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
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.
Click the button will lead you to the official website of the result.
SCOPE OF THE 3 CATEGORIES IN SEARCH RESULT SECTION
The Search Result section provides different options of scope to match the request. It also reflect the persona what the user provided.
BRANDING
TYPOGRAPHY & COLOR SCHEME
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
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
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
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
After
PROTOTYPE
If you want to view the full version prototype please CLICK HERE.
NEXT STEP: MOBILE APP
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.