Challenge Summary
Welcome to Fabrico eCommerce Product Filter UX Mobile Wireframe Challenge
Fabrico wants to retool & redesign its mobile navigation tools for thousands eCommerce products, and we are looking for your help to create a flexible flow that includes filters, sorting and other elements to make this tool easier to use.
The goal is to create an improved user experience for mobile shoppers and make products easier to find through a story-centric workflow in a clean and elegant interface.
Read more details on challenge spec below and let us know any questions you have!.
Note: Submit as much application features as you can for early review.
Note: Address Checkpoint Feedback for the Final Round Submission
The objective of this wireframe challenge is to provide the customer an efficient, easy, and intuitive way to navigate their ecommerce retail site by improving, enhancing, and designing navigation tools, filters, facets and sort offerings. The Key Performance Index objective is to drive Mobile conversion.
For context, the client is a 4 year old online retailer flowing fresh merchandise to their site every day. They have ~15k products on site at any given time. Their merchandise spans across several categories, such as apparel, handbags, jewelry, accessories, home products, and more.
Features Requirements:
- Comprehensive navigation experience from first click onto site through Product Display Page
- Search Result Breadcrumb
- Need able to change the Search Result Category
Current product filter offerings:
- Size,
- Collection
-- Style
- Material
- Color,
- Price,
Additional filters ex:
- Material,
- Heel height,
- etc. - Be creative with these options!
Current sort offerings:
- Brand name (A-Z)
- Brand name (Z-A)
- Highest price,
- Lowest price,
- Featured,
- Random
Additional sort options:
- Newest,
- Oldest,
- Most favorited,
- etcs.
Product information
- Product Thumbnail
- Product Title
- Product Description
- Original Price
- Discount Price (If any)
- % Save Price (If any)
- Remaining Item (If any)
- Label/Badge (If any)
- Filters on a page can be 0-n filters, so the design has to show that wide range of different types of filters and facets
- IMPORTANT: Not all categories and products will leverage the same features and filters, so need to be able to be flexible enough to associate certain filters with relevant categories/products, or at least a clean way to hide irrelevant ones.
Design Problems
- No need designing the search input, we just need you to create design for search result and it’s related fitler and facets in mobile application.
- Allow the user to filter the product listing pages by Material, Heel height, etc based on their current category.
- Tag feature that shows current search results and filters applied. The ability to "stack" multiple filters and search terms to refine results.
- Allow user to easily add and remove filters to more easily refine their results.
- Allow the user to retain their filters, where relevant, as they navigate different categories. For example, if I search for size 34 in jeans and then I switch to pants, remember my size preference is 34.
- Need a way to sort the data easily and quickly by using available filter.
- Current site, pulls in a lot of information. We need an elegant and easily understandable way to display this content.
- How to show different product categories on a single screen in a clean way, that benefits the user
- Take a lot of information and make it easy to understand.
- Provide an intuitive and flexible UX that can accommodate a wide range of filters and facets applied, whether that’s zero filters, or dozens of filters are applied.
Submission Requirements:
- Mobile Portrait Retina Screen Size: 750px(w) & 1334px(h) up to your design
- Color Theme: Up to Designers
- Fonts: Up to Designers
Target Audience
- Online shoppers; typically women 25-54 years old
- More iOS users than Android users
Judging Criteria
- User experience and information architecture
- Expanding upon and creating unique features for the provided concepts
- Visual-driven, clear, concise, and meaningful data display
- Capture all the required features for Fabrico eCommerce Filter UX Mobile
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Wireframes should be built in Plain HTML/CSS/JS or you can generate from Axure application. The resulting files are not critical in this Challenge. The most important point is that all the content is listed and the pages are linked together to show page flow. Keep your source files out from this submission folder.
- If you using Sketch, you must submit on Black/White theme.
Source Files
All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file
Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths
Fabrico wants to retool & redesign its mobile navigation tools for thousands eCommerce products, and we are looking for your help to create a flexible flow that includes filters, sorting and other elements to make this tool easier to use.
The goal is to create an improved user experience for mobile shoppers and make products easier to find through a story-centric workflow in a clean and elegant interface.
Read more details on challenge spec below and let us know any questions you have!.
Round 1
Initial Fabrico eCommerce Product Filter UX Mobile WireframeNote: Submit as much application features as you can for early review.
Round 2
Final Fabrico eCommerce Product Filter UX Mobile WireframeNote: Address Checkpoint Feedback for the Final Round Submission
The objective of this wireframe challenge is to provide the customer an efficient, easy, and intuitive way to navigate their ecommerce retail site by improving, enhancing, and designing navigation tools, filters, facets and sort offerings. The Key Performance Index objective is to drive Mobile conversion.
For context, the client is a 4 year old online retailer flowing fresh merchandise to their site every day. They have ~15k products on site at any given time. Their merchandise spans across several categories, such as apparel, handbags, jewelry, accessories, home products, and more.
Features Requirements:
- Comprehensive navigation experience from first click onto site through Product Display Page
- Search Result Breadcrumb
- Need able to change the Search Result Category
Current product filter offerings:
- Size,
- Collection
-- Style
- Material
- Color,
- Price,
Additional filters ex:
- Material,
- Heel height,
- etc. - Be creative with these options!
Current sort offerings:
- Brand name (A-Z)
- Brand name (Z-A)
- Highest price,
- Lowest price,
- Featured,
- Random
Additional sort options:
- Newest,
- Oldest,
- Most favorited,
- etcs.
Product information
- Product Thumbnail
- Product Title
- Product Description
- Original Price
- Discount Price (If any)
- % Save Price (If any)
- Remaining Item (If any)
- Label/Badge (If any)
- Filters on a page can be 0-n filters, so the design has to show that wide range of different types of filters and facets
- IMPORTANT: Not all categories and products will leverage the same features and filters, so need to be able to be flexible enough to associate certain filters with relevant categories/products, or at least a clean way to hide irrelevant ones.
Design Problems
- No need designing the search input, we just need you to create design for search result and it’s related fitler and facets in mobile application.
- Allow the user to filter the product listing pages by Material, Heel height, etc based on their current category.
- Tag feature that shows current search results and filters applied. The ability to "stack" multiple filters and search terms to refine results.
- Allow user to easily add and remove filters to more easily refine their results.
- Allow the user to retain their filters, where relevant, as they navigate different categories. For example, if I search for size 34 in jeans and then I switch to pants, remember my size preference is 34.
- Need a way to sort the data easily and quickly by using available filter.
- Current site, pulls in a lot of information. We need an elegant and easily understandable way to display this content.
- How to show different product categories on a single screen in a clean way, that benefits the user
- Take a lot of information and make it easy to understand.
- Provide an intuitive and flexible UX that can accommodate a wide range of filters and facets applied, whether that’s zero filters, or dozens of filters are applied.
Submission Requirements:
- Mobile Portrait Retina Screen Size: 750px(w) & 1334px(h) up to your design
- Color Theme: Up to Designers
- Fonts: Up to Designers
Target Audience
- Online shoppers; typically women 25-54 years old
- More iOS users than Android users
Judging Criteria
- User experience and information architecture
- Expanding upon and creating unique features for the provided concepts
- Visual-driven, clear, concise, and meaningful data display
- Capture all the required features for Fabrico eCommerce Filter UX Mobile
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
- Wireframes should be built in Plain HTML/CSS/JS or you can generate from Axure application. The resulting files are not critical in this Challenge. The most important point is that all the content is listed and the pages are linked together to show page flow. Keep your source files out from this submission folder.
- If you using Sketch, you must submit on Black/White theme.
Source Files
All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file
Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.