Challenge Summary
Welcome to Hercules Concierge Web Application Redesign Storyboard Challenge
The goal of this challenge is to update an existing web application called “Concierge Site”. If you are an employee of the company who works with a certain amount of hours a week, you can log into this website and get free or discounted services the company provides. For example, Comcast is a big TV cable company, employees can order free cable service via this site.
In this challenge, we are looking to start this project with some initial design concepts on what the user should see and experience when first engaging with the web application. We also want to focus on what items should have priority to the user. Read the design problem carefully let us know what you think via your design ideas.
Good luck and we look forward to your design solution!
Design Requirements:
- The result of this design challenge will be developed as Responsive Web Application.
- For this challenge, you need to submit on Desktop and Mobile screen sizes.
- Desktop Size: Design for display 1280px and height as required (Standard)
- Mobile Size: Design for display 750px x 1334px (Retina)
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp on Standard and Retina!
- Double check your storyboard source files to make sure all graphic assets easy to export on next development.
- Feel free to suggest any logic/functions that can bring good User Experience for this application.
- The web site design will need to be clean and professional while structuring the information to be easily browsed by users.
- Your design theme must inspired from client main website: http://www.comcast.com or http://my.xfinity.com
- Use provided Xfinity Sans Font and Xfinity logo in your design
- The design will need to be responsive to desktop, tablet, and phones.
Invision Link
- You must provide an Invision Link of your design for this challenge
- If you need an Invision Project, send email OR via challenge forum to these following email address:
adroc@topcoder.com
aabbott@topcoder.com
lunarkid@copilots.topcoder.com
Downloadable Files:
https://drive.google.com/drive/folders/0B31nrwic_6z0czc1aVNRUzFSZEk?usp=sharing
Old-Application-Screenshots.zip - Existing Application Screenshots
Courtesy-OnDemand Employee-User-Guide.pdf - Guideline to use Existing Application
XFINITY Sans.zip - Xfinity Sans Fonts
XFINITY_Logo.zip - Xfinity Sans Logo
Screens Requirements:
1). Landing Page
- Existing Landing Page: https://courtesyondemand.teamcomcast.com/
- Create brand new login page that expressing your new design theme
- Need ability to let the user select Company and then have the Login form show up.
- How with the login form look for your design?
- This is existing Landing Page look: Screenshot: 01-landingpage.png
2). Homepage
- User landed to homepage after logged in
- We need you to do overall web application site redesign.
- Focus on create brand new of Homepage, page navigation, page layout/structure and design theme.
- Currently, the homepage space not efficiently used, the most section just flat, and using static text. We'd like to explore ways to provide dashboard capabilities, convenient links to pending orders, questions, etc, as well as potentially as a promotional area for New or "Trending" offerings.
- The goal is to increase better engagement on the Homepage.
- Use http://www.comcast.com or http://my.xfinity.com as sources of inspiration. The design should be visually engaging with photography, graphics, etc.
- This is existing Homepage look: Screenshot: 02-splash1-onentry.png
Main Navigation Structure:
- Home
- Request
-- New Request (Screenshot: 02-splash2-newmenu.png)
-- History
- Questions
- Pricing (Screenshot: 02-splash3-pricing.png)
-- Pricing List
3). New Request
- Refer to provided Courtesy-OnDemand Employee-User-Guide.pdf for page flow
- Redesign New Request page to get new design theme
- These are progress steps on left sidebar on existing application for:
-- General Info
-- Service Info
-- Comments
-- Summary Info
- Also, you need make Estimated Cost and Section Notes easy to see
- User can navigate back and forth by click Next and Prev button or via Progress Step buttons.
- Capture all form elements and label like existing application
- Important: For this challenge, you just need capture General Info Step like existing New Request Flow: (Screenshot: 03-request-form1.png, Screenshot: 03-request-form2.png, Screenshot: 03-request-form3.png & Screenshot: 03-request-form4.png)
4). History Page
Screenshot: 04-history1-past-orders.png
- History page will display a list of all request.
- Think about how you design this page.
- Also, what is the proper way to display each table column header information
Target Audience:
- Client Internal Employees
Judging Criteria:
- Overall Brand New User Experience of Hercules Concierge Web Application
- Completeness and accuracy of the designs as defined in requirements.
- How well your designs provide a consistent user flow.
- How well your designs captures all the requirements.
- Any suggestions, interactions, and user flow you recommend (provide any notes or comments for the client).
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. Read Round Requirements for the required screen sizes!
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
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.
The goal of this challenge is to update an existing web application called “Concierge Site”. If you are an employee of the company who works with a certain amount of hours a week, you can log into this website and get free or discounted services the company provides. For example, Comcast is a big TV cable company, employees can order free cable service via this site.
In this challenge, we are looking to start this project with some initial design concepts on what the user should see and experience when first engaging with the web application. We also want to focus on what items should have priority to the user. Read the design problem carefully let us know what you think via your design ideas.
Good luck and we look forward to your design solution!
Round 1
Your submitted checkpoint design solution for client review on Desktop and Mobile Screen Sizes:
1). Landing Page
2). Homepage
Notes :
- Feel free to submit more screens for early feedback.
Round 2
Final pages of design solution with updated solution based on client checkpoint feedback on Desktop and Mobile Screen Sizes:
1). Landing Page
2). Homepage
3). New Request
4). History Page
Design Requirements:
- The result of this design challenge will be developed as Responsive Web Application.
- For this challenge, you need to submit on Desktop and Mobile screen sizes.
- Desktop Size: Design for display 1280px and height as required (Standard)
- Mobile Size: Design for display 750px x 1334px (Retina)
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp on Standard and Retina!
- Double check your storyboard source files to make sure all graphic assets easy to export on next development.
- Feel free to suggest any logic/functions that can bring good User Experience for this application.
- The web site design will need to be clean and professional while structuring the information to be easily browsed by users.
- Your design theme must inspired from client main website: http://www.comcast.com or http://my.xfinity.com
- Use provided Xfinity Sans Font and Xfinity logo in your design
- The design will need to be responsive to desktop, tablet, and phones.
Invision Link
- You must provide an Invision Link of your design for this challenge
- If you need an Invision Project, send email OR via challenge forum to these following email address:
adroc@topcoder.com
aabbott@topcoder.com
lunarkid@copilots.topcoder.com
Downloadable Files:
https://drive.google.com/drive/folders/0B31nrwic_6z0czc1aVNRUzFSZEk?usp=sharing
Old-Application-Screenshots.zip - Existing Application Screenshots
Courtesy-OnDemand Employee-User-Guide.pdf - Guideline to use Existing Application
XFINITY Sans.zip - Xfinity Sans Fonts
XFINITY_Logo.zip - Xfinity Sans Logo
Screens Requirements:
1). Landing Page
- Existing Landing Page: https://courtesyondemand.teamcomcast.com/
- Create brand new login page that expressing your new design theme
- Need ability to let the user select Company and then have the Login form show up.
- How with the login form look for your design?
- This is existing Landing Page look: Screenshot: 01-landingpage.png
2). Homepage
- User landed to homepage after logged in
- We need you to do overall web application site redesign.
- Focus on create brand new of Homepage, page navigation, page layout/structure and design theme.
- Currently, the homepage space not efficiently used, the most section just flat, and using static text. We'd like to explore ways to provide dashboard capabilities, convenient links to pending orders, questions, etc, as well as potentially as a promotional area for New or "Trending" offerings.
- The goal is to increase better engagement on the Homepage.
- Use http://www.comcast.com or http://my.xfinity.com as sources of inspiration. The design should be visually engaging with photography, graphics, etc.
- This is existing Homepage look: Screenshot: 02-splash1-onentry.png
Main Navigation Structure:
- Home
- Request
-- New Request (Screenshot: 02-splash2-newmenu.png)
-- History
- Questions
- Pricing (Screenshot: 02-splash3-pricing.png)
-- Pricing List
3). New Request
- Refer to provided Courtesy-OnDemand Employee-User-Guide.pdf for page flow
- Redesign New Request page to get new design theme
- These are progress steps on left sidebar on existing application for:
-- General Info
-- Service Info
-- Comments
-- Summary Info
- Also, you need make Estimated Cost and Section Notes easy to see
- User can navigate back and forth by click Next and Prev button or via Progress Step buttons.
- Capture all form elements and label like existing application
- Important: For this challenge, you just need capture General Info Step like existing New Request Flow: (Screenshot: 03-request-form1.png, Screenshot: 03-request-form2.png, Screenshot: 03-request-form3.png & Screenshot: 03-request-form4.png)
4). History Page
Screenshot: 04-history1-past-orders.png
- History page will display a list of all request.
- Think about how you design this page.
- Also, what is the proper way to display each table column header information
Target Audience:
- Client Internal Employees
Judging Criteria:
- Overall Brand New User Experience of Hercules Concierge Web Application
- Completeness and accuracy of the designs as defined in requirements.
- How well your designs provide a consistent user flow.
- How well your designs captures all the requirements.
- Any suggestions, interactions, and user flow you recommend (provide any notes or comments for the client).
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. Read Round Requirements for the required screen sizes!
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
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.