Challenge Summary
Welcome to the Fabrico eCommerce Product Filter UX Mobile Design Concepts 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 project 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.
We just received winning wireframe submission from previous challenge. You can use the wireframe as starting point to improve Fabrico eCommerce Product Filter UX. DO NOT just color the wireframe, if you do so all submissions will look similar. Think out of the box, suggest any best User experience for this application
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: Submit as much application features as you can for early review.
For this Design Concept challenge we need you to re-think how 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.
The expected result for this challenge is we need get comprehensive navigation experience from first click onto site through Product Display Page
Design Problem
- Please refer here for previous winning wireframe as starting point to get better Design concepts for Fabrico eCommerce Product Filter UX:
https://tc-wireframe.herokuapp.com/fabrico-filter/ff1/#/7445991/screen/35073073
- 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.
1). Landing Page
- Create landing page that users see at first time access the mobile web
- Display some product categories
- Search input/breadcrumb need to be displayed on page and easy to use
2). Browse Category
- Design how Browse Category looks
- Create some level sub menu of Category
3). Product Category Landing Page
- For Product Category landing page, think about how you structure the layout
- Display breadcrumb
- There are some sub-categories
- Think about clever way to display more categories
- How Sort and Filter button and selected options displayed in page
Product information data:
- Product Thumbnail
- Product Title
- Product Description
- Original Price
- Discount Price (If any)
- Remaining Item (If any)
- Label/Badge (If any)
4). Sort
- Need a way to sort the data easily and quickly by using available filter.
Current sort offerings:
- Brand name (A-Z)
- Brand name (Z-A)
- Highest price,
- Lowest price,
- Featured,
- Random
Additional sort options:
- Newest,
- Oldest,
- etc.
5). Filter
- Allow the user to filter the product listing pages by their current category.
- 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.
- 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.
- 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
- Current site, pulls in a lot of information. We need an elegant and easily understandable way to display this content.
Current product filter offerings:
- Size,
- Collection
-- Style
- Material
- Color,
- Price,
Additional filters ex:
- Material,
- Heel height,
- etc. - Be creative with these options!
6) Search Result
- Search results should only be viewed from a search that happens from applying filters or sorting.
- Tag feature that shows current search results and filters applied. The ability to "stack" multiple filters and search terms to refine results.
- 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.
- Display Search Result Breadcrumb
- Need able to change the for the related Category
7). Presentation Screen - 1920x1080 (16:9 Ratio)
- For this challenge, you need build 1 Presentation screen, this screen is the way to showcase your concept so keep it simple and make it look good!
- If you were walking into a meeting and needed to sell your idea - use this screen to showcase your concept.
General Requirements
Screen Sizes
- This is going to be developed as a Mobile web
- Screen Sizes: Mobile Portrait Retina (750px by 1334px)
Design Branding
Follow client Guidelines for Design Branding, Color Theme and Typography
- Brand font: Helvetica Neue LT Std and the following weights: 85 Heavy, 45 Light, 35 Thin, and 55 Roman.
- Client typically uses 85 Heavy and 35 Thin for headlines or emphasis
- Copy is typically styled in all lowercase, but if using the 35 Thin can be in all caps tracked out to 150.
- Brand Colors:
-- Red - #CF102D
-- Black - #000000
-- White - #FFFFFF
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your Marvelapp request to lunarkid@copilots.topcoder.com
- You MUST include your Marvelapp URL (in your marvelapp prototype, click on share and then copy the link & share it within your notes/comment this link while you upload).
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- Overall design and user experience
- Cleanliness of screen design and user flow
Target Audience
- Online shoppers, women 25-54 years old
- More iOS users than Android users
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
Submit JPG/PNG for your submission files.
Source Files
- All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, or Adobe Illustrator as a layered AI file or Sketch!
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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 project 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.
We just received winning wireframe submission from previous challenge. You can use the wireframe as starting point to improve Fabrico eCommerce Product Filter UX. DO NOT just color the wireframe, if you do so all submissions will look similar. Think out of the box, suggest any best User experience for this application
Read more details on challenge spec below and let us know any questions you have!.
Round 1
Initial Fabrico eCommerce Product Filter UX solution on Mobile screen sizeNote: Submit as much application features as you can for early review.
Round 2
Final Fabrico eCommerce Product Filter UX solution on Mobile screen sizeNote: Submit as much application features as you can for early review.
For this Design Concept challenge we need you to re-think how 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.
The expected result for this challenge is we need get comprehensive navigation experience from first click onto site through Product Display Page
Design Problem
- Please refer here for previous winning wireframe as starting point to get better Design concepts for Fabrico eCommerce Product Filter UX:
https://tc-wireframe.herokuapp.com/fabrico-filter/ff1/#/7445991/screen/35073073
- 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.
1). Landing Page
- Create landing page that users see at first time access the mobile web
- Display some product categories
- Search input/breadcrumb need to be displayed on page and easy to use
2). Browse Category
- Design how Browse Category looks
- Create some level sub menu of Category
3). Product Category Landing Page
- For Product Category landing page, think about how you structure the layout
- Display breadcrumb
- There are some sub-categories
- Think about clever way to display more categories
- How Sort and Filter button and selected options displayed in page
Product information data:
- Product Thumbnail
- Product Title
- Product Description
- Original Price
- Discount Price (If any)
- Remaining Item (If any)
- Label/Badge (If any)
4). Sort
- Need a way to sort the data easily and quickly by using available filter.
Current sort offerings:
- Brand name (A-Z)
- Brand name (Z-A)
- Highest price,
- Lowest price,
- Featured,
- Random
Additional sort options:
- Newest,
- Oldest,
- etc.
5). Filter
- Allow the user to filter the product listing pages by their current category.
- 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.
- 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.
- 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
- Current site, pulls in a lot of information. We need an elegant and easily understandable way to display this content.
Current product filter offerings:
- Size,
- Collection
-- Style
- Material
- Color,
- Price,
Additional filters ex:
- Material,
- Heel height,
- etc. - Be creative with these options!
6) Search Result
- Search results should only be viewed from a search that happens from applying filters or sorting.
- Tag feature that shows current search results and filters applied. The ability to "stack" multiple filters and search terms to refine results.
- 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.
- Display Search Result Breadcrumb
- Need able to change the for the related Category
7). Presentation Screen - 1920x1080 (16:9 Ratio)
- For this challenge, you need build 1 Presentation screen, this screen is the way to showcase your concept so keep it simple and make it look good!
- If you were walking into a meeting and needed to sell your idea - use this screen to showcase your concept.
General Requirements
Screen Sizes
- This is going to be developed as a Mobile web
- Screen Sizes: Mobile Portrait Retina (750px by 1334px)
Design Branding
Follow client Guidelines for Design Branding, Color Theme and Typography
- Brand font: Helvetica Neue LT Std and the following weights: 85 Heavy, 45 Light, 35 Thin, and 55 Roman.
- Client typically uses 85 Heavy and 35 Thin for headlines or emphasis
- Copy is typically styled in all lowercase, but if using the 35 Thin can be in all caps tracked out to 150.
- Brand Colors:
-- Red - #CF102D
-- Black - #000000
-- White - #FFFFFF
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your Marvelapp request to lunarkid@copilots.topcoder.com
- You MUST include your Marvelapp URL (in your marvelapp prototype, click on share and then copy the link & share it within your notes/comment this link while you upload).
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- Overall design and user experience
- Cleanliness of screen design and user flow
Target Audience
- Online shoppers, women 25-54 years old
- More iOS users than Android users
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
Submit JPG/PNG for your submission files.
Source Files
- All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, or Adobe Illustrator as a layered AI file or Sketch!
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.