SlideShare a Scribd company logo
1 of 87
MOBILE REDESIGN
MyHabit
Redesign
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.
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
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
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.
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.
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.
MOBILE REDESIGN
Android Designs
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
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
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
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)
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
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
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
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
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
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
MOBILE REDESIGN
iOS Designs
Gateway
i O S R E D E S I G N
Gateway (Final Concept)
Upcoming Events - V1 Upcoming Events - V2
i O S R E D E S I G N
Menu (Tested; Final)
Side menu
Even results - V1
i O S R E D E S I G N
Event Detail (Work in Progress)
Even results - V2
Browse - Clothing
i O S R E D E S I G N
Browse & Search (Tested; Final)
Browse - Handbags Search
i O S R E D S I G N
Refinements (Work in Progress)
Refine - Brand Refine - Brand
Default view
i O S R E D E S I G N
Product Detail (Work in Progress)
Scroll view - V1 Scroll view - V2
Shopping Bag
i O S R E D E S I G N
Shopping Bag & My Account (Work in Progress)
Account Orders Account Settings
MOBILE REDESIGN
Web / Responsive Process
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.
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.
MOBILE REDESIGN
Sprint 1
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.
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.
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?
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.
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?
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?
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?
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?
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.
MOBILE REDESIGN
Sprint 2
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?
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”?
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?
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?
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.
MOBILE REDESIGN
Sprint 3
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?
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?
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?
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?
MOBILE REDESIGN
Web / Responsive Designs
W E B R E D E S I G N
Gateway Concept 1
W E B R E D E S I G N
Gateway Concept 1 (Alt)
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.
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.
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.
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.
W E B R E D E S I G N
Gateway Concept 3 - Time, Views, Like
MOBILE REDESIGN
Appendix
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.
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.
R E W O R K I N G B R O W S E
Customer Profile
A snapshot of our current
customer.
R E W O R K I N G B R O W S E
User Personas
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.
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.
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
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
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
- 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
- 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
- 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
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.
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.
R E W O R K I N G B R O W S E
Sketching & Discovery
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
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
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
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.
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
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
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
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
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
Thank you

More Related Content

What's hot

AaronOrner_Resume
AaronOrner_ResumeAaronOrner_Resume
AaronOrner_Resume
Aaron Orner
 
Martin Agency Creative Critique | Newhouse Advertising Graduate Program
Martin Agency Creative Critique | Newhouse Advertising Graduate ProgramMartin Agency Creative Critique | Newhouse Advertising Graduate Program
Martin Agency Creative Critique | Newhouse Advertising Graduate Program
Samuel Smith
 
Energize shanghai agency presentation 2011
Energize shanghai agency presentation 2011Energize shanghai agency presentation 2011
Energize shanghai agency presentation 2011
Energize Shanghai
 
Mixedbag Marketing - Company Profile
Mixedbag Marketing - Company ProfileMixedbag Marketing - Company Profile
Mixedbag Marketing - Company Profile
SAP
 

What's hot (20)

Aiwa company profile (1)
Aiwa  company profile (1)Aiwa  company profile (1)
Aiwa company profile (1)
 
Introduction on Service Design
Introduction on Service DesignIntroduction on Service Design
Introduction on Service Design
 
UXVision - Tal Florentin - Windows 8 User Experience - Short Version
UXVision - Tal Florentin - Windows 8 User Experience - Short VersionUXVision - Tal Florentin - Windows 8 User Experience - Short Version
UXVision - Tal Florentin - Windows 8 User Experience - Short Version
 
Design Services
Design ServicesDesign Services
Design Services
 
Web development pdf
Web development pdfWeb development pdf
Web development pdf
 
Grownups Profile - Digital Marketing Agency
Grownups Profile - Digital Marketing AgencyGrownups Profile - Digital Marketing Agency
Grownups Profile - Digital Marketing Agency
 
Relive360 company profile
Relive360 company profileRelive360 company profile
Relive360 company profile
 
AaronOrner_Resume
AaronOrner_ResumeAaronOrner_Resume
AaronOrner_Resume
 
