Material Design Wireframes (2)cameronluck.com/wp-content/uploads/2016/04/Material-Design-Wireframes.pdfa user sees, thus it must cater to each persona that uses your app

MyHabit Material Design WireframesUX Designer: Cameron LuckContact: [email protected]

Gateway

Gateway Tenets

• The Landing View - the first screen that loads in your app - is often one of the only views within your app that a user sees, thus it must cater to each persona that uses your app.

• Gateway should enable users to quickly and easily navigate to what they want to see. (Events or ASINs)

Gateway v1 Interactions

• This version of the Gateway assumes that we cannot make any changes to the Event flow, thus Events are still front and center.

• This approach is more content-focused than our current approach, choosing to show Event Lifestyle Imagery as large as possible.

• This approach also limits the number of events on-screen at any given time to adjust the scrolling behavior of users

• The “Browse Bar” at the bottom of the screen was implemented to keep focus on Events while also allowing users to understand their option to browse when they select a department.

Gateway Landing View T1

Gateway T1 Interaction

• User scrolls down “Featured” tab

• User taps “Mens” tab and sees the additional “Browse by Category Bar”

• User begins scrolling; toolbars hide

• User scrolls back up; toolbars show.

The user lands on the “Featured” tab where he/she can scroll through the latest Events in each Category.

Users can change Departments by swiping through the Departments bar and tapping on the Department they want to view to switch Departments. Swiping elsewhere on the view will not change Departments.

The individual Department tabs now feature a “Browse by Category” bar at the bottom of the page that is available in the initial view. By tapping this bar, users can select a Category and view all the ASINs within the Department.

The “Browse by Category” options will be explored later on.

As a user scrolls down the page, the toolbars (Both the main App bar and the “Browse by Category bar) will move off-screen to give the user more screen space to view Events.

Once the user scrolls back up, or the user is idle for 2 seconds or more, the bars will slide back into the view.

Gateway - Landing View Men’s Tab Gateway - Scrolled

• Current Android customers have likely never experienced the “Browse” section on MyHabit’s Android app. Customers will likely be stumbling across “Browse” for the first time and may be confused by it.

• Customers who are looking for Browse will be able to easily find it without having to search through the menu.

• Increased page views on Browse pages.

• Customers who shop Events will still be shopping in a bit of a “zig-zag” pattern as they go in and out of Events based on the Event imagery.

Hypotheses

• Customers are not able to see items inside of the Event and will continue to think that the items in the Event Lifestyle image are available for sale.

• “Browse by Category” bar may mislead people to think that they are filtering Events by Category instead of browsing to ASINs by Category.

• Customers may be confused by the app bar hiding and showing. This will likely be alleviated after repeat use.

• Since the current layout of Events is a list view, customers may inherently want alternate ways to view Events. (i.e. List View/Grid View controls)

Potential Customer Letdown

Global Gateway Interactions

Gateway Scroll Interaction

• User taps any department tab; additional “Browse by Category Bar” bar slides up from bottom


• User begins scrolling back up; toolbars show

Additional Concepts

• This widget will only be used in tandem with the T1 treatment. An icon will be added to each Event card that allows users to open a modal preview of the event.

• Users can swipe left and right to view up to 10 products in the Event. An additional icon will be added to the modal in order for the user to “Expand” the event. This will transition the view state from the modal to the Event Detail page.

• If the user is not interested in the items, he/she can tap outside of the modal to close it. An “X” icon can also be added to the modal if deemed necessary.

Event Quick View

Each Event on any gateway will have an icon in the right side of the card’s details. When tapped, this icon will load a modal of the top few items in the Event.

These items can be personalized by the user, top sellers in the Event, or randomly selected.

Users can swipe right to left to scroll through additional items in the Event. An “expand” icon will be placed in the top right corner of the modal that will allow the user to transition to the entire Event Detail page.

Tapping on any of the products will take the user to it’s corresponding Product Detail page. Tapping “Back” from that page will return the user to the Gateway.

Gateway - Landing View Event Quick View

• This widget - targeted specifically at Event shoppers - recommends Events similar to the one that the user was just viewing.

