Challenge Summary
Welcome to Medical Technology - Customer Service Portal Concepts Design Challenge
For this challenge we need to execute a design challenge in Topcoder for the Medical Technology customer portal for Desktop, Tablet, Mobile screen sizes.
Read more details information on challenge specification. Let’s discuss any questions you have!
2). Customer Dashboard
3). Service Center
Notes:
- Create separated screens to explains the page flow or interactions in page.
- Feel free to submit more screens for early feedback
1). Login Screen
2). Customer Dashboard
3). Service Center
4). Order Tracking
Notes:
- Create separated screens to explains the page flow or interactions in page.
- Feel free to submit more screens for early feedback
Challenge Details
In this challenge we are looking for your help to create User interface design to help create a modern and intuitive web application that helps to create a Customer Service web portal, which will be the one-stop portal for:
- Client’s internal stakeholders – Marketing, Resource fulfilment, Sales
- Client’s enabling support teams (Service desk)
- HCPs ( Doctors)
- Customers ( Patients)
- Partners ( Distributors)
User Flow:
- User logs into registration page
- On registration enters a home page / dashboard
- Selection of Service inquiry tab
- User will click on New button in Service Tickets list page
- User will be redirected to the screen
- After creating the ticket by entering details in a template and hitting submit, ticket will be created
- User will be redirected to tickets list page with the newly added ticket visible at top
- User can track the Order tracking in page
Submission Requirements
Note: Refer to this Screenshot Folder for flow and page informations
1). Login Screen
- This should be simple Login page, display username and password fields
- Need error validation form
- Create Login button to submit the form
2). Customer Dashboard
Screenshot: Slide 8_Customer Portal.jpg
- These are elements that need displayed on Customer Portal screens:
Here are the general elements across the page after user logged in.
a). Main Navigation
Screenshot: Slide 13_Profile Drop Down.jpg
- Create some icon that represent the page.
- Think about how the main navigation displayed in page for these menu:
Accounts
Create sub navigation for the Accounts for these following menu:
- My Orders
- Account Status
- Sample Account
- Order Tracking (Add this new menu, click this button should take to specific page)
Order
Products
Support
Community
b). Application Switcher
- Show application switcher that will be able change to different application. This is placed on the top left of header bar on current application.
Quick Action Section
For dashboard page, we would like to display 3-5 items needing immediate attention by the user, for example:
- To show on the main screen,
- This is like items to approve,
- Pending service ticket status, etc
- Anything else?
Customer Dashboard will display tab based grouping (My Applications, My Notifications, My Install)
My Applications Tab
- On each box under My Applications tab, there are some buttons need displayed.
- My Application sections are:
-- Knowledge Portal
-- University
-- Content Library
-- Equipment Confirmation
-- Community
-- Create New Ticket
My Notifications Tab
Screenshots: 0_MyNotifications.png
- Create Overdue, Remaining Updated and Completed messages on top with progress graphic
- My notification will display a list of notification
- There are completed and incomplete task for the notification
- Notice there also Important badge for notification that need immediate action.
- View details will take to sepcific page.
- Display Pagination in page
- Display News & Events in page
My Install Tab
- Out of challenge scope
News & Events
- Create some content placeholder how the News & Events should look in page
- View all link must placed in this area to see all News & Events
In the News
- This area need represent in your design to display recent trending news, events & content
- Create some content placeholder how the In the News should look in page
Footer
- Footer links and copyright need displayed in page
3). Service Center
Screenshot: Slide 11_Customer Support Service.jpg
- This need to be single page with some required features:
Subcategories Request
- This section placed on the left side
- This Sub-Categories request will be working as filterable content
- You can display some grouping like:
-- Brand,
-- Status,
-- Serial Number,
-- RMA Number,
-- PO Number,
-- Request ID,
-- Shipping Address and
-- Date
- For sub-categories menu, please follow screenshot content
Tickets Details
- Need able to select the tickets and see the details
- There are 3 tabs need displayed like on screenshots for Notes, Devices and Details
- Should be able to Add new item based on each tabs
- Follow screenshot content for now
Track Status of the Request
- Need able to easily determine the Status Request
- Some available options are: Product Received, Waiting for Customer, and Complete
Assigning a Service Ticket
- Think about how to assigning another user a service ticket on this page?
- How the flow works?
Create a New Service Request
- User access this New Serrvice Request from the New button on the top right
- Think about how this Create a Service Request working in this single page
Required Forms are:
- Ticket #ID
- Ticket Description
- Add Devices
-- Serial#
-- RMA #
-- Product Family
- Notes
- Ticket Status
- Date and Time
4). Order Tracking
- User landed to this page from "Order Tracking" menu on the profile menu
- You need display some of these elements in page
Order Search
3_Order History_Serach.png
- This tool will help user find the Order based on some required filters
Order Search Result
Screenshot: 4_Order History_List View.png
- For this challenge you just need display the Header List view with one expanded row
My Orders
Screenshot: 2_Order History.png
- There will be list of all orders in page including their progress status
- Create buttons to do Track Order, View Details and View Invoice
Individual Order Details
- Need display the Order progress bar
- How the Order Tracking details should designed put content for now.
Design Submission Formats:
a). Screen Sizes:
This is going to be developed as a responsive application on these following screen sizes
- Desktop (Standard): 1280px(w) × Height up to your design
- Tablet (Retina): 1536px(w) × 2048px(h) up to your design
- Mobile (Retina): 750px(w) × 1336px(h) up to your design
b). Design theme, colors, typography.
- Design Theme: Clean, Professional and Business-like design.
- Color palette: Follow client branding on provided screenshots
- Fonts: Up to Designer
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
- Client’s internal stakeholders – Marketing, Resource fulfilment, Sales
- Client’s enabling support teams (Service desk)
- HCPs ( Doctors)
- Customers ( Patients)
- Partners ( Distributors)
Judging Criteria
- How well you create Medical Technology - Customer Service Portal Design Concepts!
- 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 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.
For this challenge we need to execute a design challenge in Topcoder for the Medical Technology customer portal for Desktop, Tablet, Mobile screen sizes.
Read more details information on challenge specification. Let’s discuss any questions you have!
Round 1
Initial Medical Technology - Customer Service Portal Design for these following page on Desktop/Mobile screen size2). Customer Dashboard
3). Service Center
Notes:
- Create separated screens to explains the page flow or interactions in page.
- Feel free to submit more screens for early feedback
Round 2
Final Medical Technology - Customer Service Portal Design for these following screens combined with Checkpoint Feedback on Desktop/Tablet/Mobile screen sizes1). Login Screen
2). Customer Dashboard
3). Service Center
4). Order Tracking
Notes:
- Create separated screens to explains the page flow or interactions in page.
- Feel free to submit more screens for early feedback
Challenge Details
In this challenge we are looking for your help to create User interface design to help create a modern and intuitive web application that helps to create a Customer Service web portal, which will be the one-stop portal for:
- Client’s internal stakeholders – Marketing, Resource fulfilment, Sales
- Client’s enabling support teams (Service desk)
- HCPs ( Doctors)
- Customers ( Patients)
- Partners ( Distributors)
User Flow:
- User logs into registration page
- On registration enters a home page / dashboard
- Selection of Service inquiry tab
- User will click on New button in Service Tickets list page
- User will be redirected to the screen
- After creating the ticket by entering details in a template and hitting submit, ticket will be created
- User will be redirected to tickets list page with the newly added ticket visible at top
- User can track the Order tracking in page
Submission Requirements
Note: Refer to this Screenshot Folder for flow and page informations
1). Login Screen
- This should be simple Login page, display username and password fields
- Need error validation form
- Create Login button to submit the form
2). Customer Dashboard
Screenshot: Slide 8_Customer Portal.jpg
- These are elements that need displayed on Customer Portal screens:
Here are the general elements across the page after user logged in.
a). Main Navigation
Screenshot: Slide 13_Profile Drop Down.jpg
- Create some icon that represent the page.
- Think about how the main navigation displayed in page for these menu:
Accounts
Create sub navigation for the Accounts for these following menu:
- My Orders
- Account Status
- Sample Account
- Order Tracking (Add this new menu, click this button should take to specific page)
Order
Products
Support
Community
b). Application Switcher
- Show application switcher that will be able change to different application. This is placed on the top left of header bar on current application.
Quick Action Section
For dashboard page, we would like to display 3-5 items needing immediate attention by the user, for example:
- To show on the main screen,
- This is like items to approve,
- Pending service ticket status, etc
- Anything else?
Customer Dashboard will display tab based grouping (My Applications, My Notifications, My Install)
My Applications Tab
- On each box under My Applications tab, there are some buttons need displayed.
- My Application sections are:
-- Knowledge Portal
-- University
-- Content Library
-- Equipment Confirmation
-- Community
-- Create New Ticket
My Notifications Tab
Screenshots: 0_MyNotifications.png
- Create Overdue, Remaining Updated and Completed messages on top with progress graphic
- My notification will display a list of notification
- There are completed and incomplete task for the notification
- Notice there also Important badge for notification that need immediate action.
- View details will take to sepcific page.
- Display Pagination in page
- Display News & Events in page
My Install Tab
- Out of challenge scope
News & Events
- Create some content placeholder how the News & Events should look in page
- View all link must placed in this area to see all News & Events
In the News
- This area need represent in your design to display recent trending news, events & content
- Create some content placeholder how the In the News should look in page
Footer
- Footer links and copyright need displayed in page
3). Service Center
Screenshot: Slide 11_Customer Support Service.jpg
- This need to be single page with some required features:
Subcategories Request
- This section placed on the left side
- This Sub-Categories request will be working as filterable content
- You can display some grouping like:
-- Brand,
-- Status,
-- Serial Number,
-- RMA Number,
-- PO Number,
-- Request ID,
-- Shipping Address and
-- Date
- For sub-categories menu, please follow screenshot content
Tickets Details
- Need able to select the tickets and see the details
- There are 3 tabs need displayed like on screenshots for Notes, Devices and Details
- Should be able to Add new item based on each tabs
- Follow screenshot content for now
Track Status of the Request
- Need able to easily determine the Status Request
- Some available options are: Product Received, Waiting for Customer, and Complete
Assigning a Service Ticket
- Think about how to assigning another user a service ticket on this page?
- How the flow works?
Create a New Service Request
- User access this New Serrvice Request from the New button on the top right
- Think about how this Create a Service Request working in this single page
Required Forms are:
- Ticket #ID
- Ticket Description
- Add Devices
-- Serial#
-- RMA #
-- Product Family
- Notes
- Ticket Status
- Date and Time
4). Order Tracking
- User landed to this page from "Order Tracking" menu on the profile menu
- You need display some of these elements in page
Order Search
3_Order History_Serach.png
- This tool will help user find the Order based on some required filters
Order Search Result
Screenshot: 4_Order History_List View.png
- For this challenge you just need display the Header List view with one expanded row
My Orders
Screenshot: 2_Order History.png
- There will be list of all orders in page including their progress status
- Create buttons to do Track Order, View Details and View Invoice
Individual Order Details
- Need display the Order progress bar
- How the Order Tracking details should designed put content for now.
Design Submission Formats:
a). Screen Sizes:
This is going to be developed as a responsive application on these following screen sizes
- Desktop (Standard): 1280px(w) × Height up to your design
- Tablet (Retina): 1536px(w) × 2048px(h) up to your design
- Mobile (Retina): 750px(w) × 1336px(h) up to your design
b). Design theme, colors, typography.
- Design Theme: Clean, Professional and Business-like design.
- Color palette: Follow client branding on provided screenshots
- Fonts: Up to Designer
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
- Client’s internal stakeholders – Marketing, Resource fulfilment, Sales
- Client’s enabling support teams (Service desk)
- HCPs ( Doctors)
- Customers ( Patients)
- Partners ( Distributors)
Judging Criteria
- How well you create Medical Technology - Customer Service Portal Design Concepts!
- 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 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.