Convergence + The Digital Agency
Convergence + The Digital AgencyConvergence + The Digital Agency
Convergence + The Digital Agency
 
Martin Agency Creative Critique | Newhouse Advertising Graduate Program
Martin Agency Creative Critique | Newhouse Advertising Graduate ProgramMartin Agency Creative Critique | Newhouse Advertising Graduate Program
Martin Agency Creative Critique | Newhouse Advertising Graduate Program
 
Digital Transformation Services- Our Corporate Brochure
Digital Transformation Services- Our Corporate BrochureDigital Transformation Services- Our Corporate Brochure
Digital Transformation Services- Our Corporate Brochure
 
The Role of Technology in the Creative Agency
The Role of Technology in the Creative AgencyThe Role of Technology in the Creative Agency
The Role of Technology in the Creative Agency
 
Cre8mania Profile 2017 - 2018
Cre8mania Profile 2017 - 2018Cre8mania Profile 2017 - 2018
Cre8mania Profile 2017 - 2018
 
Admark advertising company profile
Admark advertising company profileAdmark advertising company profile
Admark advertising company profile
 
THINGS Agency, The Company Profile
THINGS Agency, The Company ProfileTHINGS Agency, The Company Profile
THINGS Agency, The Company Profile
 
We Create Digital Success Stories!
We Create Digital Success Stories!We Create Digital Success Stories!
We Create Digital Success Stories!
 
IQD Agency Presentation
IQD Agency PresentationIQD Agency Presentation
IQD Agency Presentation
 
Energize shanghai agency presentation 2011
Energize shanghai agency presentation 2011Energize shanghai agency presentation 2011
Energize shanghai agency presentation 2011
 
Archana Belani_SAPTAIDC_portfolio_linked_141015
Archana Belani_SAPTAIDC_portfolio_linked_141015Archana Belani_SAPTAIDC_portfolio_linked_141015
Archana Belani_SAPTAIDC_portfolio_linked_141015
 
Mixedbag Marketing - Company Profile
Mixedbag Marketing - Company ProfileMixedbag Marketing - Company Profile
Mixedbag Marketing - Company Profile
 

Similar to MyHabit Redesign Presentation

Similar to MyHabit Redesign Presentation (20)

Digital marketing client proposal2
Digital marketing client proposal2Digital marketing client proposal2
Digital marketing client proposal2
 
Snook Overview
Snook OverviewSnook Overview
Snook Overview
 
Top Web Development & Social Media Agency in UAE | Brainy Bulls Company Profile
Top Web Development & Social Media Agency in UAE | Brainy Bulls Company ProfileTop Web Development & Social Media Agency in UAE | Brainy Bulls Company Profile
Top Web Development & Social Media Agency in UAE | Brainy Bulls Company Profile
 
Almost portfolio
Almost portfolioAlmost portfolio
Almost portfolio
 
Web Design Proposal PowerPoint Presentation Slides
Web Design Proposal PowerPoint Presentation Slides Web Design Proposal PowerPoint Presentation Slides
Web Design Proposal PowerPoint Presentation Slides
 
Web Design Proposal Powerpoint Presentation Slides
Web Design Proposal Powerpoint Presentation SlidesWeb Design Proposal Powerpoint Presentation Slides
Web Design Proposal Powerpoint Presentation Slides
 
UX STRAT USA, Ben Judy, "Mission-Based Experience Design Strategy"
UX STRAT USA, Ben Judy, "Mission-Based Experience Design Strategy"UX STRAT USA, Ben Judy, "Mission-Based Experience Design Strategy"
UX STRAT USA, Ben Judy, "Mission-Based Experience Design Strategy"
 
Project Proposal PowerPoint Presentation Slides
Project Proposal PowerPoint Presentation Slides Project Proposal PowerPoint Presentation Slides
Project Proposal PowerPoint Presentation Slides
 
Project Proposal Powerpoint Presentation Slides
Project Proposal Powerpoint Presentation SlidesProject Proposal Powerpoint Presentation Slides
Project Proposal Powerpoint Presentation Slides
 