• This widget will appear once a user has viewed an Event Detail page or an Event Quick View. Users can swipe left and right to view up to 5 suggested Events.

• If the user is not interested, he/she can tap the “X” button to close the widget, which collapses back down to the original Event stream.

Gateway Suggested Events

Browse

Browse Tenets

• Browse should be easily found and located where it is expected - including a way to access it from the main Gateway.

• Browse should be quick and responsive and should direct users down the flow they are looking to explore.

• To accomplish the goals of a smooth Browse experience, three separate UI elements will work together to create a seamless Browse experience based on the user’s desired entry point. (Menu, Browse Bar, and Search)

• To the right, the Gateway is pictured here with the “Shop Men’s Categories” bar. This bar appears on each department page and is contextual to the selected department. When the user taps the bar, the top level Browse categories for the selected department will appear for the user to initiate the Browse process.

• If the user is not interested in Browsing, they will scroll and the Browse Bar will disappear, moving the focus back to Events.

Browse Experience

Path 1: Utility Browse

Main Menu - Browse Interaction

• User lands on “Women’s” Gateway

• User taps Main Menu icon; Menu slides out

• User taps “Shop by Category”; Category page loads

• Selected department (“Women’s”) automatically opens

• User taps “Clothing”; “Women’s Clothing” page slides on

Users have access to the Menu icon from any of the Gateway pages.

Tapping this icon will load the side menu where users have the ability to select many common options.

Tapping “Browse Categories” (text TBD) will push the “Shop by Category” view on from the left. The view will load with all of the departments in a collapsed state.

Immediately after load, the currently selected department will open to reveal the top level categories within it.

Women’s Gateway Women’s Browse Bar Women’s Clothing

Users can tap on any category to be directed to the category page or can tap on the dropdown icons. Only one department can be in an “opened” state at a time, so tapping a dropdown icon while another dropdown is already open will collapse the first dropdown and open the more recently tapped one.

Women’s Clothing

Users will land on the top-level Category page with the “All” tab selected in the sub-category bar. Users can swipe horizontally on the sub-category bar to filter by sub-category.

Users can also use the “Filter” and “Sort” options to further refine their browse/search results.

Browse

Browse Tenets

• Browse should be easily found and located where it is expected - including a way to access it from the main Gateway.

• Browse should be quick and responsive and should direct users down the flow they are looking to explore.

• To accomplish the goals of a smooth Browse experience, three separate UI elements will work together to create a seamless Browse experience based on the user’s desired entry point. (Menu, Browse Bar, and Search)

• To the right, the Gateway is pictured here with the “Shop Men’s Categories” bar. This bar appears on each department page and is contextual to the selected department. When the user taps the bar, the top level Browse categories for the selected department will appear for the user to initiate the Browse process.

• If the user is not interested in Browsing, they will scroll and the Browse Bar will disappear, moving the focus back to Events.

Browse Experience

Path 1: Utility Browse

• The Utility Browse experience updates the side menu to remove the interactive Browse experience from the side menu, changing all of the main menu touch points into individual page links.

• This approach is utility focused and allows the user to quickly navigate to desired categories without the need to view Events or explore the Gateway.

• This solution is optimal for users who don’t want to traverse the Event flow and are looking for something not entirely too specific.

• Users who use this version of the Browse experience are likely to not interact with the “Browse Bar” experience. This is expected.

Utility Browse

Utility Browse Interaction


• User taps Main Menu icon; Menu slides out

• User taps “Shop by Category”; Category page loads

• Selected department (“Women’s”) automatically opens

• User taps “Clothing”; “Women’s Clothing” page slides on

Users have access to the Menu icon from any of the Gateway pages.

Tapping this icon will load the side menu where users have the ability to select many common options.

Tapping “Browse Categories” (text TBD) will push the “Shop by Category” view on from the left. The view will load with all of the departments in a collapsed state. If “Featured”, the view will load in default order.

Immediately after load, the currently selected department will open to reveal the top level categories within it.

Women’s Gateway Menu - Browse Categories Women’s Clothing

