2. I N T R O D U C T I O N
Redesign
Overview
Redesign is currently underway. This presentation serves
to communicate the current state of Redesign on all
digital platforms.
3. MOBILE REDESIGN
What is Redesign?
Redesign is an overall refresh of MyHabit’s digital
experiences, aimed to form a better connection
with our customer via their interaction with our
business.
Redesign addresses both customer problems and business goals by revamping current features
and rolling out new experiences in an incremental fashion. This way, users are able to get their
hands on new experiences as quickly as possible and we are able to learn from their interactions.
R E D E S I G N O V E R V I E W
Redesign Goals
4. Our goal is to create a solid,
flexible framework that allows
our customers to get what they
want and empowers our
business teams to achieve
their goals.
R E D E S I G N O V E R V I E W
Redesign Goals
Solve Customer
Problems
Modular Framework
Holistic Experience
5. R E D E S I G N O V E R V I E W
Redesign Goals
Solve Customer
Problems
Our current experiences have some known issues
that prevent customers from fully engaging with the
MyHabit experience.
By catering to customer needs, users will be able to interact quickly and easily with the MyHabit
brand and will be able to complete common tasks that are currently difficult to execute.
6. R E D E S I G N O V E R V I E W
Redesign Goals
Modular Framework
Redesigning the website and apps to be flexible
and allow for experimentation.
Our website and mobile apps were originally designed for a very specific purpose and the
architecture was created as such. Throughout Redesign, the architecture of the website and the
apps is being redesigned to allow flexibility to experiment with features that weren’t planned for so
we can spin up and test new ideas in a much shorter time period than ever before.
7. R E D E S I G N O V E R V I E W
Redesign Goals
Holistic Experience
Taking a look at the experience as a whole instead
of individual features.
We have been in a state of adding features without looking at them through a holistic lens. By
taking a step back and evaluating the experience as a whole, we can make more educated
decisions that will aid both our customers and our business’s goals.
10. A N D R O I D R E D E S I G N
Gateway (Tested; Final)
DESIGNER DRESSES FEAT. SAINT LAURENT
Ends Monday Jan 11 at 9 am PT
Men’s Kids’ HomeWomen’s
Browse Women’s Categories
12:00
DESIGNER DRESSES FEAT. SAINT LAURENT
Ends Monday Jan 11 at 9 am PT
WORK TO WEEKEND : DRESSES
Ends Monday Jan 11 at 9 am PT
Men’s Kids’ HomeWomen’s
12:00
Gateway Gateway - Scrolled
DESIGNER DRESSES FEAT. SAINT LAURENT
Ends Monday Jan 11 at 9 am PT
Men’s Kids’ HomeWomen’s
12:00
Browse Women’s Categories
Clothing Shoes Handbags
Gateway - Browse Bar
11. A N D R O I D R E D E S I G N
Event Detail (Final Concept)
Zero Degrees Celsius
Printed Panel Top
$179 $65
Zero Degrees Celsius
Printed Panel Top
$179 $65
Zero Degrees Celsius
Printed Panel Top
$179 $65
Zero Degrees Celsius
Printed Panel Top
$179 $65
SortFilter
Work to Weekend…
12:00
Event Detail Event Detail - Scrolled Event Detail - Inverse Scroll
12. A N D R O I D R E D E S I G N
Browse Categories (Tested; Final)
Browse Categories
Women’s
+
+
Men’s
+Kids’
+Home
+Designer
12:00
- Placeholder for potential icons
Browse Categories
Women’s
-
+Men’s
Clothing
Shoes
Handbags
Accessories
Jewelry
Watches
Beauty
12:00
Events like this
DESIGNER DRESSES FEAT. SAINT LAURENT
Ends Monday Jan 11 at 9 am PT
MENSWOMENSFEATURED
Browse Women’s Categories
Rate Our App
Contact Us
Help & FAQs
My Orders
My Account
Browse Categories
Home
12:00
Menu Browse Categories Browse Categories - Women’s Expanded
13. A N D R O I D R E D E S I G N
Browse / Search Results Page (Tested; Final)
Women’s Clothing
Zero Degrees Celsius
Printed Panel Top
$179 $65
Zero Degrees Celsius
Printed Panel Top
$179 $65
Zero Degrees Celsius
Printed Panel Top
$179 $65
Zero Degrees Celsius
Printed Panel Top
$179 $65
All Dresses Tops & Tees Sweaters Denim
12:00
SortFilter
Waterfall Layout
(Displayed only when items
in “Results” page have
varying heights)
Women’s Clothing
Zero Degrees Celsius
Printed Panel Top
$179 $65
Zero Degrees Celsius
Printed Panel Top
$179 $65
Zero Degrees Celsius
Printed Panel Top
$179 $65
Zero Degrees Celsius
Printed Panel Top
$179 $65
All Dresses Tops & Tees Sweaters Denim
12:00
SortFilter
Grid Layout
(Displayed when items
in “Results” page have
the same heights)
14. A N D R O I D R E D E S I G N
Results Page - Sort & Filter (Final Concept)
Sort Filter Filter - Expanded
15. A N D R O I D R E D E S I G N
Product Detail (Work in Progress; Concept 1)
Product Detail Product Detail - Scrolled
16. A N D R O I D R E D E S I G N
Product Detail (Concept 2 - Add to Cart FAB)
Product Detail Product Detail - Scrolled
17. A N D R O I D R E D E S I G N
Product Detail (Concept 3)
Item Details
Lorem ipsum. More lorem ipsum.
Marc New York by Andrew Marc Noah
Natural Rugged Lamb Jacket with
Faux Fur Collar
12:30
Size SQuantity 1 Color
Add to Bag$99$400
Product Detail Product Detail - Scrolled
18. A N D R O I D R E D E S I G N
Product Detail (Concept 4)
Product Detail
12:00
$374 $109-$119
A.B.S. by Allen Schwartz Long Sleeve Gown
Add to Cart
12:00
$374 $109-$119
A.B.S. by Allen Schwartz Long Sleeve Gown
Add to Cart
Size
Color
Quantity 1 Add to Cart
Small Medium Large
Product Detail - “Add to Cart” Selected
19. A N D R O I D R E D E S I G N
Search (Final Concept)
12:00
Search for products…
Recent Searches
baby girl
women’s boots
nike free
MORE SEARCHES
12:00
bab|
baby girl
baby boy
baby doll
baby shoes
Search Searching
29. W E B R E D E S I G N
Sprint Process
Additional Information - http://www.gv.com/sprint/
The Design Sprint
The sprint is a five-day process for answering
critical business questions through design,
prototyping, and testing ideas with customers.
Developed at GV, it’s a “greatest hits” of business strategy, innovation, behavior science, design
thinking, and more — packaged into a battle-tested process that any team can use. We are
currently 2/3 of the way through a 3-week “sprint” process exploring each aspect of the web and
responsive experiences to address critical business and customer needs.
30. W E B R E D E S I G N
Sprint Process
This process serves to explore
design solutions addressing
customer problems and
business needs by taking in
questions and concerns from
stakeholders across the
company.
By identifying long-term goals
and breaking them down into
“Sprint Questions”, we are able
to identify problems and map
stakeholder questions to user
goals in order to design
meaningful solutions that dress
both customer and business
problems and concerns.
We’ve focused primarily on the
first 3 stages of the sprint so
far and will be using the next 2
weeks to refine our designs
and test them with customers.
32. W E B R E D E S I G N
Long Term Goals, Sprint Questions, and Journey Mapping
These goals, sprint questions,
and maps were developed in
the first sprint and updated
many times with the input of
multiple stakeholders to serve
as a source-of-truth for the
design process.
The same goals, questions,
and maps were used across all
3 sprints.
33. W E B R E D E S I G N
How Might We Questions
“How Might We” (HMW)
questions are a repository of
stakeholder concerns to
address via the Sprint process.
HMW questions are mapped
against the customer map to
address both customer and
business problems in the
Sprint solution.
34. W E B R E D E S I G N
Sprint Process
Sprint 1 Target
Will customers trust the MyHabit brand?
How Might We Questions?
• Better engage with customers via social media?
• Increase customer satisfaction?
• Onboard and educate our customers about who we are and how we operate?
• Provide value to customers outside of deals and purchasing?
• Delight our users?
• Communicate urgency across the entire site – including search and browse?
• Improve trust across our experiences?
• Provide customers with prime benefits?
35. W E B R E D E S I G N
Journey Map
This journey map was created
showing the customer
intentions and multiple ingress
points into the MyHabit
experience.
“How Might We” questions
related to the sprint target were
selected and mapped against
this map to help round out the
target for the sprint.
36. W E B R E D E S I G N
Sprint 1
“Facebook Events”
How might we: better
engage with customers via
social media?
37. W E B R E D E S I G N
Solution Sketches
“Welcome… this is
Myhabit…”
How might we: onboard and
educate our customers
about who we are and how
we operate?
38. W E B R E D E S I G N
Solution Sketches
“Communicate urgency
and improve trust”
How might we:
Communicate urgency
across the entire site and
improve trust across our
experiences?
39. W E B R E D E S I G N
Solution Sketches
“Stylin’ & Profilin’”
How might we: onboard and
educate our customers
about who we are and how
we operate and provide
value to customers outside
of deals and purchasing?
Delight our users and
increase customer
satisfaction?
40. W E B R E D E S I G N
Sprint 1 - Storyboard
The storyboard is a final
solution that will be built into a
prototype to measure customer
feedback and learn where the
experience should go.
Parts of the previous solution
sketches were voted on by the
sprint team in order to
determine what should go into
the final prototype to assess
customer feedback against the
sprint target.
42. W E B R E D E S I G N
Sprint Process
Sprint 2 Target
Do customers have all of the information they need
to complete a purchase?
How Might We Questions?
• Flow the user through the experience more efficiently?
• Better visualize / communicate time in relation to products and events?
• Get customers to products they want?
• Structure info in a way that is “grokable” for customers?
• Alleviate customer concerns around products?
43. W E B R E D E S I G N
Sprint 2
“Product Discovery via
Pair Up & Extras”
How might we: better
visualize / communicate time
in relation to products /
events? Structure info in a
way that is “grokable”?
44. W E B R E D E S I G N
Sprint 2
“All-in-One (K.I.S.S)”
How might we: flow the user
through the experience more
efficiently? Get customers to
products they want?
45. W E B R E D E S I G N
Sprint 2
“Super Enhanced
Gateway”
How might we: flow the user
through the experience more
efficiently? Get customers to
products they want?
46. W E B R E D E S I G N
Sprint 2 - Storyboard
The storyboard is a final
solution that will be built into a
prototype to measure customer
feedback and learn where the
experience should go.
Parts of the previous solution
sketches were voted on by the
sprint team in order to
determine what should go into
the final prototype to assess
customer feedback against the
sprint target.
48. W E B R E D E S I G N
Sprint Process
Sprint 3 Target
Do customers understand or value “Events”?
How Might We Questions?
• Better engage with customers on more channels?
• Better communicate what an event is?
• Better communicate what happens when an event ends?
• Onboard to educate our customers about who we are and how we operate?
• Revitalize events?
• Communicate urgency across the entire site including search and browse?
• Flow the user through the experience more efficiently?
• Go back to flash sales to communicate scarcity and urgency on our site?
• Bundle events to products in a meaningful way?
49. W E B R E D E S I G N
Sprint 3
“Engaging Events”
How might we: better
communicate what happens
when an event ends? Go
back to flash sales to
communicate scarcity and
urgency on our site?
50. W E B R E D E S I G N
Sprint 3
“The Main Events”
How might we: Go back to
flash sales to communicate
scarcity and urgency on our
site? Revitalize events?
51. W E B R E D E S I G N
Sprint 3
“Reconnecting ASIN to
Event on PDP”
How might we: bundle
events to products in a
meaningful way?
55. W E B R E D E S I G N
Gateway Concept 2 w/ Messaging
Addressing the sprint
question of “Will customers
trust the MyHabit brand?”
this design solution offers
contextual messaging that
acknowledges where a user
came from (e.g. Facebook,
Pinterest,) and offers welcome
messaging with value props.
Options to join now, or later,
or dismiss the window entirely
offered.
Users are most interested in the
newest products, thus (as a
preliminary concept), multi-run
products have been consolidated
into a “Clearance” bucket to place
the focus on new items to create
a better customer experience.
56. W E B R E D E S I G N
Gateway Concept 2 - Product Quick View
Customers struggle with a “zig-zag”
shopping experience where they go
in and out of products and events
to see the details they’d like to see.
This preliminary concept shows a
“Quick View” of a product page -
similar to Amazon’s - that allows
users to quickly peek into pages
without the commitment of loading
an entirely new page.
This concept could also extend to
Events to ease the shopping experience
and clearly communicate navigational
hierarchy to the user.
57. W E B R E D E S I G N
Event Detail Concept
Addressing the sprint
question of “Will customers
trust the MyHabit brand?”
this design solution offers
contextual messaging that
acknowledges where a user
came from (e.g. Facebook,
Pinterest,) and offers welcome
messaging with value props.
Options to join now, or later,
or dismiss the window entirely
offered.
Users are most interested in the
newest products, thus (as a
preliminary concept), multi-run
products have been consolidated
into a “Clearance” bucket to place
the focus on new items to create
a better customer experience.
58. W E B R E D E S I G N
Product Detail - Event Quick View
Addressing the sprint question
of “Do customers have all of
the information they need to
complete a purchase?” this design
solution allows the user to view
the other ASINs within the Event
that the currently selected product
is in.
Users have a hard time understanding
what items are in Events - especially
when searching or browsing - and can
often lose context of where they are or
how the ASIN they’re looking at fits into
an Event.
59. W E B R E D E S I G N
Gateway Concept 3 - Time, Views, Like
61. R E W O R K I N G B R O W S E
Introduction
Reworking
Browse
Applying the UX Process to MyHabit’s mobile browsing
experience.
62. R E W O R K I N G B R O W S E
Working Backwards
Start with the
Customer
The UX Process aligns directly to Amazon’s
Working Backwards process.
The UX Process is directly aligned with the Working Backward process where we start with the
customer and work backwards to solve problems. Researching and learning about our customers
help us make more educated decisions for our customers.
63. R E W O R K I N G B R O W S E
Customer Profile
A snapshot of our current
customer.
65. R E W O R K I N G B R O W S E
Customer Problems
5 out of 10 Participants didn’t realize
they can find products outside of events
on their mobile devices.
Customers think that by browsing events
they browse by category. If they don’t
find something inside the event, they
assume it’s not available on MH site.
Participants didn’t notice “find” icon at
the bottom navigation bar (tab bar).
Browse problems uncovered
on iPhone & iPad.
66. R E W O R K I N G B R O W S E
Customer Problems
4 out of 5 Participants could not find the
“Browse” section of the app and
assumed the Events were the only items
offered on MyHabit.
Unintuitive and time consuming Browse
experience that is hard to understand for
most users.
Gateway does not inform the user that
there is anything other than Events,
which leads people toward assuming
“Browse” does not exist.
Browse problems uncovered
on Android devices.
67. R E W O R K I N G B R O W S E
Android Browse Audit
Perceived as only global navigation element
Customers understand the Events as
“Categories” and believe they are a
representation of everything MyHabit has to offer
Menu is slightly hidden (fixed) and is many times
overlooked
68. Side menu Categories echo the labels in the
Department switcher, making many customers
think that they are already in the Category, thus
they do not select anything here and instead,
close the menu
R E W O R K I N G B R O W S E
Android Browse Audit
69. Selecting a Category opens a menu of sub-
categories with a secondary “Back to Main Menu”
button. Interactions within the side menu feel odd
to users and confuse them on where they are in
the hierarchy.
R E W O R K I N G B R O W S E
Android Browse Audit
70. - Utilitarian; only caters to one user type
- Not immediately clear how to Browse or the
offering of Browse on Landing View
- Heavy cognitive load and disjointed
understanding of location in the hierarchy
- Non-standard interaction patterns with
interactive side menu
R E W O R K I N G B R O W S E
Android Browse Audit
71. - Cognitive overload
- No context/ customer awareness
- Perceived as end to all navigational elements
- Top department and tab bar are too disjointed for customers to
use both seamlessly when looking for product
- Events perceived as category refinements
- Customers go inside the event to spearfish
which creates inefficient experience
- Events with similar product items confuse
customers who think events are category
refinements
- If refinement by category is not labeled clearly
and isn’t the focal point, customers don’t know
it’s available
- Customers don’t know about search
R E W O R K I N G B R O W S E
iOS Browse Audit
72. - Not discoverable
- Not discoverable
- Cognitive overload (text is harder to read when
it stands alone)
- Unclear progress (how many steps it will take
to make selection)
R E W O R K I N G B R O W S E
iOS Browse Audit
73. R E W O R K I N G B R O W S E
Current Experience
- Utilitarian
- Not clear how many steps it takes to make
selection
- Perceived effort is big, customer unlikely to
repeat multiple queries during the same
session
- Going back to make another selection requires
minimum of three clicks.
74. R E W O R K I N G B R O W S E
Product Requirements
Customers can now drill down into our top departments
(women, men, home, and kids) and expect to understand
the entire browse structure relating to their preferred
department.
In sub-categories we have included visuals that align with
the product results to reinforce customer’s selection and
speed up the process of refinement in the future.
75. R E W O R K I N G B R O W S E
Sketching & Discovery
76. Men’s Clothing
SHIRTS & TEES
Browse Categories
SWEATERS OUTERWEAR
ALL MEN’S CLOTHING
Ben Sherman Men’s Ben Sherman Men’s
12:30
BRUNO PIATELLI
Event Ends SUN OCT 4 at 9 AM PT
Men’s Categories
Women’s Categories
Shop by Category
12:30
Events like this
DESIGNER DRESSES FEAT. SAINT LAURENT
Ends Monday Jan 11 at 9 am PT
MENSWOMENSFEATURED
Browse Women’s Categories
12:30
Smart style, every day.
Rate Our App
Contact Us
Help & FAQs
My Orders
My Account
Browse Categories
Home
SIGN OUT
Men’s Clothing
Ben Sherman Men’s
Two Button Tonal
Suit (Black)
$595 $209
Ben Sherman Men’s
Two Button Tonal
Suit (Black)
$595 $209
12:30
BRUNO PIATELLI
Event Ends SUN OCT 4 at 9 AM PT
Shirts & Tees Sweaters Outerwear
Refine by Category VIEW ALL
FIND YOUR FRAMES: SUNGLASSES
& EYEWEAR Ends in 02:38
Today’s Events
MYHABIT
12:30
Browse by Category
WOMENS KIDSMENSFEATURED
CLOTHING SHOES ACCESSORIES
FIND YOUR FRAMES: SUNGLASSES
& EYEWEAR
Ends in 02:38
MYHABIT
12:30
Browse by Category
WOMENS KIDSMENSFEATURED
R E W O R K I N G B R O W S E
Android Wireframes
WOMEN’S
-
+MEN’S
+
CLOTHING
SHOES
HANDBAGS
ACCESSORIES
JEWELRY
WATCHES
BEAUTY
Shop by Category
12:30
77.
78. R E W O R K I N G B R O W S E
iPhone Wireframes
Featured
Women
Men
Kids
Home
Designer
Search
Women
Search
Events Clothing
Handbags
Jewelry
Beauty
Shoes
Accessories
Watches
Featured
Women
Men
Kids
Home
Designers
marketing promomarketing promo
Category: shoes
size
(8, 8.5)
clear size
brand
(3 selected)
clear size
price
color
Done
Akris punto
Alainn
Alberto Fermani
ALDO
Alegria
Alex and Ani
Alex Evenings
Alex Woo
Alexander McQueen
Filter Boots:
VIRGIN 22%4 21 PM:
Women
Events Clothing Shoes Handbags Accessories
Dresses
Outwear
Pants Skirts
Tees
Denim
Search
Trending Now
Featured
Women
Men
Kids
Home
Designer
Your Account
VIRGIN 22%4 21 PM:
Women
Clothing Shoes HandbagsEventsJewelry
Dresses Tops & Tees Sweaters Denim Pants Skirts
Zero Degrees Celsius
Printed Panel Top
$179 $65
Heartloom
Printed Panel Top
$179 $65
VIRGIN 22%4 21 PM:
Women
Clothing Shoes HandbagsEventsJewelry
Dresses Tops & Tees Sweaters Denim Pants S
Zero Degrees Celsius
Printed Panel Top
$179 $65
Heartloom
Printed Panel Top
$179 $65
VIRGIN 22%4 21 PM:
Clothing Shoes HandbagsEventsJewelry
Dresses Tops & Tees Sweaters Denim Pants Skirts
Women
Women
Men
Kids
Home
Designers
79.
80. U X P R O C E S S
Usability Studies
Prototypes of multiple versions
of the Browse experience
were created and tested with
users to validate design
decisions.
Learnings
Associating imagery / icons with categories &
subcategories leads to quicker navigation
Product Images as representations of categories /
subcategories can affect buying behavior
Difficult to curate an image that fully represents
arbitrary categories such as “Accessories”
Different user types look for primary navigation in
different locations
81. U X P R O C E S S
Usability Studies
Most of the customers (85%) shop within their preferred department. Introducing them to other
department options on the gateway creates unnecessary cognitive load.
Customers find product on the site by searching and by browsing. There is no “browse by
events” and “browse by category” in customer’s mind. Browsing by events is browsing by
category.
Customer’s who browse events are only interested in three types of events: brand events,
seasonal events/ viral events/ pop culture events and great deal events. All the other customers
would benefit from browse by categories. Browse by events as they are currently structured is
not efficient mode of browsing.
Customer cross-shops within sub-categories more so than they do within categories and even
more so than they do within departments. Quick access to sub-category switcher provides
efficient browsing experience.
When it comes to visual browse (using images to facilitate way-finding and navigation), icons
are universally understood and provide less cognitive load than product photos or text.
Prototypes of multiple versions
of the Browse experience
were created and tested with
users to validate design
decisions.
82. R E W O R K I N G B R O W S E
Icons
Research shows that visuals are processed 60,000 times faster than text, and people could remember images with
90% accuracy several days post-exposure. The more visual the input becomes, the more likely it is to be recognized
and recalled.
One of the reasons that text is less capable than pictures is that the brain sees words as lots of tiny pictures. And when
we read, most of us try to visualize what the text is telling us. We essentially create icons inside our heads.
Using icons or symbols on a device serve as aids to memory, thereby reducing cognitive load since we can process
icons and symbols much quicker than we can read text.
Cognitively: Graphics expedite and increase our level of communication. They increase comprehension, recollection,
and retention.
Emotionally: Graphics enhance or affect emotions and attitudes. They engage our imagination and heighten our
creative thinking by stimulating other areas of our brain, which in turn leads to a more profound and accurate
understanding of the presented material.
Advantages of using icons:
- Icons make systems appear more accessible to the new user
- Icons save space
- Icons speed search
- Icons lead to immediate recognition
- Icons lead to better recall
- Icons reduce the necessity of reading
83. R E W O R K I N G B R O W S E
New Android Experience
- Menu has been pulled out and is larger for utility-based
shoppers
- Side nav includes a “Browse
Categories” link that loads a page for
shopping by category instead of hosting
interactions in the side nav itself
- Browse has also been added to the
Gateway as a new UI element that serves to
educate and direct users to Browse without
distracting them from Events
84. R E W O R K I N G B R O W S E
New iOS Experience
- Focused on customer’s preferred department
- Browse navigation is exposed/ discoverable at the top
- Search is discoverable on gateway
- Utilizes iOS horizontal swipe gesture
DESIGNER DRESSES FEAT. SAINT LAURENT
Ends Monday Jan 11 at 9 am PT
MAKES AN ENTRANCE: SPECIAL OCCASION
Ends Monday Jan 11 at 9 am PT
Women
Shoes JewelryWatchesEvents BeautyClothing Handbags Accessories
22%4 21 PM:VIRGIN
Women
Men
Kids
Home
Designer
Orders
Account
Waitlist
Notifications
- Preferred departments in the side-nav
85. R E W O R K I N G B R O W S E
New iOS Experience
- Visual Browse
- Cross-category and
cross-subcategory
shopping
- Selecting new
category/ sub-
category is click
away
86. Next Steps include a series of
incremental development
phases and deployments for
the newly designed Browse
experiences. As development
begins, design will begin on
the following portions of the
app.
Refinements / Filters
Search
Gateway
R E W O R K I N G B R O W S E
Next Steps