Challenge Summary
How To Compete In This Challenge
Competing in Topcoder design challenges is easy.
• First, register for the challenge by selecting the “Register” button in the top right.
• Second, review this challenge spec which provides details on what you’ll need to design.
• Third, please review this step-by-step guide on competing.
Welcome to the Astrix Inventory Manager Web App Design Challenge!
In this challenge we need your creative skills to help us create a modern and intuitive user interface for our web application, which will be used by inventory managers in pharmaceutical industry, to find the drugs that are missing in their stock and order them. This application will be used internally.
1. Landing Page
2. Inventory Search
3. Suggested Order
4. Inventory Settings – Item Settings
1. Landing Page
2. Inventory Search
3. Suggested Order
4. Inventory Performance Report
5. Excess Inventory Report
6. Adjustments
7. Inventory Settings – Item Settings
8. Inventory Settings – History
Design Problem
The purpose of this project is to design a responsive web application that will be used by pharmacists to determine how many products (drugs) they have on the shelf, how many they actually need in the pharmacy and what he needs to do to reorder on a daily basis.
User Story
Please make sure your design incorporates this user story.
As a pharmacist, Kim, logs in the application and searches for “ibuprofen” drug on Inventory Search page. The system will return her a list with the results of all items matching the generic drug name and she can check their status, cost, manufacturer etc.
Kim then wants to see which items from the entire inventory should be ordered, so she goes to Suggest Order page. Here she can see all items that the on hand quantity have fallen below the Min reorder point as the system keeps track of it and suggests her what she needs to order on a daily basis.
If she wants to override the system’s value for Min value she will go to Settings page. Here she can also update other info like the system Preferred Item, Min/Max values or Hold Dates.
This application allows the user to see various reports on the Inventory Performance as well as on the Excess Inventory. When there are expired drugs or there’s been a transferred in, Kim is able to manually reduce the amount of inventory without making a sale (adjustment).
Required Pages
In this challenge we are asking you to redesign a couple of pages for our web application taking as reference the provided pages. We are not looking just for a facelift of the application in a clean style, but also for an overall improved user experience. Also note, we are not redesigning the entire web page, these will be inline frames inserted in the actual client’s site so colors used in the design should be able to look good in the surrounding website (check 01 Landing Page.jpg to see that).
Because there are a couple of industry specific terms you can find their explanation below.
Glossary:
Inventory Group = Equivalent drugs grouped together. Inventory is maintained at the group level (Min/Max, etc.) so we do not purchase the same drug from different manufacturers.
On-hand = shows the quantity that the pharmacy has for a drug in inventory at the store
Group on Hand = Sum of the on hand for the entire group.
Stock = shows if the supplier has the item available to order
Reorder point = is the level of inventory which triggers an action to replenish that particular inventory item. MIN and MAX are used to show reorder points in this system.
Generic name drug = chemical name of a drug (e.g. “paracetamol”)
Trade name = name given to a drug by the company that makes it (e.g. “Panadol” – trade name given to paracetamol)
Inventory adjustment = change the on-hand quantity without making a sale
NDC = National Drug Code is a unique identified for drug
CIN = drug identifier made of 7 digits for the supplier
Hold Date = is a date that the user can set into the future that will prevent an item from appearing on the Suggested Order page until the date entered, even if the Group on Hand falls below the MIN.
C2 = Controlled Substances. A controlled substance is generally a drug or chemical whose manufacture, possession, or use is regulated by a government.
Non-C2 = Non-Controlled Substances
If there are other terms you’re not clear, please ask in the forums.
1. Landing Page
Follow 01 Landing Page.jpg for content reference.
For this page, you need to design only the dashboard portion that is inside the Inventory manager box. Don’t focus on the other elements.
- During a usability test, customers had an issue differentiating between the Inventory manager application dashboard and the rest of surrounding website.
- This dashboard also provides metrics of the Pharmacy's performance.
- This screen should also provide benchmark data on how the pharmacy is performing based on metrics from the Inventory Performance Report (04 Inventory Performance Report.jpg)
- This screen should also provide actionable alerts (Call to Action) the user may take to maintain their inventory
- This screen should also allow the user to navigate the user to commonly used features of the application. (Suggested Order, Reports, Audits, etc.)
- The screen should be well defined to allow the user to know that all inventory management functions will be accessed within the dashboard and is an independent application from the surrounding webpage.
2. Inventory Search
Follow 02 Inventory Search.jpg for content reference.
When the user lands on this page she is able to search for a particular drug name and the results will be displayed in a list below it. Inventory Search can also be performed from the landing page, which will result in navigating to this screen. Items can be manually added to the shopping cart from Search Results.
Each item from the list will include next fields: Qty, Stock, NDC/ UPC, Settings, On-Hand, CIN, Trade name, Strength, Form, Pkg. Quantity, Net Cost , Contract, Stock #, Inventory Value, Supplier, Min, Max, Rank and Notes.
You will notice in the mockup that multiple lines are shaded, that means that those entries belong to same Inventory Group. The system groups similar drugs together in order to determine which one is the best CIN/SKU to order from your supplier. The best example of this is that for a generic drug, there are multiple manufacturers.
As a pharmacist, Kim doesn’t want to carry the same drug from multiple manufacturers, so she groups them together into an “Inventory Group”. On the Inventory Settings page, she is selecting her “Preferred Item” of that group, so when the number of items for that group on store (Group on Hand) is below Min, the system will suggest to order only that “Preferred Item”. The bolded text items in the table are the Preferred Items from their groups.
3. Suggested Order
Follow 03 Suggested Order.jpg for content reference.
When an Inventory Group on Hand (sum of all quantities on store for a particular item from different manufacturers) falls below the MIN reorder point, the preferred item of that group will appear on Suggested Order page, telling the Kim that they need to order stock for that particular group.
If a particular drug is set in Auto Replenish on Settings page, then at a predefined time, the items in Suggested Order will be ordered.
When the Stock column is showing an item as not available(red), then the user can press on the gear icon and will see the Inventory Settings popup where he can change his Preferred Item.
Each item from this list will include next fields: option to select, User Qty., Rcmd. Qty,, Stick, NDS, Settings, Group on Hand, Committed Inventory, Inventory Location, CIN, Trade name, Strength, Form, Okg Qty, Rank, Min, Max, Contract, Cost, Total Cost, Supplier, Notes.
The buttons at the top “Non-C2 Suggested Order” and “C2 Suggested Order” act as tabs for filtering the table results between Controlled Substances (C2) and Non-Controlled Substances (Non-C2). “View Homes Included (0)” can be ignored.
4. Inventory Performance Report
Follow 04 Inventory Performance Report.jpg for content reference.
This page is showing us how us how the inventory performed over a period of time: weekly trend, monthly trend, quarterly trend. Currently there is no visualization of these trends, however the client is open to this. This report should highlight users to any trends in the data (Also highlighted on the Dashboard Metrics/Actionable Alerts (01 Landing Page.jpg)).
5. Excess Inventory Report
Follow 05 Excess Inventory Report.jpg for content reference.
The user comes to this page when he wants to see on which drugs he has more quantity that can be used for a number of days.
- This screen shows the user what items are currently in the inventory and are deemed to be in excess based on the system calculations.
- Users can add items to a return form from this screen.
- This screen will also give them the ability to manage those items, currently done through the Inventory Settings Gears Icon (09 Inventory Settings Override Preferred Item.jpg, 10 Inventory Settings Auto Replenish.jpg)
6. Adjustments
Follow 06 Adjustments.jpg for content reference.
When there are expired products/drugs or there’s been a transfer in, etc., the manager is able to manually change the amount of inventory without making a sale by doing an adjustment.
- This screen allows the user to make adjustments to their inventory items on hand quantity
- Currently, the user must know the UPC/NDC/CIN number in order to make the adjustment (open to suggestions on how to more readily identify items on this screen)
7. Inventory Settings – Item Settings
Follow 07 Inventory Settings - Item Settings.jpg for content reference.
This screen is accessed throughout the system and most of the system logic and user controls are represented here.
This screen currently holds the History for the inventory group
On this screen the user can see how a drug is scheduled to be ordered and update those settings. He can override system settings such as Preferred Item and Min/Max values.
The user has the option of changing the System Preferred Item by unchecking the “Use Preferred Ordering Item” and then selecting the radio button for which item they want to override to the preferred item. If they change this setting, then the new item will be on the Suggested Order instead of the System preferred ordering item.
The user can also indicate that this group should not order automatically (Auto Replenish) unless it is manually approved (“Approval Required”) or they can turn a group off from ordering all together (“Not Active”). An item can’t be ordered before the Hold Date Start and after the Hold Date End and the user has the option to pick the inventory location to order from.
This screen also allows them to adjust the on hand value of individual items within the inventory group
The “Show Group Alternatives” functionality is out of scope of this challenge.
8. Inventory Settings – History
Follow 08 Inventory Settings - History.jpg for content reference.
The user is checking this tab when he wants to see how one drug performed over time (check how many dispenses, invoices, returns, transactions etc. were done).
Other views of this screen provide detail per transaction type of the summary (Optional Scope).
Branding
You can find the client’s branding colors in the attached archive.
As these designs will be inline application inserted in the actual client’s site, the colors used in the design should be able to look good in the surrounding website (check 01 Landing Page.jpg to see that).
Stock Artwork & Icons
- Stock photo and icons are allowed for this challenge. Please remember to declare them so you don’t fail screening.
Target Devices
Responsive desktop application
- Desktop: 1366px width and height as much as needed
Marvel Prototype
- Request a Marvel Prototype on forums.
- Provide clickable spots (hot zones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
- Pharmacists
- Pharmacy owners
- Pharmacy technicians
Judging Criteria
- How easy is to determine/see which products need to be re-ordered
- How good is the user experience
- Does the design follow the branding guidelines?
- Hierarchy and organization of content
- Cleanliness of your graphics and design.
Submission Deliverables
Preview Image
Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place your submissions within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
All requested Contest Deliverables in JPG or PNG file format in RGB color mode at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, XD or Sketch. Layers should be named and well organized.
Competing in Topcoder design challenges is easy.
• First, register for the challenge by selecting the “Register” button in the top right.
• Second, review this challenge spec which provides details on what you’ll need to design.
• Third, please review this step-by-step guide on competing.
Welcome to the Astrix Inventory Manager Web App Design Challenge!
In this challenge we need your creative skills to help us create a modern and intuitive user interface for our web application, which will be used by inventory managers in pharmaceutical industry, to find the drugs that are missing in their stock and order them. This application will be used internally.
Round 1
Submit your initial design for a Checkpoint Feedback1. Landing Page
2. Inventory Search
3. Suggested Order
4. Inventory Settings – Item Settings
Round 2
Submit your Final Design plus Checkpoint Updates1. Landing Page
2. Inventory Search
3. Suggested Order
4. Inventory Performance Report
5. Excess Inventory Report
6. Adjustments
7. Inventory Settings – Item Settings
8. Inventory Settings – History
Design Problem
The purpose of this project is to design a responsive web application that will be used by pharmacists to determine how many products (drugs) they have on the shelf, how many they actually need in the pharmacy and what he needs to do to reorder on a daily basis.
User Story
Please make sure your design incorporates this user story.
As a pharmacist, Kim, logs in the application and searches for “ibuprofen” drug on Inventory Search page. The system will return her a list with the results of all items matching the generic drug name and she can check their status, cost, manufacturer etc.
Kim then wants to see which items from the entire inventory should be ordered, so she goes to Suggest Order page. Here she can see all items that the on hand quantity have fallen below the Min reorder point as the system keeps track of it and suggests her what she needs to order on a daily basis.
If she wants to override the system’s value for Min value she will go to Settings page. Here she can also update other info like the system Preferred Item, Min/Max values or Hold Dates.
This application allows the user to see various reports on the Inventory Performance as well as on the Excess Inventory. When there are expired drugs or there’s been a transferred in, Kim is able to manually reduce the amount of inventory without making a sale (adjustment).
Required Pages
In this challenge we are asking you to redesign a couple of pages for our web application taking as reference the provided pages. We are not looking just for a facelift of the application in a clean style, but also for an overall improved user experience. Also note, we are not redesigning the entire web page, these will be inline frames inserted in the actual client’s site so colors used in the design should be able to look good in the surrounding website (check 01 Landing Page.jpg to see that).
Because there are a couple of industry specific terms you can find their explanation below.
Glossary:
Inventory Group = Equivalent drugs grouped together. Inventory is maintained at the group level (Min/Max, etc.) so we do not purchase the same drug from different manufacturers.
On-hand = shows the quantity that the pharmacy has for a drug in inventory at the store
Group on Hand = Sum of the on hand for the entire group.
Stock = shows if the supplier has the item available to order
Reorder point = is the level of inventory which triggers an action to replenish that particular inventory item. MIN and MAX are used to show reorder points in this system.
Generic name drug = chemical name of a drug (e.g. “paracetamol”)
Trade name = name given to a drug by the company that makes it (e.g. “Panadol” – trade name given to paracetamol)
Inventory adjustment = change the on-hand quantity without making a sale
NDC = National Drug Code is a unique identified for drug
CIN = drug identifier made of 7 digits for the supplier
Hold Date = is a date that the user can set into the future that will prevent an item from appearing on the Suggested Order page until the date entered, even if the Group on Hand falls below the MIN.
C2 = Controlled Substances. A controlled substance is generally a drug or chemical whose manufacture, possession, or use is regulated by a government.
Non-C2 = Non-Controlled Substances
If there are other terms you’re not clear, please ask in the forums.
1. Landing Page
Follow 01 Landing Page.jpg for content reference.
For this page, you need to design only the dashboard portion that is inside the Inventory manager box. Don’t focus on the other elements.
- During a usability test, customers had an issue differentiating between the Inventory manager application dashboard and the rest of surrounding website.
- This dashboard also provides metrics of the Pharmacy's performance.
- This screen should also provide benchmark data on how the pharmacy is performing based on metrics from the Inventory Performance Report (04 Inventory Performance Report.jpg)
- This screen should also provide actionable alerts (Call to Action) the user may take to maintain their inventory
- This screen should also allow the user to navigate the user to commonly used features of the application. (Suggested Order, Reports, Audits, etc.)
- The screen should be well defined to allow the user to know that all inventory management functions will be accessed within the dashboard and is an independent application from the surrounding webpage.
2. Inventory Search
Follow 02 Inventory Search.jpg for content reference.
When the user lands on this page she is able to search for a particular drug name and the results will be displayed in a list below it. Inventory Search can also be performed from the landing page, which will result in navigating to this screen. Items can be manually added to the shopping cart from Search Results.
Each item from the list will include next fields: Qty, Stock, NDC/ UPC, Settings, On-Hand, CIN, Trade name, Strength, Form, Pkg. Quantity, Net Cost , Contract, Stock #, Inventory Value, Supplier, Min, Max, Rank and Notes.
You will notice in the mockup that multiple lines are shaded, that means that those entries belong to same Inventory Group. The system groups similar drugs together in order to determine which one is the best CIN/SKU to order from your supplier. The best example of this is that for a generic drug, there are multiple manufacturers.
As a pharmacist, Kim doesn’t want to carry the same drug from multiple manufacturers, so she groups them together into an “Inventory Group”. On the Inventory Settings page, she is selecting her “Preferred Item” of that group, so when the number of items for that group on store (Group on Hand) is below Min, the system will suggest to order only that “Preferred Item”. The bolded text items in the table are the Preferred Items from their groups.
3. Suggested Order
Follow 03 Suggested Order.jpg for content reference.
When an Inventory Group on Hand (sum of all quantities on store for a particular item from different manufacturers) falls below the MIN reorder point, the preferred item of that group will appear on Suggested Order page, telling the Kim that they need to order stock for that particular group.
If a particular drug is set in Auto Replenish on Settings page, then at a predefined time, the items in Suggested Order will be ordered.
When the Stock column is showing an item as not available(red), then the user can press on the gear icon and will see the Inventory Settings popup where he can change his Preferred Item.
Each item from this list will include next fields: option to select, User Qty., Rcmd. Qty,, Stick, NDS, Settings, Group on Hand, Committed Inventory, Inventory Location, CIN, Trade name, Strength, Form, Okg Qty, Rank, Min, Max, Contract, Cost, Total Cost, Supplier, Notes.
The buttons at the top “Non-C2 Suggested Order” and “C2 Suggested Order” act as tabs for filtering the table results between Controlled Substances (C2) and Non-Controlled Substances (Non-C2). “View Homes Included (0)” can be ignored.
4. Inventory Performance Report
Follow 04 Inventory Performance Report.jpg for content reference.
This page is showing us how us how the inventory performed over a period of time: weekly trend, monthly trend, quarterly trend. Currently there is no visualization of these trends, however the client is open to this. This report should highlight users to any trends in the data (Also highlighted on the Dashboard Metrics/Actionable Alerts (01 Landing Page.jpg)).
5. Excess Inventory Report
Follow 05 Excess Inventory Report.jpg for content reference.
The user comes to this page when he wants to see on which drugs he has more quantity that can be used for a number of days.
- This screen shows the user what items are currently in the inventory and are deemed to be in excess based on the system calculations.
- Users can add items to a return form from this screen.
- This screen will also give them the ability to manage those items, currently done through the Inventory Settings Gears Icon (09 Inventory Settings Override Preferred Item.jpg, 10 Inventory Settings Auto Replenish.jpg)
6. Adjustments
Follow 06 Adjustments.jpg for content reference.
When there are expired products/drugs or there’s been a transfer in, etc., the manager is able to manually change the amount of inventory without making a sale by doing an adjustment.
- This screen allows the user to make adjustments to their inventory items on hand quantity
- Currently, the user must know the UPC/NDC/CIN number in order to make the adjustment (open to suggestions on how to more readily identify items on this screen)
7. Inventory Settings – Item Settings
Follow 07 Inventory Settings - Item Settings.jpg for content reference.
This screen is accessed throughout the system and most of the system logic and user controls are represented here.
This screen currently holds the History for the inventory group
On this screen the user can see how a drug is scheduled to be ordered and update those settings. He can override system settings such as Preferred Item and Min/Max values.
The user has the option of changing the System Preferred Item by unchecking the “Use Preferred Ordering Item” and then selecting the radio button for which item they want to override to the preferred item. If they change this setting, then the new item will be on the Suggested Order instead of the System preferred ordering item.
The user can also indicate that this group should not order automatically (Auto Replenish) unless it is manually approved (“Approval Required”) or they can turn a group off from ordering all together (“Not Active”). An item can’t be ordered before the Hold Date Start and after the Hold Date End and the user has the option to pick the inventory location to order from.
This screen also allows them to adjust the on hand value of individual items within the inventory group
The “Show Group Alternatives” functionality is out of scope of this challenge.
8. Inventory Settings – History
Follow 08 Inventory Settings - History.jpg for content reference.
The user is checking this tab when he wants to see how one drug performed over time (check how many dispenses, invoices, returns, transactions etc. were done).
Other views of this screen provide detail per transaction type of the summary (Optional Scope).
Branding
You can find the client’s branding colors in the attached archive.
As these designs will be inline application inserted in the actual client’s site, the colors used in the design should be able to look good in the surrounding website (check 01 Landing Page.jpg to see that).
Stock Artwork & Icons
- Stock photo and icons are allowed for this challenge. Please remember to declare them so you don’t fail screening.
Target Devices
Responsive desktop application
- Desktop: 1366px width and height as much as needed
Marvel Prototype
- Request a Marvel Prototype on forums.
- Provide clickable spots (hot zones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
- Pharmacists
- Pharmacy owners
- Pharmacy technicians
Judging Criteria
- How easy is to determine/see which products need to be re-ordered
- How good is the user experience
- Does the design follow the branding guidelines?
- Hierarchy and organization of content
- Cleanliness of your graphics and design.
Submission Deliverables
Preview Image
Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place your submissions within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
All requested Contest Deliverables in JPG or PNG file format in RGB color mode at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, XD or Sketch. Layers should be named and well organized.
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.