Users can tap on any category to be directed to the category page or can tap on the dropdown icons. Only one department can be in an “opened” state at a time, so tapping a dropdown icon while another dropdown is already open will collapse the first dropdown and open the more recently tapped one.

Women’s Clothing



• Current Android customers will have a cleaner browsing experience since the current dropdown categories in the menu follow responsive web patterns and not native Android patterns.


• Increased page views on Browse pages due to a specific view for Browsing and the removal of the redundancy of department names from the side menu.

• Customers who shop Events will not be disrupted as the focus will remain on Events with Browse as a secondary option.

Hypotheses

• Customers shopping Browse may not find the new “Browse by Category” link in the main menu due to their current expectation of what’s in the main menu.

• If images remain on “Shop by Category” page, buying patterns could be influenced based on the visible item.


Path 2: Exploratory Browse

• This version of the Browse experience intercepts Users on the Gateway to deliver a subtle Browse experience to them.

• This approach keeps the focus on Events, but allows Browse-centric shoppers to initiate the Browse experience through the “Browse Bar”

• This approach also teaches Event shoppers that Browse is an option on MyHabit, which they may not have known prior


Exploratory Browse

Browse Bar Interaction


• User taps “Browse by Category Bar”

• User swipes through categories

The user can land on either the “Featured” tab or the last department he/she visited. The “Browse Bar” will slide up from under the nav bar when on any view except “Featured”

On tap, the “Browse Bar” will slide up, revealing top-level categories for the selected Department.

As the “Browse Bar” slides up to reveal the top-level categories, a black opacity will shade out the Gateway to further help separate the concept of Events from the “Browse Bar” which will take users to ASINs.

Users can swipe horizontally to see all the top-level categories. Once a category is tapped, the Category page will slide into view.





• Customers who are used to perusing Events and are not necessarily “Event Shoppers” now have a path to go down once their interest in Events is exhausted.

• Increased page views on Browse pages. Intercepting customers on the Gateway allows them to discover the Browse experience in their “natural environment” which will pique curiosity and taps.

Hypotheses

• Customers shopping Events may think the “Browse Bar” is filtering the Events in the view. The dark opacity overlay accompanying the “Browse Bar” is an attempt to mitigate this misconception.

• Customers may be confused by the “Browse Bar” hiding and showing. This will likely be alleviated after repeat use.

• Customers who shop the “Featured” tab will not discover the “Browse Bar” and may not use the Utility Browse either. This is expected behavior, but a small percentage of people could miss out on Browse as a whole if they look specifically at the Landing View and don’t switch departments.


Event Detail

Event Detail Tenets

• Event Detail should be easy to browse, sort, and filter

• Event Detail pages should provide an interesting experience to highlight the Event as a special type of page

• The Event Detail page has a large focus on the Event image to show a distinction between normal pages and create a special feeling on this page.

• To the right, the Event Detail is pictured here with the “Filter / Sort” bar. Each portion of the bar loads an accompanying bottom sheet that will allow the user to Filter or Sort the results he or she is seeing at the time. The Filter / Sort option does not need to update in realtime - instead, the Filter / Sort should be executed when the user taps “Apply”.

• If the user is not interested in Filtering or Sorting, they will scroll and the Filter / Sort will disappear, moving the focus back to items in the Event.

Event Detail Experience

Event Detail Interaction


• User taps an Event in the Event stream

• Event image slides to top of page. Text-protection scrim, icons, and text overlay the Event image. Sort / Filter bar slides in.

• User scrolls down and title bar comes down from top of page.

• User scrolls back up and bar goes away.

User scrolls down the Gateway and taps on an Event image. Event Detail page loads by transitioning the

Event’s image to the top of the screen and dissolving in the scrim, title, and nav bar on top of it. The Filter / Sort bar slides up from the bottom of the screen, overlaying on top of the items.

Items dissolve in one after the other on a .1 second interval.

Women’s Gateway Event Detail Event Detail - Scrolled

When users scroll down the page, the Filter / Sort bar moves down off the screen. If the user is idle for 2 seconds or begins scrolling back up, the Filter / Sort bar slides back up from the bottom of the screen.

