Challenge Summary
Welcome to the Dragonet CRMNet Tool Design Challenge! In this challenge we want to redesign an existing CRM web application to have a more modern look and feel. The current application is pretty old and we’re looking to your creativity to make it look fresh, but keeping the functionality aspect first in mind.
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.
Challenge Objectives
The scope of this challenge is to do a face-lift for the current web application which is used as a CRM application to manage different tasks.
- User interface design
- 12 screens
- Desktop application
Round 1
Submit your initial design for a Checkpoint Feedback- Tasks in Process
- Task Details
- Forward
- Search Requests
- Standard Reports
- Search Client
Round 2
Submit your Final Design plus Checkpoint Updates:- Tasks in Process
- Task Details
- Forward
- Search Requests
- Standard Reports
- Search Client
- Client Details
- Settings
- Support (for Carat App)
- Manage Deputies
- Deputies Settings Modal
- Authorization
Project Background
- Our customer is working in the financial industry and this application is a CRM (Customer Relationship Management) tool
- The application is an internal one used by Dragonet for monitoring different applications which will send the tasks to OBPM
- The application has different user roles and layout should adapt the content to fit those
For the scope of this challenge we are going to provide screenshots of the existing pages that we would like to be redesigned. We need to keep the same functionality and workflow, just come up with a modern, functional UI. The application is large, but we won’t redesign it entirely – we will focus only on specific screens.
Note: although this is a redesign of the existing application, we are looking for your ideas on how to improve the user experience. Our customer is not expecting to use the same layout as now so they are encouraging to try new layout approaches to make the application easier to use.
Glossary
- OBPM: Oracle Business Process Management: is a complete set of tools for creating, executing, and optimizing business processes. The suite enables unparalleled collaboration between business and IT to automate and optimize business processes.
- CRM: Customer Relationship Management: is an approach to manage a company's interaction with current and potential customers. It uses data analysis about customers' history with a company to improve business relationships with customers, specifically focusing on customer retention and ultimately driving sales growth.
- Deputy: think of it as assistant who is replacing a person
SCREENS
All screens refered bellow can be downloaded from here.
1. Tasks in Process
Current page: Tasks in Process.png
This page is displaying which tasks are active and are assigned to the user. The task list is taken from OBPM services.
The page includes the following elements:
- Logo + “Carat CRMNet”
- Primary navigation (this navigation will have another 1-3 elements for admin so keep that in mind when planning the design)
- Secondary navigation: Tasks list, Search requests
- Tertiary navigation (Long off, Links, Languages, etc.); Note: “ZZ-eGRIS-3RDLevel-02 Test” is the username here
- The left menu: this shows my current tasks list and below all my deputies' names – in the redesign we would like to introduce a small profile photo of users before the name. The user can click on any deputy to see his/her task list.
- Main area: displays 2 tabs for: unassigned tasks, tasks in process and passive tasks. With tasks in process being active we are showing a table for that data.
- Table info: overall functions - the user is able to refresh the table, sort it and filter it / search to find specific tasks. We wish to have one filter textbox for all columns. (note: you can ignore the green mark for some rows/ treat them as regular)
- Pagination: right now the table has several pages, but we want to update to have infinite scrolling so as the user scrolls down more entries will be loaded.
- The first column is missing – but is showing a file icon, which in the current version is used for adding a comment to that row
- The plus icon refers to showing the page details and the “calendar” icon is used for going to the application (will open a new tab in the browser – out of scope for the challenge)
- The second column CSID/ CIF which is hidden here, should show some ID numbers in this format “3605881 0451-9668743-2”
- Footer: this screenshot is showing the entire footer, please redesign and use it for all pages
2.Task Details
Current page: Task Details.png
When the user clicks on the + icon from previous page he gets to see the details for that particular task.
Note: in this screenshots, the details are shown for one of the deputies “Friederike Butina”, but you can show the details for one of the current user’ tasks (have the “My task list” item selected on the left menu) to have a workflow continuance.
3.Forward
Current page: Assign.png and Forward.png
The Forward option can be used to select multiple tasks or a single task to assign it to a different user or to a group. Here we can have some additional functionality to display the same department users and deputy users so that instead of searching the user can directly forward to another user of the same department.
The user gets to the Assign page by pressing Forward from Tasks in Process page. Here he can search for a particular user or group (eg. name “STOC 111 Credit Operations Aarau”) to assign that task. On Forward page, you can see how a person was selected to forward the task.
4.Search Requests
Current page: Search Requests.png
A request is a business transaction that has different details to be searched by details such as client, ID, and with who is in process. The user can perform a search operation using the Search button which will display the tasks below in the table in the same screen.
5.Standard Reports
Current page: Standard Reports.png
This page consists of a list of standard individual reports, which are external links. They are only available for CARAT application, not eGRIS.
6.Search Client
Current page: Search Client.png
This page is used for performing a specific search for a client and his tasks. Once the search fields are completed and the user presses the search button, the requested table is displayed below.
The 4 icons in the Result table row show from left to right: Start Carat PC Application Realestate Mortage, Starts Carat PC lombard, Starts Carat CC and See Certifications – which are all opening different external applications.
7.Client Details
Current page: Client Details.png
The user gets to this page by clicking one of the entries resulting from the previous search page. It shows the details of a customer as well as related applications that he is using (links to them).
8.Settings
Current page: Settings.png
The user gets to this page by clicking Settings on the top right of the page.
- In the first section of the settings, the user is able to change his start page.
- In the second section of the settings are the sorting criteria’s of all the task lists this can also be implemented directly at the page of the task, for example by clicking on the header cell of the column.
- The third section is grouping the user can choose whether the columns CSID / GROUP Id should be displayed in one column or in separate ones, in the last section the user can enable E-mail notifications whenever a new tasks comes from eGRIS. The default option resets the settings to default, the save option saves the changed settings.
9.Support Carat
Current page: Support.png
It is used for performing specific searches for tasks by support users. Here we have 5 tabs more or less similar except the services used to perform search and bring the task back.
Show us how opening the calendar popup will look like as well.
10.Manage Deputies
Current page: Manage deputies.png
In the Manage Deputies page the user is able to manage his deputies and the user he is deputy from.
In the Map User section the user is able to search for a user and see his deputies / the people he is a deputy from.
In the Deputy of section the user can see the list of deputies of the current searched user (default: actual user) and edit the from / to date as well as removing him.
In the section is Deputy of are all Users listed with the actual user is deputy of, this list can’t be edited.
In the last section the user is able to search for a user and authorize him for accessing CARAT or eGRIS, for doing so a popup will show up and the user is able to select from / to the date of the access by Application.
When the user presses Edit for one of the rows on first tables he will get to Deputies Settings Modal (as below).
11.Deputies Settings Modal
Current page: Deputies Settings Modal.png
Here, the user can change how long an employee can use the applications CARAT or eGRIS.
12.Authorization
Current page: Authorization.png
The authorization page contains a list of all rights the user has in CRMNet, this list can be exported to either an excel document or pdf .
Web application (laptop size): width: 1366px x height as much as needed
Target Audience
Credit specialist and Client adviser and Relationship manager.
Branding Guidelines
Branding guidelines can be found here
Take a close look at the colors listed there but especially the Dragonet Component Style.pdf to get an idea how to style your design.
For fonts, the customer has a custom font type which we don't have now, but you can use something simple like Arial or Helvetica instead of it.
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.