Challenge Summary
Welcome to the “IRIS Customer 360 Web Application Design Challenge”! The scope of this challenge is to design an intuitive and modern web application that provides a platform for customer (IRIS) care agents to get a full view of their customer’s behavior when receiving a call at the call centers.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
01. Login
03. Customer Dashboard - With Data
04. Customer Details (30 days)
05. Customer Details (7 days)
07. Search Results
01. Login
02. Customer Dashboard - Empty State
03. Customer Dashboard - With Data
04. Customer Details (30 days)
05. Customer Details (7 days)
06. Customer Details (60 days)
07. Search Results
Challenge Objectives
Application Overview
Audience
Persona
User Story
Mike is an agent working for IRIS, a mobile communication company. When a customer calls, Mike is trying to get as much information about him as possible in a short time. He now has to use 2 systems for that, which takes him time and has to put the customer on hold. Mike would like to have a platform where the customer’s data/metrics would be pulled out for him instantly when the call comes in.
This is what we are designing in this challenge. Mike is going to login for the interface on Sibel, through our web application, which will be an iframe integrated into the Sibel platform. After he logs in and a person calls, he would see the dashboard with the most important metrics about the caller. He can also go and view more details about him such as more metrics for a period of 7, 30 and 60 days.
Design Goals & Principles
Exploration Score
In terms of expectations, we would like to measure the concept against the following in the one to ten scales:
Glossary
Siebel = it’s another application where we will integrate our developed application as an iframe
Screens Requirements
The screens that we are designing are going to be integrated within an iframe into an existing application called Sibel, so we don’t need to add any navigation menu or footer.
1. Login
The user will login with his credentials (username and password) on the Sibel system. He has the option to change his password if he forgot it and a link to create a new account/ register.
2. Customer Dashboard - Empty State
When the agent logs in to his dashboard, but there is no call coming in, the dashboard could be empty, showing a message like “No incoming call at the moment” or could show other stats. From the dashboard, we’d like the agent to have the option to search for a particular customer. We are open to seeing your ideas here.
3. Customer Dashboard - With Data
When a customer is calling the agent then the most important metrics would show up, in addition to his name, age, phone, location. We have a total of 27 metrics here, which are grouped in different categories: Call Center, Saves Call Center, USSD, Web interaction, etc. You can see more details on this spreadsheet. The dashboard will show only the most important metrics (up to you which one you select). From here the agent may choose to see more details about the customer either in a new screen, or overlay, etc.
4. Customer Details (30 days)
On this page, the agent can see more metrics about the customer than on the dashboard.
5. Customer Details (7 days)
This page will show the same screen as above. However, the data will globally adjust to display those metrics for the past 7 days.
6. Customer Details (60 days)
This page will show the same screen as above, just that the data will globally adjust to display those metrics for the past 60 days
7. Search Results
Assumption: The agent can search for a customer by name. Show us how search and search results are to be displayed. Each result item would display a couple of fields such as customer name, phone, location, and any other stats/metrics you think are the most important to be displayed. We’re looking for your ideas on how to show these.
Branding Guidelines
Size
Stock Photos and Images
Marvel Prototype
Final Deliverables
When you have finished your work, create an archive to include the following:
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Submit your initial designs for checkpoint feedback01. Login
03. Customer Dashboard - With Data
04. Customer Details (30 days)
05. Customer Details (7 days)
07. Search Results
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your final designs with all checkpoint feedback implemented01. Login
02. Customer Dashboard - Empty State
03. Customer Dashboard - With Data
04. Customer Details (30 days)
05. Customer Details (7 days)
06. Customer Details (60 days)
07. Search Results
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Challenge Objectives
- Web application
- To create 7 screens
- To provide instant, complete information for an agent about the caller
- To explore ideas around different layouts of this page and show our creativity to the customer
Application Overview
- The purpose of this page is to have one place for the agent to find all the data information he needs about their customer without having to look into several systems
- This page will provide details about the caller instantly
- The information should be easy to scan for
Audience
- IRIS agents who are answering customers all day and need to solve their problems
- Users will land through this page, after they login through Siebel (3rd party application)
Persona
- Name: Mike
- Occupation: IRIS agent
- Goals:
- Answer customer’s calls to solve their problems
- Quickly find the data he needs about each customer
- Frustrations:
- Can’t find all the information about the caller in one system, so it’s taking him more to look in two different system
- Wants:
- A place to get the information fast about the customer calling and see stats about the customer interaction with IRIS company
User Story
Mike is an agent working for IRIS, a mobile communication company. When a customer calls, Mike is trying to get as much information about him as possible in a short time. He now has to use 2 systems for that, which takes him time and has to put the customer on hold. Mike would like to have a platform where the customer’s data/metrics would be pulled out for him instantly when the call comes in.
This is what we are designing in this challenge. Mike is going to login for the interface on Sibel, through our web application, which will be an iframe integrated into the Sibel platform. After he logs in and a person calls, he would see the dashboard with the most important metrics about the caller. He can also go and view more details about him such as more metrics for a period of 7, 30 and 60 days.
Design Goals & Principles
- Simple and clean design over complex and flashy
- Content hierarchy - think about the priority of information. What are the most important things for the user?
Exploration Score
In terms of expectations, we would like to measure the concept against the following in the one to ten scales:
- Creativity: 9
- 1: barely new ideas
- 10: a utopic product with features not proven to be able to be fully implemented
- Aesthetics: 8
- 1: low-fidelity design, wireframe or plain sketch
- 10: top-notch finished looking visual design
- Exploration: 8
- 1: strictly follow an existing reference or production guideline
- 10: open to alternative workflows/features not listed here that would help the overall application
- Branding: 4
- 1: don’t care at all about the branding just functionality
- 10: without a properly branded product there is no success
Glossary
Siebel = it’s another application where we will integrate our developed application as an iframe
Screens Requirements
The screens that we are designing are going to be integrated within an iframe into an existing application called Sibel, so we don’t need to add any navigation menu or footer.
1. Login
The user will login with his credentials (username and password) on the Sibel system. He has the option to change his password if he forgot it and a link to create a new account/ register.
2. Customer Dashboard - Empty State
When the agent logs in to his dashboard, but there is no call coming in, the dashboard could be empty, showing a message like “No incoming call at the moment” or could show other stats. From the dashboard, we’d like the agent to have the option to search for a particular customer. We are open to seeing your ideas here.
3. Customer Dashboard - With Data
When a customer is calling the agent then the most important metrics would show up, in addition to his name, age, phone, location. We have a total of 27 metrics here, which are grouped in different categories: Call Center, Saves Call Center, USSD, Web interaction, etc. You can see more details on this spreadsheet. The dashboard will show only the most important metrics (up to you which one you select). From here the agent may choose to see more details about the customer either in a new screen, or overlay, etc.
4. Customer Details (30 days)
On this page, the agent can see more metrics about the customer than on the dashboard.
- The user can switch globally and see those metrics for the past 30 days or 7 or 60 days. By default it would show the metrics for 30 days.
- He also has the option to switch each metric individually to a different period of time (6 days and 60 days) without changing the global settings.
- Also, a metric can represent a value fixed like 20 number of calls, or it can show a graph/chart displaying a period of time (like evolution for the last 7 days).
- Some of the metrics can be displayed for 7 days, 30 days and 60 days, but not all (like for example those in the Web interaction group, USSD and APP group are shown only for 30 days period).
- We are open to your ideas and suggestions here on how else to display data.
5. Customer Details (7 days)
This page will show the same screen as above. However, the data will globally adjust to display those metrics for the past 7 days.
6. Customer Details (60 days)
This page will show the same screen as above, just that the data will globally adjust to display those metrics for the past 60 days
7. Search Results
Assumption: The agent can search for a customer by name. Show us how search and search results are to be displayed. Each result item would display a couple of fields such as customer name, phone, location, and any other stats/metrics you think are the most important to be displayed. We’re looking for your ideas on how to show these.
Branding Guidelines
- We don’t have any specific branding guideline - the style it’s all open to interpretation, based on the design goals and principles.
Size
- Desktop: width: 1000 px x height 900px. Note: height and width are both fixed sizes.
Stock Photos and Images
- Stock Photos are allowed but only from the websites with photos free for commercial use from those allowed by Topcoder (Public Domain Archive, Pexels and Unsplash).
- Icons: are allowed as per Topcoder’s policy
Marvel Prototype
- Send your marvel app request to keyla. blue1@gmail.com
- Upload your screens to Marvel App.
- Include your Marvel app URL as a text file in your final submission. Label it “MarvelApp URL”.
Final Deliverables
When you have finished your work, create an archive to include the following:
- All original source files(created files in Adobe Photoshop, Adobe XD, Sketch and Figma.) added to an archived named source.zip
- All submission files (JPG, PNG) added to an archive submission.zip
- Any note files you might have such as declaration of images, fonts and Marvel link
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.