When the Event title passes off the top of the screen, the nav bar is replaced with the White bar (shown above) with the title displayed inside of it. If the title is too long, use ellipses

Grid Layout

The Grid layout is used as the standard layout. The Grid layout is used when the image heights are very similar and the content is homogenous.

The Waterfall layout is used only when there are variable image heights in the results view. This will most likely be seen in deep discount Events with lots of heterogeneous content.

Waterfall Layout

• With the Filter / Sort options being at the bottom of the screen, more Android users will be able to find it and usage will go up.

• Customers who are looking to filter or sort will be able to easily find it without having to scour the UI.

Hypotheses

• Primary navigation switching to white with the scrim may confuse older users. Younger users will likely expect this behavior.


Product Detail

Product Detail Tenets

• Users should be able to quickly add an item to their cart and checkout in a quick and intuitive fashion.

• Users should be able to easily get the information they want and need in order to feel empowered to make a purchase.

• Information should be displayed using suggestive disclosure to avoid cognitive load and deliver the right information to the user at the right time.

• The goal of the Product Detail page is to get users through the purchasing flow as quickly as possible, while also assuring them by providing the information they need to make a purchase without cognitive overload.

• To the right, the Product Detail page is pictured with the “Add to Bag” button at the bottom. This button -unlike the other bottom bars - is stuck in position as the user scrolls. Current users have a large tendency to scroll. If they do, they will find the size and color options, as well as all additional detail for this item. If they know they want the item and choose not to scroll, tapping the “Add to Bag” button will open a bottom sheet where they can select size and color options and add the item to their bag without having to scroll at all.

Product Detail Experience

Product Detail Interaction 1

• User is shopping in an Event and taps on an item

• The item expands and the rest of the Product Detail page transitions on screen.

• User scrolls down the page and sees options and information. As user scrolls, the title bar comes down from the top of the page.

• User taps “Add to Bag” with options selected and the item is added to bag.

• Toast appears to allow the user to View Bag.

Product Detail Interaction 2

• User is shopping in an Event and taps on an item

• The item expands and the rest of the Product Detail page transitions on screen.

• User taps “Add to Bag” without any options selected and bottom sheet with options slides up from the bottom of the screen.

• Options are selected and user taps “Done” to complete the “Add to Bag” process.

• Toast appears to allow the user to View Bag.

The Product Detail page will load on in a similar way to the Event Detail page. The Product image should expand to cover the screen and the additional nav bar and text will dissolve onto the screen. Tapping the image should load a full screen modal where users can zoom for detail.

Users can swipe the main image to rotate between all available images for this item. If the item has a video, it will show as the first “image” in the carousel and will auto-play on load

As the user scrolls, he/she will first encounter the size and color options for this item. Sold out colors and sizes should be crossed out and greyed out. If the user taps “Add to Bag” while the Size and Color are visible without both selections being made, the text on the unselected options (size, color, etc.) should turn red to highlight what is missing.

Product Detail Product Detail - Scroll 1 Product Detail - Scroll 2

As the user continues to scroll, additional information, will be available. If the user scrolls far enough that the item name goes off the top of the screen, the white nav bar will load from the top of the screen as shown above. This allows the user to always have the ability to see the item name, brand, price, and “Add to Bag” option regardless of the situation.

Add to Bag Bottom Sheet

This bottom sheet will be displayed when the user taps the “Add to Bag” button when the size, color, etc. options are not visible on the screen. (Either user is at top of page or scrolled to bottom of page).

This bottom sheet will hold all of the variables for this item. Tapping “Done” will complete the adding to the bag process.

Once the item has been added to the bag (using either the bottom sheet or the main view), this toast will slide up over the “Add to Bag” button. Tapping “View Bag” will take the user to the Bag / Cart view. The Bag should load on as a full screen modal from the bottom of the page.

After a few seconds, this toast will slide back down.

Added to Bag Toast

• Customers will be able to easily understand and find the information they need to make purchases without being overwhelmed.

• Customers who make impulse buys without the need for lots of description will have an easier time adding to their bag and checking out.

• With the images being larger and the main focal point of the detail page, users will be able to shop on Android with less friction, which could lead to more conversion.

