Challenge Summary
Welcome to Healthcare Mobile Hybrid Inventory App Visual Screen Design Challenge
An Healthcare company has two different interfaces for Android and iOS app currently. They have ensured the feature set consistency. The challenge is planned to create unified experience before the hybrid app is developed in subsequent challenges
We are providing existing Android and iOS screens that are illustrative of the concepts we want to see, but we do not want to constrain the ideas to the provided sketches. The sketches can work as wireframe on what data need to be included, DO NOT copy paste the sketch as is.
Read more details information on challenge specification. Let’s discuss any questions you have!
1). Login
2). Receiving
3). Inventory
Note: Feel free to submit more screens for early feedback
1). Login
2). Receiving
3). Inventory
4). Orders
5). Audit Counts
6). Product Details
Design Page Requirements
Note: Refer to Existing Design for for current state of the existing screens.
General
- For this challenge, we need you redesign existing different interfaces for Android and iOS app into single consistent look and feel for the new Hybrid mobile application
- Optimize the usage native components and controls from each platform
- Need bring consistent user experience between both platforms
- You need use this logo and application title on page
- Important: Right now everything in page using list formats, so we need another innovative way to design them. Feel free to explore the solution using chart, collapse/expand, or anything that will improve the User Experience.
- These are some pages required on your design submission
1). Login
Screen Reference (iOS & Android): pdf pg.3
- This login page shows up when user open the application for the first time
- Display Healthcare logo on Login page
- There are 2 main inputs for Login: Username & Password
- Need display the Remember checkboxes also Forgot Password link
- No need bottom bar before user logged in
- How to make the application support Work Offline and Work Online?
1). a). Login validation
Create screen flow to shows up how the error validation working for incorrect userame or password
1).b). Forgot Password
Create screen to help user that forgot the password
Display textbox input to let user entered the email address
2). Receiving
Screen Reference (iOS): pdf pg.4
Screen Reference (Android): pdf pg.5
- User landed on this page after user logged in
- Need display quick way to use the Barcode scanner
- Think how the page layout should build
- How navigation works?
- You need create a way to access the sub-pages for “Not Received”, “Received” & “Partial”
- Need quick way to create new receiving in page
2). a). Not Received
- This screen to display shipment that not received
- Match content like design reference
2). b). Partial
- This screen to display shipment that partially received
- Match content like design reference
2). c). Case Detail
- User can drill down to see this Case detail
- Think better way to navigate back to previous screen
3). Inventories
Screen Reference (iOS): pdf pg.6
Screen Reference (Android): pdf pg.7
- This is Inventories screen, there are 2 options to access Online and Offline inventories
- Need quick way to create new inventory in page
- Need display help button for this page
3). a). Offline Inventory
- On this Offline inventory, user will see action bar of top to “Create New Offline Inventory”, “Edit Inventory” & “Share”
- Create list of Offline Inventory items
3). b). Inventory Detail
- User can drill down to see this Inventory detail
- On the header bar there are options for “Camera Scan”, “Manual Entry Item”, “Edit”, “Share” and “Upload”
- Create list of Inventory Accounts
4). Orders
Screen Reference (iOS): pdf pg.8
Screen Reference (Android): pdf pg.9
- This is Order screens
- You need grouping content by Previously Uploaded and Offline Orders
- Need quick way to create new order in page
- Need display quick upload orders
4). a). Order Detail
- User can drill down to see this Order detail
- On the header bar there are options for “Camera Scan”, “Manual Entry Item”, “Edit”, “Share” and “Upload”
- Create list of Inventory Accounts
- Need display help button for this page
5). Audit Counts
Screen Reference (iOS & Android): pdf pg.10
- This Audit Counts will display list of all audits
- Need able to search the Audit Counts
- How to change the selected Account?
- On each rows, user need able to change the Count number
- User need able to Submit the updated Audit
6). Product Details
Screen Reference (iOS & Android): pdf pg.11
- User landed on this Product page from Receiving > Account > Items
- Need able to change the Quantity
- Create better design to display the Product information
Design Submission Formats:
a). Screen Sizes:
- Mobile Screen Size: 750px(w) × 1334px(h)
b). Design theme, colors, typography.
- Design Theme: Clean, Professional and Business-like design.
- Color palette: #ee0000 (red), #808080 (grey)
- Fonts style: Sans Serif (Clean, Modern, and Informal)
- Icon style: Thin Line (Modern)
c). Submission Design Presentation
- As part of your submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- If you need an MarvelApp Project, send email OR via challenge forum to this following email address: lunarkid@copilots.topcoder.com
- Important! Make sure to include a URL/Link to your MarvelApp within your submission notes
Target User
- Pharmacists and Pharmacy Managers who deal with the day to day operations of a pharmacy.
Judging Criteria
- How well you create Healthcare Hybrid Inventory App Visual Screen Design for Hybrid application
- Cleanliness of your graphics and design.
- User Experience.
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 image files based on Challenge submission requirements stated above.
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop/Illustrator/Sketch and saved as editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
An Healthcare company has two different interfaces for Android and iOS app currently. They have ensured the feature set consistency. The challenge is planned to create unified experience before the hybrid app is developed in subsequent challenges
We are providing existing Android and iOS screens that are illustrative of the concepts we want to see, but we do not want to constrain the ideas to the provided sketches. The sketches can work as wireframe on what data need to be included, DO NOT copy paste the sketch as is.
Read more details information on challenge specification. Let’s discuss any questions you have!
Round 1
Initial Healthcare Mobile Hybrid Inventory App Visual Screen Design for these following pages on Mobile screen size1). Login
2). Receiving
3). Inventory
Note: Feel free to submit more screens for early feedback
Round 2
Final Healthcare Mobile Hybrid Inventory App Visual Screen Design for these following pages on Mobile screen size combined with Checkpoint Feedback1). Login
2). Receiving
3). Inventory
4). Orders
5). Audit Counts
6). Product Details
Design Page Requirements
Note: Refer to Existing Design for for current state of the existing screens.
General
- For this challenge, we need you redesign existing different interfaces for Android and iOS app into single consistent look and feel for the new Hybrid mobile application
- Optimize the usage native components and controls from each platform
- Need bring consistent user experience between both platforms
- You need use this logo and application title on page
- Important: Right now everything in page using list formats, so we need another innovative way to design them. Feel free to explore the solution using chart, collapse/expand, or anything that will improve the User Experience.
- These are some pages required on your design submission
1). Login
Screen Reference (iOS & Android): pdf pg.3
- This login page shows up when user open the application for the first time
- Display Healthcare logo on Login page
- There are 2 main inputs for Login: Username & Password
- Need display the Remember checkboxes also Forgot Password link
- No need bottom bar before user logged in
- How to make the application support Work Offline and Work Online?
1). a). Login validation
Create screen flow to shows up how the error validation working for incorrect userame or password
1).b). Forgot Password
Create screen to help user that forgot the password
Display textbox input to let user entered the email address
2). Receiving
Screen Reference (iOS): pdf pg.4
Screen Reference (Android): pdf pg.5
- User landed on this page after user logged in
- Need display quick way to use the Barcode scanner
- Think how the page layout should build
- How navigation works?
- You need create a way to access the sub-pages for “Not Received”, “Received” & “Partial”
- Need quick way to create new receiving in page
2). a). Not Received
- This screen to display shipment that not received
- Match content like design reference
2). b). Partial
- This screen to display shipment that partially received
- Match content like design reference
2). c). Case Detail
- User can drill down to see this Case detail
- Think better way to navigate back to previous screen
3). Inventories
Screen Reference (iOS): pdf pg.6
Screen Reference (Android): pdf pg.7
- This is Inventories screen, there are 2 options to access Online and Offline inventories
- Need quick way to create new inventory in page
- Need display help button for this page
3). a). Offline Inventory
- On this Offline inventory, user will see action bar of top to “Create New Offline Inventory”, “Edit Inventory” & “Share”
- Create list of Offline Inventory items
3). b). Inventory Detail
- User can drill down to see this Inventory detail
- On the header bar there are options for “Camera Scan”, “Manual Entry Item”, “Edit”, “Share” and “Upload”
- Create list of Inventory Accounts
4). Orders
Screen Reference (iOS): pdf pg.8
Screen Reference (Android): pdf pg.9
- This is Order screens
- You need grouping content by Previously Uploaded and Offline Orders
- Need quick way to create new order in page
- Need display quick upload orders
4). a). Order Detail
- User can drill down to see this Order detail
- On the header bar there are options for “Camera Scan”, “Manual Entry Item”, “Edit”, “Share” and “Upload”
- Create list of Inventory Accounts
- Need display help button for this page
5). Audit Counts
Screen Reference (iOS & Android): pdf pg.10
- This Audit Counts will display list of all audits
- Need able to search the Audit Counts
- How to change the selected Account?
- On each rows, user need able to change the Count number
- User need able to Submit the updated Audit
6). Product Details
Screen Reference (iOS & Android): pdf pg.11
- User landed on this Product page from Receiving > Account > Items
- Need able to change the Quantity
- Create better design to display the Product information
Design Submission Formats:
a). Screen Sizes:
- Mobile Screen Size: 750px(w) × 1334px(h)
b). Design theme, colors, typography.
- Design Theme: Clean, Professional and Business-like design.
- Color palette: #ee0000 (red), #808080 (grey)
- Fonts style: Sans Serif (Clean, Modern, and Informal)
- Icon style: Thin Line (Modern)
c). Submission Design Presentation
- As part of your submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- If you need an MarvelApp Project, send email OR via challenge forum to this following email address: lunarkid@copilots.topcoder.com
- Important! Make sure to include a URL/Link to your MarvelApp within your submission notes
Target User
- Pharmacists and Pharmacy Managers who deal with the day to day operations of a pharmacy.
Judging Criteria
- How well you create Healthcare Hybrid Inventory App Visual Screen Design for Hybrid application
- Cleanliness of your graphics and design.
- User Experience.
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 image files based on Challenge submission requirements stated above.
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop/Illustrator/Sketch and saved as editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.