UX Design Project for TheHunt.com (fashion startup). It contains:
- User Research
- Personas
- Competitive Landscape
- Mental Model
- Social Design
- Organizational Scheme
- Scenarios
- Task analysis of critical flows
- Use Cases
- Content Inventory
- Interface design for main screens
Design Process & Deliverables from User Research to Prototyping
1. I The Hunt
DESIGN PROCESS & DELIVERABLES FROM USER RESEARCH TO PROTOTYPING
December, 2012 Patricia de Llano
2. Table of Contents
1. Executive Summary
2. Design Process Overview
3. Discovery & Insights:
• User Research
• Business Research
• Mental Model
• Social Model
4. Scope
• Problem/Opportunity Statement
5. Architecture
• Scenarios
• Key Flows
• Organizational Scheme
6. Framework
7. Next Steps
8. Appendices
The Hunt
4. 2. Design Process Overview
Discovery'&'Insights' Scope' Architecture' Framework' Surface'
Business
IxD :
User Research: Problem &
Research:
Scenarios. IA: Prototyping:
Goals and Opportunity
Constraints &
Use Cases. Organizational Wireframes.
Methodology. Statement." Objects and Mock-ups!
Goals." Scheme.
Findings" Features. Content
Target User. Competitive Inventory.
Key Flows &
User’s Needs, Landscape! Proposed Edge Cases.
Motivations & Solution!
Behavior.
Personas. Social Design:
Identity
Mental Model. !
Components.
Social
Activity Map!
Legend
Completed'
To'be'completed'
The Hunt
5. 3. Discovery & Insights: User Research
Goals & Methodology
1 2 3
IDENTIFY UNCOVER UNDERSTAND
THE TARGET USER HIS MOTIVATIONS FASHION BEHAVIOR'
Snowball Sampling Questionnaires & Interviews
Random Selection
Benchmarking
The Hunt
6. User Research: Top Findings 1
Value and ask for fashion opinions to friends
Shopping with friends is a Social event
& family
Laptop is the most popular device to browse and buy fashion online
Biggest constraint to fashion Hardcore user: browses fashion 1-2 times/day, 2
activities: Time hours on average, buy at least once a month
The Hunt
7. User Research: Top Findings 2
Finding the exact desired item is not so important.
Alternatives are ok.
Google is the first step to find items
Favorite items to buy online: handbags, shoes and accessories
Differences between countries:
If possible, users would buy cheaper versions of
US buys more often online than the EU
what they like
8. User Research: Target User
Well-off and fashion
conscious young
woman
Regularly follows and
purchases fashion online
and offline.
18-30 years old
The Hunt
15. Social Model
Identity Components
Self-Expression Connection Progression
PROFILE PRESENCE REPUTATION
“I speak
fashion
!”
The Hunt
16. Social Model
Identity Components
Self-Expression Connection Progression
PROFILE PRESENCE REPUTATION
Profile Pic
Location
Followers
“I speak
fashion Status
!”
Fashion Icons
Wishlist
Style
The Hunt
17. Social Model
Identity Components
Self-Expression Connection Progression
PROFILE PRESENCE REPUTATION
Community Live
Feed
Trends Section
Community Mgmt
“I speak
fashion
!” Blog Posts
The Hunt
18. Social Model
Identity Components
Self-Expression Connection Progression
PROFILE PRESENCE REPUTATION
Number of Gems
Number of
Followers
“I speak
fashion
!”
The Hunt
19. Social Model
Social Activity Map
Share
Comment Follow
Give
View Photos Gems
Save Add to
Wishlist
Tag
Users
20. 4. Scope: Problem/Opportunity Statement
Problems
1 2 3 4
LOW LOW LOW LOW
USER ACQUISITION ACTIVATION RATE ENGAGEMENT MONETIZATION
Redesign flows and discovery
Better use of
social
networks, email
digest &
notifications
>
Solutions Design new
features
Develop a
mobile app
The Hunt
21. 4. Scope: Proposed Solution
Problems
More Intuitive
1 2 3 New User
4
LOW LOW LOW Flow LOW
USER ACTIVATION ENGAGEMENT MONETIZATION
ACQUISITION RATE
Organize
Redesign flows and discovery Items and
Better use ofinformation
social
networks, email
digest &
notifications
>
Less aggressive
Solutions Design new
Look and Feel
features
Develop a
mobile app
The Hunt
22. 4. Scope: Proposed Solution
Add
Notifications Problems
on the site
1 2 3 4
LOW LOW LOW LOW
USER Improve ACTIVATION ENGAGEMENT MONETIZATION
Opengraph
ACQUISITION RATE
aggregation
on FB
Redesign flows and discovery
Better use of
social
networks, email
Daily email digest &
digest notifications
>
Solutions Design new
Improve
features
Community
Management Develop a
mobile app
The Hunt
23. 4. Scope: Proposed Solution
Problems
1 2 3 4
LOW LOW LOW LOW
USER ACTIVATION ENGAGEMENT MONETIZATION
Increase New Sections
ACQUISITION RATE
importance of Collections/ (Trends,
Live Feed
Rewards Wishlist celebrities, best
clones, etc.)
Redesign flows and discovery
Better use of
social
networks, email
digest &
notifications
>
Solutions Design new
features
Develop a
mobile app
The Hunt
24. 4. Scope: Proposed Solution
Problems
1 2 3 4
LOW LOW LOW LOW
USER ACTIVATION ENGAGEMENT MONETIZATION
ACQUISITION RATE
Photo Location:
Redesign flows and discoveryShow places
Feature: Top Hunts Instant
where other Better use of
Upload pictures feature messaging
Hunts were social
on the go found networks, email
digest &
notifications
>
Solutions Design new
features
Develop a
mobile app
The Hunt
25. 5. Architecture: Scenarios
Scenario 1: Starting a Hunt
Scenario 1: Starting a Hunt
Oh...where
am I going
to find it?!
idea
Start a Hunt
...While browsing She uploads a
She goes to The
Pinterest, Annie picture of the And The Hunt is
BUT The source is no AnD SUDDENLY, ANnie Hunt.com AND
found a beautiful scarf and posted! Time to
indicated on the pic recalls The Hunt! clicks on “Start
scarf she would enterS a little wait for replies
A hunt”
love to buy description...
Scenario 2: Posting a Find
Oh...it’s
from zara!
Post a Find
Chloe was browsing
...She recognized a
dress another user was
SHE looks for
the dress on And clicks on
Chloe doesn’t
have an account
She’d love to
share her hunts
with her FB
The Hunt
Now Chloe is
connected and
uploads an image
26. 5. Architecture: Scenarios
...While browsing She uploads a
She goes to The
Pinterest, Annie picture of the And The Hunt is
BUT The source is no AnD SUDDENLY, ANnie Hunt.com AND
found a beautiful scarf and posted! Time to
indicated on the pic recalls The Hunt! clicks on “Start
Scenario 2: Posting a Find
scarf she would enterS a little wait for replies
A hunt”
love to buy description...
Scenario 2: Posting a Find
Oh...it’s
from zara!
Post a Find
She’d love to
Now Chloe is
Chloe doesn’t share her hunts
...She recognized a SHE looks for connected and
Chloe was browsing And clicks on have an account with her FB
dress another user was the dress on uploads an image
the hunt when... “POST a FIND” so a sign-up friends so she
looking for. zara.COM and info about
window pop-ups does FB
the item
connect
The Hunt
27. 5. Architecture: Key Flows
Start a Hunt
This map describes one of the main tasks on
The Hunt:
Start a Hunt.
The systems analyzes first if the user is
registered or not and launches the Sign in or
Sign up flow depending on the case.
Then the user uploads a picture and enters
information about the item
Finally the system checks that all the
mandatory fields are filled up and the photo
meet the requirements established
The Hunt
28. 5. Architecture: Key Flows
Post a Find & Give a Gem
This map describes two main tasks on The Hunt:
Post a Find and Give a Gem.
The typical use case for Posting a Find is
described by a user browsing the homepage,
seeing an item she recognizes, locating the
item online and posting a picture and a link
(posting a Find) to the item on the
corresponding Hunt page.
When a user posts a Find on a Hunt’s page,
the Hunt’s owner receives a notification of a
New Find.
The user can then give a Gem to the user who
found the item
The Hunt
30. 5. Architecture: Organizational Scheme
Main elements present on the Homepage
Secondaty elements present on the Homepage
Tertiary elements present on the Homepage
Top subcategories inside main elements
Secondary subcategories
Rest of elements
The Hunt
31. 6. Framework: Wireframes
1
Homepage Main Navigation Bar,
including: Profile, Sign
Up and Search.
2
Redirects the user to a
new page to place a Hunt
1
3
2 4 Navigation Bar including
filters by type of Hunt,
3 Find, category
4
This Live Feed has
similar functionality as
5 the Facebook ticker.
The objective is to show
the most recent activity
on the site.
5
Photos of Hunts on
the main feed
The Hunt
32. 6. Framework: Wireframes
1
Main Navigation Bar,
including: Profile,
Sign Up and Search.
1
2
Navigation Bar
2 including filters by
type of Hunt, Find,
item category,
collections.
3
4
3
Main Feed containing
all the pictures about
Hunts followed or
started by the user,
finds and collection
4
Personal Info including
profile pic, number of
gems gained, number of
followers, number of
Profile Page
people following, status,
style and other fashion
related info. A Follow
button is included too.
The Hunt
33. 6. Framework: Wireframes
Hunt Thumbnail
1
By clicking on this button, a user
will receive notifications when a
Find for this Hunt is posted
1 2
2
The number of Finds
already posted for this
Hunt
3
Number of
comments posted
about this Hunt
4
Number of people
following this Hunt !
Popularity of the Hunt
4 3
The Hunt