• Customers will less likely need to zoom, which will drop the use of the zoom feature.

• Because customers already scroll quite a bit, having the additional information pushed down the page will not disrupt the buying flow.

• Because the Bag / Cart does not load once the item is added to the Bag, users will still lack urgency to complete the purchase.

Hypotheses

• Customers may not initially think to scroll the page, which could lead to confusion.


Search, Sort, and Filter

Search, Sort, and Filter Tenets

• Search should help guide users to the product they want as quickly as possible. Sorting and Filtering should happen upfront wherever is possible to help users get to results they want to see quicker.

• Filtering and Sorting should be intuitive, accessible, and responsive to user input.

• The goal of the Search page is to get users to the items they want to see as quickly as possible.

• To the right, theSearch page is pictured with a “Recent Searches” widget. The Keyboard is automatically loaded on-screen with the cursor focused into the search box, so the user doesn’t have to tap an additional time to start the search.

• As a user types, the search criteria should be picked up for auto-complete. Similar to Amazon, the search criteria should be matched with the categories (shown in Beige) the criteria falls in so the user can quickly get to the right level of the A9 tree in order to Sort and Filter effectively.

Search Experience

Search Interaction


• User taps the Search icon

• Search view dissolves on top of Gateway view. Keyboard slides on.

• User begins typing and auto-complete displays “Search Suggestions” (in Beige) and auto-complete strings.

Users have access to the Search icon from any Gateway or Detail page.

Tapping this icon will load the Search view on top of the existing view. Search will dissolve on top of whatever view it is loading on.

When the Search page loads, the keyboard will automatically slide up from the bottom of the page and the cursor will be blinking inside the search box.

The “Recent Searches” widget will display the last 5 searches with the ability to tap “More Searches”. If tapped, the keyboard will collapse and “Recent Searches” will expand to take over the page.

Women’s Gateway Search View Searching

As users search, “Search Suggestions” -similar to Amazon’s - will appear first including auto-completed strings with categories. Auto-completed strings without categories will appear beneath the “Search Suggestions”.

“Search Suggestions” will allow users to bypass the confusing Filter option that is available on an initial search which just includes “Category”.

If users search for something generic such as “Women’s Clothing”, “Men’s Shirts”, etc. which already has a pre-defined Browse node, it should land the user on this page where they can easily continue refining their search via the Browse tree without having to do additional filtering.

If users search for something more granular, they will be dropped on this view (without the sub-navigation) with the Filter / Sort bar down below.

All “Results Pages” (Event Detail, Search Results, Browse Results) should share the same view.

Search Results - Top Level Search Results - Granular

Filter / Sort Interaction


• User taps the Search icon

• Search view dissolves on top of Gateway view. Keyboard slides on.

• User begins typing and auto-complete displays “Search Suggestions” (in Beige) and auto-complete strings.

The Filter / Sort bottom bar behaves the same as the Browse bar. As a user scrolls down the page, it hides, but after 2 seconds idle time or if the user scrolls up, it reappears.

Filter and Sort both load bottom sheets with options. Sort is used more frequently than Filter and most user are right-handed, so Sort has been placed on the right for strategic ease-of-use purposes.

When a user taps “Sort”, this bottom sheet will slide up from the bottom of the screen and an opacity overlay will dissolve on top of the items, behind the bottom sheet.

The user can select a sorting preference and when “Apply” is tapped, the bottom sheet will slide down, opacity overlay will dissolve away, and the results will update.

Search Results Sort Filter

Filter behaves in the same way as “Sort”, but with an additional caveat. When a Filter option is selected with more options inside of it, the bottom sheet will grow larger to make room for these options (shown on next page). If there are enough options to span the whole page, the bottom sheet will become a full-screen modal.

Filter behaves in the same way as “Sort”, but with an additional caveat. When a Filter option is selected with more options inside of it, the bottom sheet will grow larger to make room for these options (shown on next page). If there are enough options to span the whole page, the bottom sheet will become a full-screen modal.

When a filter option with additional options that doesn’t take up the entire screen (full screen modal) is tapped, the bottom sheet expands out and the “Back” button is displayed on the bottom left corner of the bottom sheet.

