Challenge Summary
Welcome to the ProductInventory wireframe challenge. ProductInventory is a web application that will be used by Quality Department team members to audit product availability against expected availability. Essentially, this app will be used to help employees figure out if a product is available and if not, the reasons why it is not. The web application will be used primarily on desktop but will need to be responsive and work on tablet and mobile as well. We would like to see your wireframe and interaction designs.
Round 1
Round 1 will focus on the following functionality for the new application:
0. Navigation
1. Dashboard
2. Search
3. Alerts / Notifications
NOTE: If anything is unclear, please ask for clarification on the forum and we will be happy to help!
Round 2
Round Two (2)
In Round 2, you will need to include all Round 1 screens (updated based on checkpoint feedback). For Round 2, you must also include all the remaining functionality described in the project documentation, including the following screens:
4. Login
5. Product Detail
6. Profile
7. Messages
NOTE: If anything is unclear, please ask for clarification on the forum and we will be happy to help!
ProductInventory is an application that will be used by quality department employees to search for products and audit actual product availability against expected availability. ProductInventory is capable of gathering and presenting a complete inventory of products, for a specific selected brand, that are being offered on their respective eCommerce site. ProductInventory will be a responsive web application that will be accessed via desktop, tablet and mobile.
We are looking for your wireframes and interaction design concepts to help us deliver an experience that allows quality team members to: find and keep track of products, validate which product hit the store and when, and understand and be alerted to when products are discontinued, out of stock, or for some other reason, are removed from the shopping site.
User Stories:
- John is a Quality Manager and would like to get an inventory of all products that are currently being sold on the company web site.
- John is only interested in specific product brand and categories so he selects a set of filters to expose only those products that fall within that selection criterion.
- John is also able to select which data fields (attributes) that he would like shown as a result of the inventory query. John should be able to save his unique preferences (e.g. brand, category, ratings, etc.) as well as reset to original search settings.
- John wants to see all attributes associated with a particular product, he should be able to drill down into next level of details for a particular product to view all of the associated detail attributes for that product.
- John would like to be able to export and/or email the raw table so that he can run further analysis
- Joe is a quality manager who needs to understand if the product being sold on the ecommerce web site are being displayed with the correct features , accessories, options, etc. He will use this application on a regular basis to spot check new products and compare them with existing product documentation.
- Jenny is a product manager who wants to ensure that the products that she is responsible for delivering to the marketplace are available for sale on the correct date. Jenny wants to be able to configure the app to show her products in her category, when they were added to the eCommerce site and validate that the product description, specs, etc. are all accurate.
- Ralph has a customer who is looking to purchase a new product and has a specific idea of what he is looking for. Ralph can verify that the product is available and that the options and accessories are accurately represented on the web site.
- Ralph has another customer who has heard about a new product that will soon become available. He asks Ralph if that particular product is available and what options and accessories come with it. Ralph is able to verify that the product is on the e-commerce site and show his friend all of the relevant information.
- Sam has a customer who wants to buy a specific product. The customer knows that the product comes in various colors and wants to know what these specific colors are. Sam uses the application to verify product availability in the color requested.
- Bill is an employee in our company and is helping a customer understand if a product and/or accessory is available for purchase from the company web site. Bill’s customer was not able to find exactly what he was looking for when searching on the company web site and has asked Bill to assist his search.
- Bill goes to the ProductInventory application and is able to see that the product in question was recently removed from the store. Bill pulls up the specifications for the discontinued product and points his customer to a similar product that is available.
- Bill emails the product information to his customer directly from the app/web page which includes a link to the product on the eCommerce site.
Expectations:
- You must create traditional wireframe call-outs and notes for web page and apps
- Provide us with your interaction and click-path thoughts and suggestions
- Produce HTML click-through wireframes that can be used to demonstrate all mentioned functionalities.
- The application must be very easy to use and intuitive with limited number of screens and clear navigation points. Keep that in mind when you create your solution for the layout and flow information. The fewer screens the better.
- You MUST cover all requirements mentioned in challenge details below.
- Use note panel in every single page you design to explain what items are addressed in that page from the documentation, what things you added/changed/removed, use it to make your idea clearer and help the client to give you constructive feedback.
Tips for Success:
Research the UI of different sites that help users sift through a huge number of products: Amazon, Overstock.com, Google Shopping, zillow.com.
- How can users filter their searches to find exactly the product(s) they need?
- How can users keep track of those search results so that they are alerted to changes?
- How can visually display when there is an issue with a product?
- The provided example sites are public facing; keep in mind that this is an internal tool.
Required Templates
0. Navigation:
“As a quality department employee, I need the ability to access the major functional components of the application from an easy to use menu so that I can quickly and easily navigate the site"
Important Note: These navigation items are suggestions - the navigation structure is open and can be adjusted based on your thought process around this application.
Main Product Categories
--Printers
--Laptops
--Desktops
--Printers
search
saved searches
saved products/items
alerts
profile
messages
1. Dashboard:
“I need the ability to see an overview of my ‘Saved searches’ within the dashboard. I can quickly see important information and updates to products that I have previously searched for.”
Once a user has saved a search, the results of these saved searches will populate the dashboard. This could mean displaying multiple searches at once, or a single search at once but users must have the ability to toggle between saved search results easily. Users will be presented with high-level data on alerts related to changes to the contents of their saved search.
Presentation of saved search results:
--Product list from saved search
--Recent alerts/changes to the contents of your saved search (availability: available now: out of stock, coming soon, empty soon, etc.)
--List of specific settings from this search
--Search through search results data to further analyze results:
------Sort by rating/review
���------Sort by date added
���------Sort by availability: available now, out of stock, coming soon, empty soon, etc.
���------Sort by quality: color, size, etc.
--Export CSV of data. Native OS export options.
2. Search:
“I need the ability to quickly and easily begin finding products within a huge set of data. I need to export this data to other applications. I need to be alerted to changes within the sets of data/products that I am responsible for.”
Think of large product sites. Amazon.com, Overstock.com, google.com/shopping.
Users will filter be filtering through a huge set of data. We’d like ideas on the best way for users to filter and find what they need based on the criteria below.
--Return results
--Filter by High level product categories:
------Printers
------Tablets
------Laptops
------Desktops
--Filter based on qualitative categories:
------Filter by domain/site
------Filter by brand
------Filter by product category
------Filter by rating
------Filter by availability: available now: out of stock, coming soon, empty soon, etc.
--Micro-filtering. There are a huge amount of possible data points that a user could search by. We want you to help figure out how to categorize these many data fields into a coherent structure that will allow people to find the products they’re looking for. [See "Product Inventory Attributes.xlsx"]
--Save Search Settings by name
--Reset/cancel search
--Export CSV of data. Native OS export options.
3. Alerts/ Notifications:
“I need to stay up to date on the products that I’m responsible for without having to repeatedly search for that information.”
This is a standalone page that will update users on changes to the products in their saved searches.
Reasons a product/search would receive an alert:
--Product running low
--Product out of stock
--New product coming soon
--New product available
--New version of product
4. Login:
A simple user login page. Users will enter their username and password to login to the app.
--A user will be able to enter username, password have a Login button.
--Forgot Password link.
5. Product detail:
This is the detailed view of a specific product. Users will navigate to these pages to have the most detailed view of the specs of a certain product. Users can favorite/like specific products so they can keep track of changes.
--Favorite/Watch for updates
--Contact product stakeholder to request re-order, etc
--Edit product information
--See product details
------For a full list of possible product details [See "Product Inventory Attributes.xlsx"]
--Browse to similar products
6. Profile:
A simple member profile page so that members can find and contact other users within the app.
--Name
--Location
--Job title
--contact information
--email directly from app
--Team information
7. Messages:
Users can send each other messages within the app
--Inbox
--New message
Target Audience:
-- Quality Managers: Access lists to audit advertised products, specifications and features against internal product list
-- Employees: Project managers and support engineers who are in need of specific product/platform information or who want to become familiar with a brand’s entire portfolio.
Judging Criteria:
-- Ease of filtering to allow users to find specific products
--- Ability to access saved searches and be altered to changes.
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.