Website Development Proposal Document Powerpoint Presentation Slides
Website Development Proposal Document Powerpoint Presentation SlidesWebsite Development Proposal Document Powerpoint Presentation Slides
Website Development Proposal Document Powerpoint Presentation Slides
 
Ace awards 2013
Ace awards 2013Ace awards 2013
Ace awards 2013
 
Website Development Proposal Document PowerPoint Presentation Slides
Website Development Proposal Document PowerPoint Presentation Slides Website Development Proposal Document PowerPoint Presentation Slides
Website Development Proposal Document PowerPoint Presentation Slides
 
Ads and url portfolio
Ads and url  portfolioAds and url  portfolio
Ads and url portfolio
 
Ads and url portfolio
Ads and url  portfolioAds and url  portfolio
Ads and url portfolio
 
Post MVP Strategies - Chris Clarke
Post MVP Strategies - Chris ClarkePost MVP Strategies - Chris Clarke
Post MVP Strategies - Chris Clarke
 
Portfolio_TS
Portfolio_TSPortfolio_TS
Portfolio_TS
 
Usability: whats the use? Presented by We are Sigma and PRWD
Usability: whats the use? Presented by We are Sigma and PRWDUsability: whats the use? Presented by We are Sigma and PRWD
Usability: whats the use? Presented by We are Sigma and PRWD
 
Lean Analytics & Analytics Dashboards
Lean Analytics & Analytics DashboardsLean Analytics & Analytics Dashboards
Lean Analytics & Analytics Dashboards
 
Vibes Credentials- Digital Marketing Company in India
Vibes Credentials- Digital Marketing Company in IndiaVibes Credentials- Digital Marketing Company in India
Vibes Credentials- Digital Marketing Company in India
 
Awesomesauce Company Profile
Awesomesauce Company ProfileAwesomesauce Company Profile
Awesomesauce Company Profile
 

Recently uploaded

Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
JIT KUMAR GUPTA
 
Research about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anasResearch about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anas
anasabutalha2013
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
ajroy0196
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
Jaime Brown
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
cyebo
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
cyebo
 

Recently uploaded (20)

Pitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in TechnologyPitch Presentation for Service Design in Technology
Pitch Presentation for Service Design in Technology
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptx
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers Paris
 
Claire's designing portfolio presentation
Claire's designing portfolio presentationClaire's designing portfolio presentation
Claire's designing portfolio presentation
 
Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdf
 
Research about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anasResearch about Venice ppt for grade 6f anas
Research about Venice ppt for grade 6f anas
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythree
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
 
Redefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and LocalisationRedefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and Localisation
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
 
Extended Reality(XR) Development in immersive design
Extended Reality(XR) Development in immersive designExtended Reality(XR) Development in immersive design
Extended Reality(XR) Development in immersive design
 
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
 
Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.Art Nouveau Movement Presentation for Art History.
Art Nouveau Movement Presentation for Art History.
 
Design Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistDesign Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM Specialist
 

MyHabit Redesign Presentation

  • 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.
  • 8.
  • 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
  • 21. Gateway i O S R E D E S I G N Gateway (Final Concept) Upcoming Events - V1 Upcoming Events - V2
  • 22. i O S R E D E S I G N Menu (Tested; Final) Side menu
  • 23. Even results - V1 i O S R E D E S I G N Event Detail (Work in Progress) Even results - V2
  • 24. Browse - Clothing i O S R E D E S I G N Browse & Search (Tested; Final) Browse - Handbags Search
  • 25. i O S R E D S I G N Refinements (Work in Progress) Refine - Brand Refine - Brand
  • 26. Default view i O S R E D E S I G N Product Detail (Work in Progress) Scroll view - V1 Scroll view - V2
  • 27. Shopping Bag i O S R E D E S I G N Shopping Bag & My Account (Work in Progress) Account Orders Account Settings
  • 28. MOBILE REDESIGN Web / Responsive Process
  • 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?
  • 52. MOBILE REDESIGN Web / Responsive Designs
  • 53. W E B R E D E S I G N Gateway Concept 1
  • 54. W E B R E D E S I G N Gateway Concept 1 (Alt)
  • 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.
  • 64. R E W O R K I N G B R O W S E User Personas
  • 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