From here, if a price is selected and “Apply” is tapped, the bottom sheet closes and it is applied. If a price is selected an “Back” is tapped, the price is saved and will be applied whenever “Apply” is tapped somewhere else in the Filtering panel.

Filter Filter - Price Tapped Filter - Category Tapped (Full Screen Modal)

If the options in the panel are vast enough to take over the full screen, the bottom sheet slides up and converts into a full screen modal with the Back button on the top left corner. Tapping back will collapse the modal back down to the bottom sheet, not close the entire filtering panel.

Filter and Sort options will appear at the top of the results view and can be removed by tapping the “X” in the corresponding box. When an ‘X” is tapped, the results should refresh instantaneously.

Only one Sort option can be present at a time. The most recently selected sort option will be shown.

Filters Applied

• Customers will be able to find items and filter more intuitively with the addition of “Search Suggestions” that will help bypass the need to select a Category in the filter options in many cases.

• Customers will be able to filter quickly and easily remove filters they no longer want.

Hypotheses

• Customers may not understand if all options will be applied when selecting multiple filtering options in one pass.

• Customers may be confused with how the filter options panel is working.


Menu

Menu Tenets

• The Menu should be accessible, but should not disrupt the buying flow.

• The Menu should hold the most helpful portions of the app and should aid in discoverability of such features.

• This version of the Gateway assumes that we cannot make any changes to the Event flow, thus Events are still front and center.

• This approach is more content-focused than our current approach, choosing to show Event Lifestyle Imagery as large as possible.

• This approach also limits the number of events on-screen at any given time to adjust the scrolling behavior of users


Menu

Menu Interaction

• User lands on Women’s Gateway

• User taps the menu icon and the menu flies out from the left-hand side of the screen.

• User taps “Browse Categories” and the Browse Categories page dissolves on.

• User taps the side menu again and taps “Home”. Gateway dissolves back on.

The Menu icon is accessible from any top-level page within the app. The top-level pages are all of the pages listed within the Menu itself.

Tapping the Menu icon from any of these pages will slide the menu out from the left-hand side of the screen.

Once the Menu has slid out, tapping any of the items in the menu will dissolve that view on top of the current view.

The views should be persistent and return the user to where they last were. (i.e. If the user had navigated to the “Kids” tab on Gateway, when the “Home” menu item is selected, the user should return to the “Kids” tab.)

Any view that loads from the Menu should have the Menu icon in the top left. No other views should have the Menu icon. Instead, this will be replaced with a Back arrow or an “X” icon ( the icon is dependent on the type of view and intended navigation)

Gateway - Landing View Menu Browse Categories Page

• The new Menu will make important parts of the app more accessible, thus increasing page hits and engagement on each of the pages which are Menu items.

Hypotheses

• Power users of the current MyHabit app may have grown used to Browsing via the Menu, which could lead to them not understanding the new “Browse Categories” feature. This will likely be mitigated after multiple uses.


Bag (Cart)

Bag Tenets

• The Bag’s primary focus should be informing the user of information they need to complete the purchase and expediting the Checkout flow. Editing should be kept to a minimum.

• The Bag should help alleviate stress around purchasing by providing as much information as possible without overwhelming the user.

• This version of the Bag addresses the customer problems of editing up-front allowing users to easily change quantity and remove items without having to use a separate “Edit” state.

• This approach allows users the flexibility of editing their Bag without making it a primary focus.

• This approach also gives the user all of the information necessary to help them make a purchasing decision. This information includes item name, price, size, color, returnable, shipping time, and quantity.

• The Checkout button stays locked to the bottom of the screen to allow the user to checkout, even if the Bag is scrolled.

Bag

Bag Interaction

• User lands on Women’s Gateway

• User taps the menu icon and the menu flies out from the left-hand side of the screen.

• User taps “Browse Categories” and the Browse Categories page dissolves on.

• User taps the side menu again and taps “Home”. Gateway dissolves back on.

The Menu icon is accessible from any top-level page within the app. The top-level pages are all of the pages listed within the Menu itself.

Tapping the Menu icon from any of these pages will slide the menu out from the left-hand side of the screen.

