Challenge Summary
Welcome to the "RUX - JH Customer Portal Design Concepts Challenge"! In this challenge, we want to create a new UI/UX for an internal web portal that our client could use to analyze their customers. This portal would show historical metrics on the customers as well as predictive statistic results with recommended areas for action. We are looking for design concepts and new ways to think about the user interface in this challenge. We are looking for your best ideas and concepts to WOW our customer!
This portal should have a dashboard-like look and feel.
Let us know if you have any questions!
What is a RUX Challenge?
The RUX (Rapid User Experience) challenge uses the same format as our famous LUX Challenge except it is not "Live" at an event. The RUX Challenge Series provides you with an opportunity to show digital leaders from some of the largest companies in the world just how good your concept and user experience (UI/UX) design skills are.
RUX (Rapid User Experience) challenges are fast, fun, and have more chances for you to capture prize money!
Note: You do not need to have RUX challenge experience to join this challenge - Just jump in and give it a try! Make sure to follow the challenge details, the challenge forum and ask questions.
The goal of this challenge is to take the provided design problem, analyze the user experience and provide better design concepts and visual ideas on how the application might look and work!
RUX Challenge Timeline and Rolling Checkpoint
- Submission Start: 01/30/2018 at 09:00 AM EST
- Rolling Checkpoint Start: 01/31/2018 at 12:00 PM EST
- Submission End: 02/02/2018 at 09:00 AM EST
We are offering 5 Prize Placements:
1) 1st Placement: $2000
2) 2nd Placement: $1500
3) 3rd Placement: $1000
4) 4th Placement: $750
5) 5th Placement: $500
- Plus 8 placements for Rolling Checkpoint prizes @ $50 each!
Note: Important Rolling Checkpoint Details
- Trevor Gerring [tgerring] and Lynn Duggan [LCDuggan] will be available for early submissions and Rolling Feedback!
- We will answer questions and provide Rolling Feedback as fast as possible.
- You must watch the Forum for your feedback!
*All initial qualifying checkpoint submissions will win $50 (8 Placements)
Background Overview
This is an internal web portal that customer-facing reps could use to analyze their customers. This portal would show historical metrics on the customers as well as predictive statistic results with recommended areas for action. There will be three main groups that will access this portal, each concerned about different information (Sales, Customer Service and Managers).
We would like your designs to make use of established fonts, colour palettes, and functional elements that have been created for the John Hancock Retirement Plan Services website. Your design solution for this internal portal should complement the look & feel of this public website shown in the provided “JHRPS Basic Web Style Guide_January 2018.pdf” document.
For this challenge, we will use Tableau (https://www.tableau.com) to create the Metrics and Data Visualization. Tableau can help anyone see and understand their data easily. It connects to almost any database, has plenty of great visualizations, and the tools visualization can be shared with a click. Great time to learn about this tool, have fun with it!
Challenge Goals
The primary goals of this portal are displaying a significant amount of customer data in an elegant manner as well as the ease of use.
Reference
Example dashboards designs that were published in tableau
- https://public.tableau.com/en-us/s/gallery
- https://www.tableau.com/learn/webinars/design-tricks-great-dashboards
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=621328
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
0) General Design Features
Filter Features
- Design suggestion: There are a lot of filters/filterable options for the data, make this streamlined while keeping design functional and appealing
- The data viewed should be able to be filtered based upon different variables (examples below).
- The filters could change from page to page or be consistent throughout the design.
- There should also be a clear all filters button to reset all selected filters.
- Example filters:
-- Metrics
---- Region
---- Tenure band (0 – 1 year, 1 – 3 years, 3 – 5 years and 5+ years)
---- Average customer spending band ($0 - $100, $100 - $500, $500 - $1000, $1000 - $3000 and $3000 and above)
-- User Groups
---- Customer Service Representative Manager (by name) - About 60 unique options
---- Customer Service Representative (by name) - Also, about 60 options
---- Representative Sales (by name) - Also, about 60 options
HUD (Head Up Display) Banner Features
- Must contain the following (should be on side or top of every page) and fits the look & feel of the RPS Web Style Guide:
-- John Hancock logo
-- Application Name: "Internal Sales Portal"
-- When clicked takes you to the home screen
1) Homepage
- Main landing page for everyone that accesses portal containing high level aggregated information
- Key customer metrics for the past month include
-- Countrywide # of customers that have left
-- Countrywide total money lost
-- Countrywide retention rate
-- Predicted # of customers to leave
- Each of the above metrics should have an increase or decrease indicator to show changes from past months.
- In addition to the countrywide aggregated metrics, show aggregated results for each of the eight regions. When a user clicks on the individual region results, have the capability to link to the data view page to show additional details. These could be links or tabs or something else.
- Information on this page should be interchangeable between last month view vs. YTD view.
- Information on this page should also be updated when the user makes different selections based on the filters.
- Think through on what other key questions can be answered or could be helpful by looking at this dashboard.
- The ability to dive deeper into the information depending upon who is accessing the page, these could be links or tabs or something else, we are open to your thoughts.
2) Data view page
- Containing the plots and graphs for customer analysis on only customers that have left within the past month.
- This page could possibly be split into different pages based on the user groups (shown below). Specific data the different User Groups will need to visualize:
-- Sales: Who they left to (important), Region (important)
-- Customer Service (options to filter based on the following): Prior communication date, Team name
-- Managers – aggregated view looking at the different customer service and sales representatives: Representative, Ability to filter easily based on representative, Region (important)
a) If the filter selection is tenure band, annual spending band, CS Representative, list following customer information:
- Customer ID
- Customer name
- Customer annual spending amount
- Customer tenure
- Customer state
- Customer service representative
- Customer service manager
- Date left
- Reason why they left (high prices, selection available, bad customer support, etc.)
- Which company they left to
b) If the filter selection is CS Manager, list following customer information:
- Aggregated results for each of the CS representative under the selected CS manager, including:
-- CS representative name
-- Total # of customers left
-- Total # of annual spending lost
-- XXX
-- XXX
-- XXX
c) Include graphical representation of various information from homepage – use different chart type to highlight key trending for
- Year over year # of lost customer comparison
- Month over month retention rate
- Distribution of customer lost reasons
- Distribution of top new companies
- Allow the capability to export information into excel file
- Allow the capability to drill into the data view page to see details
3) Client Details page
- Key considerations: Tableau will only allow a limited number of text columns, the amount of information we’d like to show is two to three times more. How can information be displayed in a way that is not congested yet user-friendly?
- Must Include:
-- A crosstab of the information shown on data view page - Not all data is going to be able to be shown.
-- Export data note, Tableau cannot provide a button to download data but does have the capability. This should be a note on how to do that. "Download data by first selecting the desired data graph or table, then select the download button in the bottom right of the dashboard, next select data and then select download all rows to save as CSV".
-- Need to have the capability to sort easily based on annual spending amount, representative, left reason, which company they left for, etc.
-- Need to allow easy export into Excel for further analysis.
4) Predictive Summary view
- Provides high-level summary of the clients that are at risk of leaving.
- Show key client metrics for the customers at risk and indicator of change from the prior month.
-- Countrywide total number of customers at risk
-- Countrywide total at-risk annual spending
-- Countrywide overall risk assessment
- Visualization showing the customers at risk and their level of importance - Importance can be judged based on a few of the following criteria.
-- Can use total annual spending
-- Tenure
-- Physical location
5) Predictive List View page
- Details the following data (filtered based on which user group is accessing it):
-- List of customers at risk along with the following information:
---- Annual spending ($0 - $100, $100 - $500, $500 - $1000, $1000 - $3000 and $3000 and above)
---- Sales manager and customer service manager assigned to client
---- Tenure of customer (0 – 1 year, 1 – 3 years, 3 – 5 years and 5+ years)
---- Risk level (high / medium / low)
-- Indicator if the customer is newly labelled as at-risk.
-- Have a link to allow user can use to dive deeper into individual plans.
-- Have the capability to allow sorting by annual spending band, tenure band, sales manager or customer service manager.
-- Have the capability to sort or filter by risk level.
6) Predictive Customer Details page
- Showing just one customer's information Should include:
-- Detailed customer information, including age / gender / average annual spending and the risk level (high / medium / low)
-- Sales Manager assigned to client and the corresponding contact information
-- Client Service Manager assigned to client and the corresponding contact information
-- A list of five key factors that lead to the customer leaving prediction and their relative importance. Sample factors include:
---- Customer past year spending
---- Customer last spending date time
---- Customer survey score
---- Customer age and gender
---- Customer location
- Should also include a portal feedback indicator
-- Quick indicator to say if the predictive information provided was useful or not
-- Also, include a comment box for feedback on the same topic
7) Any Additional Functionality or Screens
- Do you have any additional concepts or ideas for this Web Portal?
- Maybe AI recommendation about step by step that user needs to perform to get customer loyalty again? Etc?
- We are open and looking for your ideas and UX solutions. Be creative here, show us your suggestion!
8) Presentation Screen - 1920x1080 (16:9 Ratio)
- In a RUX challenge, this screen is the way to showcase your concept so keep it simple and make it look good!
- If you were walking into a meeting and needed to sell your idea - use this screen to showcase your concept.
Branding Guidelines
- Screen Size (Focus on the desktop view, and if you have time - the business would love to see an iPad view as well):
-- Desktop: 1366px with height adjusted accordingly - Must be fixed width, but height is optional (can be scrollable)
-- iPad: 1536px x 2048px
- Colors and branding – Follow John Hancock colours
- Design with Tableau constraints in mind (Learn more about Tableau from here): https://www.tableau.com/learn and https://www.tableau.com/community
- This should be a professional looking application with an engaging and modern theme
- We are looking for your concepts and ideas to about the best possible UI/UX for this portal!
Documentation
- JH Logo
- JH Branding
MarvelApp Prototype
- We need you to upload your screens to Marvel App.
- Please send your Marvel app request to csystic@gmail.com or in Challenge Forum
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload).
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- Overall design and user experience
- Cleanliness of screen design and user flow
Target Audience
- Sales
- Customer Service
- Managers
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB colour mode at 72 dpi and place a screenshot of your submission within it.
Submission File
- Submit JPG/PNG for your submission files.
- Submit Marvel App for your design.
Source Files
All original source files of the submitted design. Source files may be created in Adobe Photoshop, Illustrator, XD or Sketch!
Final Fixes
This RUX might have Final Fixes!
This portal should have a dashboard-like look and feel.
Let us know if you have any questions!
What is a RUX Challenge?
The RUX (Rapid User Experience) challenge uses the same format as our famous LUX Challenge except it is not "Live" at an event. The RUX Challenge Series provides you with an opportunity to show digital leaders from some of the largest companies in the world just how good your concept and user experience (UI/UX) design skills are.
RUX (Rapid User Experience) challenges are fast, fun, and have more chances for you to capture prize money!
Note: You do not need to have RUX challenge experience to join this challenge - Just jump in and give it a try! Make sure to follow the challenge details, the challenge forum and ask questions.
The goal of this challenge is to take the provided design problem, analyze the user experience and provide better design concepts and visual ideas on how the application might look and work!
RUX Challenge Timeline and Rolling Checkpoint
- Submission Start: 01/30/2018 at 09:00 AM EST
- Rolling Checkpoint Start: 01/31/2018 at 12:00 PM EST
- Submission End: 02/02/2018 at 09:00 AM EST
We are offering 5 Prize Placements:
1) 1st Placement: $2000
2) 2nd Placement: $1500
3) 3rd Placement: $1000
4) 4th Placement: $750
5) 5th Placement: $500
- Plus 8 placements for Rolling Checkpoint prizes @ $50 each!
Note: Important Rolling Checkpoint Details
- Trevor Gerring [tgerring] and Lynn Duggan [LCDuggan] will be available for early submissions and Rolling Feedback!
- We will answer questions and provide Rolling Feedback as fast as possible.
- You must watch the Forum for your feedback!
*All initial qualifying checkpoint submissions will win $50 (8 Placements)
Background Overview
This is an internal web portal that customer-facing reps could use to analyze their customers. This portal would show historical metrics on the customers as well as predictive statistic results with recommended areas for action. There will be three main groups that will access this portal, each concerned about different information (Sales, Customer Service and Managers).
We would like your designs to make use of established fonts, colour palettes, and functional elements that have been created for the John Hancock Retirement Plan Services website. Your design solution for this internal portal should complement the look & feel of this public website shown in the provided “JHRPS Basic Web Style Guide_January 2018.pdf” document.
For this challenge, we will use Tableau (https://www.tableau.com) to create the Metrics and Data Visualization. Tableau can help anyone see and understand their data easily. It connects to almost any database, has plenty of great visualizations, and the tools visualization can be shared with a click. Great time to learn about this tool, have fun with it!
Challenge Goals
The primary goals of this portal are displaying a significant amount of customer data in an elegant manner as well as the ease of use.
Reference
Example dashboards designs that were published in tableau
- https://public.tableau.com/en-us/s/gallery
- https://www.tableau.com/learn/webinars/design-tricks-great-dashboards
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=621328
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
0) General Design Features
Filter Features
- Design suggestion: There are a lot of filters/filterable options for the data, make this streamlined while keeping design functional and appealing
- The data viewed should be able to be filtered based upon different variables (examples below).
- The filters could change from page to page or be consistent throughout the design.
- There should also be a clear all filters button to reset all selected filters.
- Example filters:
-- Metrics
---- Region
---- Tenure band (0 – 1 year, 1 – 3 years, 3 – 5 years and 5+ years)
---- Average customer spending band ($0 - $100, $100 - $500, $500 - $1000, $1000 - $3000 and $3000 and above)
-- User Groups
---- Customer Service Representative Manager (by name) - About 60 unique options
---- Customer Service Representative (by name) - Also, about 60 options
---- Representative Sales (by name) - Also, about 60 options
HUD (Head Up Display) Banner Features
- Must contain the following (should be on side or top of every page) and fits the look & feel of the RPS Web Style Guide:
-- John Hancock logo
-- Application Name: "Internal Sales Portal"
-- When clicked takes you to the home screen
1) Homepage
- Main landing page for everyone that accesses portal containing high level aggregated information
- Key customer metrics for the past month include
-- Countrywide # of customers that have left
-- Countrywide total money lost
-- Countrywide retention rate
-- Predicted # of customers to leave
- Each of the above metrics should have an increase or decrease indicator to show changes from past months.
- In addition to the countrywide aggregated metrics, show aggregated results for each of the eight regions. When a user clicks on the individual region results, have the capability to link to the data view page to show additional details. These could be links or tabs or something else.
- Information on this page should be interchangeable between last month view vs. YTD view.
- Information on this page should also be updated when the user makes different selections based on the filters.
- Think through on what other key questions can be answered or could be helpful by looking at this dashboard.
- The ability to dive deeper into the information depending upon who is accessing the page, these could be links or tabs or something else, we are open to your thoughts.
2) Data view page
- Containing the plots and graphs for customer analysis on only customers that have left within the past month.
- This page could possibly be split into different pages based on the user groups (shown below). Specific data the different User Groups will need to visualize:
-- Sales: Who they left to (important), Region (important)
-- Customer Service (options to filter based on the following): Prior communication date, Team name
-- Managers – aggregated view looking at the different customer service and sales representatives: Representative, Ability to filter easily based on representative, Region (important)
a) If the filter selection is tenure band, annual spending band, CS Representative, list following customer information:
- Customer ID
- Customer name
- Customer annual spending amount
- Customer tenure
- Customer state
- Customer service representative
- Customer service manager
- Date left
- Reason why they left (high prices, selection available, bad customer support, etc.)
- Which company they left to
b) If the filter selection is CS Manager, list following customer information:
- Aggregated results for each of the CS representative under the selected CS manager, including:
-- CS representative name
-- Total # of customers left
-- Total # of annual spending lost
-- XXX
-- XXX
-- XXX
c) Include graphical representation of various information from homepage – use different chart type to highlight key trending for
- Year over year # of lost customer comparison
- Month over month retention rate
- Distribution of customer lost reasons
- Distribution of top new companies
- Allow the capability to export information into excel file
- Allow the capability to drill into the data view page to see details
3) Client Details page
- Key considerations: Tableau will only allow a limited number of text columns, the amount of information we’d like to show is two to three times more. How can information be displayed in a way that is not congested yet user-friendly?
- Must Include:
-- A crosstab of the information shown on data view page - Not all data is going to be able to be shown.
-- Export data note, Tableau cannot provide a button to download data but does have the capability. This should be a note on how to do that. "Download data by first selecting the desired data graph or table, then select the download button in the bottom right of the dashboard, next select data and then select download all rows to save as CSV".
-- Need to have the capability to sort easily based on annual spending amount, representative, left reason, which company they left for, etc.
-- Need to allow easy export into Excel for further analysis.
4) Predictive Summary view
- Provides high-level summary of the clients that are at risk of leaving.
- Show key client metrics for the customers at risk and indicator of change from the prior month.
-- Countrywide total number of customers at risk
-- Countrywide total at-risk annual spending
-- Countrywide overall risk assessment
- Visualization showing the customers at risk and their level of importance - Importance can be judged based on a few of the following criteria.
-- Can use total annual spending
-- Tenure
-- Physical location
5) Predictive List View page
- Details the following data (filtered based on which user group is accessing it):
-- List of customers at risk along with the following information:
---- Annual spending ($0 - $100, $100 - $500, $500 - $1000, $1000 - $3000 and $3000 and above)
---- Sales manager and customer service manager assigned to client
---- Tenure of customer (0 – 1 year, 1 – 3 years, 3 – 5 years and 5+ years)
---- Risk level (high / medium / low)
-- Indicator if the customer is newly labelled as at-risk.
-- Have a link to allow user can use to dive deeper into individual plans.
-- Have the capability to allow sorting by annual spending band, tenure band, sales manager or customer service manager.
-- Have the capability to sort or filter by risk level.
6) Predictive Customer Details page
- Showing just one customer's information Should include:
-- Detailed customer information, including age / gender / average annual spending and the risk level (high / medium / low)
-- Sales Manager assigned to client and the corresponding contact information
-- Client Service Manager assigned to client and the corresponding contact information
-- A list of five key factors that lead to the customer leaving prediction and their relative importance. Sample factors include:
---- Customer past year spending
---- Customer last spending date time
---- Customer survey score
---- Customer age and gender
---- Customer location
- Should also include a portal feedback indicator
-- Quick indicator to say if the predictive information provided was useful or not
-- Also, include a comment box for feedback on the same topic
7) Any Additional Functionality or Screens
- Do you have any additional concepts or ideas for this Web Portal?
- Maybe AI recommendation about step by step that user needs to perform to get customer loyalty again? Etc?
- We are open and looking for your ideas and UX solutions. Be creative here, show us your suggestion!
8) Presentation Screen - 1920x1080 (16:9 Ratio)
- In a RUX challenge, this screen is the way to showcase your concept so keep it simple and make it look good!
- If you were walking into a meeting and needed to sell your idea - use this screen to showcase your concept.
Branding Guidelines
- Screen Size (Focus on the desktop view, and if you have time - the business would love to see an iPad view as well):
-- Desktop: 1366px with height adjusted accordingly - Must be fixed width, but height is optional (can be scrollable)
-- iPad: 1536px x 2048px
- Colors and branding – Follow John Hancock colours
- Design with Tableau constraints in mind (Learn more about Tableau from here): https://www.tableau.com/learn and https://www.tableau.com/community
- This should be a professional looking application with an engaging and modern theme
- We are looking for your concepts and ideas to about the best possible UI/UX for this portal!
Documentation
- JH Logo
- JH Branding
MarvelApp Prototype
- We need you to upload your screens to Marvel App.
- Please send your Marvel app request to csystic@gmail.com or in Challenge Forum
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload).
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- Overall design and user experience
- Cleanliness of screen design and user flow
Target Audience
- Sales
- Customer Service
- Managers
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB colour mode at 72 dpi and place a screenshot of your submission within it.
Submission File
- Submit JPG/PNG for your submission files.
- Submit Marvel App for your design.
Source Files
All original source files of the submitted design. Source files may be created in Adobe Photoshop, Illustrator, XD or Sketch!
Final Fixes
This RUX might have Final Fixes!
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.