Once the Menu has slid out, tapping any of the items in the menu will dissolve that view on top of the current view.

The views should be persistent and return the user to where they last were. (i.e. If the user had navigated to the “Kids” tab on Gateway, when the “Home” menu item is selected, the user should return to the “Kids” tab.)

Any view that loads from the Menu should have the Menu icon in the top left. No other views should have the Menu icon. Instead, this will be replaced with a Back arrow or an “X” icon ( the icon is dependent on the type of view and intended navigation)

Gateway - Landing View Menu Browse Categories Page

• The new Menu will make important parts of the app more accessible, thus increasing page hits and engagement on each of the pages which are Menu items.

Hypotheses

• Power users of the current MyHabit app may have grown used to Browsing via the Menu, which could lead to them not understanding the new “Browse Categories” feature. This will likely be mitigated after multiple uses.


My Account

• What does this version accomplish?

• What hypotheses or problems does it present?

• Describe interactions

ARCHIVE

Gateway

Gateway T2 Interactions

• This version of the Gateway addresses a common user issue where the items pictured in the Event cover image are not available in the Event.

• Users can tap on the “Event Name” at any time to view the entire event.

• Users will be able to swipe through the first 5-8 items in the Event with the 6th-9th card reading “View All” which allows the user to enter the entire Event.



• User scrolls down “Featured” tab



• User swipes through ASINs to see “View All” button



The individual Department tabs now feature a “Browse by Category” bar at the bottom of the page that is available in the initial view. By tapping this bar, users can select a Category and view all the ASINs within the Category.


Users can swipe the ASINs to the left and right to browse through the first few products in each event. After the first 5-8 products, a “View All” button will appear to suggest the user views the entire event instead of continuing to scroll through items on the Gateway,

Gateway - Landing View Men’s Tab Men’s Event - Scrolled

Gateway - Scrolled





• Increased page views on Browse pages.

• Customers who shop Events will be able to see a few of the products available in the Event prior to diving into an Event page.

• The number of ASINs on screen will cause user fatigue.

Hypotheses

• Customers shopping Events may still miss an item they are interested based on the appearance of the first few ASINs.

• “Browse by Category” bar may mislead people to think that they are filtering Events by Category instead of browsing to ASINs by Category.

• Customers may be confused by the app bar hiding and showing. This will likely be alleviated after repeat use.

• Moving from our current experience to this experience could be quite jarring for existing customers.


Gateway T3 Interactions

• This version of the Gateway addresses a common user issue where the items pictured in the Event cover image are not available in the Event.

• Users can tap on the “View All” button next to the Event Name at any time to view the entire event.

• This treatment - similar to T2 - adds Event imagery behind the product ASINs to tie together the Event concept and the ASINs.



• User lands on “Featured” tab



• User swipes through ASINs as Event image transitions to white



The individual Department tabs now feature a “Browse by Category” bar at the bottom of the page that is available in the initial view. By tapping this bar, users can select a Category and view all the ASINs within the Category.


Gateway - Landing View Men’s Tab Men’s Tab - Scrolled



Men’s Event - Scrolled

Users can swipe the ASINs to the left and right to browse through the first few products in each event. As the user scrolls the event to the left, the Event image fades to white.

Users can click the “View All” button on the event header to see all items in the event or continue to swipe the cards to see all items.

Browse

Browse Bar Interaction


• User taps “Browse by Category Bar”

• User swipes through categories

The user can land on either the “Featured” tab or the last department he/she visited. The “Browse Bar” will slide up from under the nav bar when on any view except “Featured”

On tap, the “Browse Bar” will slide up, revealing top-level categories for the selected Department.

As the “Browse Bar” slides up to reveal the top-level categories, a black opacity will shade out the Gateway to further help separate the concept of Events from the “Browse Bar” which will take users to ASINs.

Users can swipe horizontally to see all the top-level categories. Once a category is tapped, the Category page will slide into view.




Documents

Material Design Wireframes (2)cameronluck.com/wp-content/uploads/2016/04/Material-Design-Wireframes.pdfa user sees, thus it must cater to each persona that uses your app