Fast Drisk React Redesign Challenge

Welcome to the “Fast Drisk React Redesign Challenge”. 

Our client is a financial service company which is looking for a revamp of the existing Dashboard design for an Event monitoring application for a bank, where the aim is to initiate conversations with their clients when a “Margin Call” needs to be executed. We are looking for a simpler and more accessible layout. The current design problem is the number of steps that users have to go through when creating a call record and the overall structure of the dashboard.

We already have the existing design you can use as your base, but we want a completely new concept, looking for a wow-factor, following the current industry standard.

CHALLENGE OBJECTIVES

• To create a simplified dashboard to manage task and raising alert
• Redesign the current concept, making it visually more attractive and feasible 
• Making the process of creating new margin calls, evaluating and searching more practical.

CHALLENGE TIMELINE
This challenge is being run in a rapid fashion, and has only one round with rolling checkpoint. 

• Submission Start: Friday, 5th June 2020 at 15:00 PM EDT
• Rolling Checkpoint Start: Saturday, 6th June 2020 at  07:30 AM EDT

Our PM and the Design Review Board will be available for giving feedback in a timely manner, so you can improve your design and submit your final solution.

• Submission End: Monday, 8th June 2020 at 05:00 AM EDT

 

 

APPLICATION OVERVIEW

The dRISK application is an event monitoring application for a bank. Agents use the application to initiate conversations with their clients (called Margin Calls) to mitigate risks to the client’s account. 

 

AUDIENCE

Internal financial advisor of a large banking company with average knowledge of computers.

 

PERSONA

Name: Derek

Occupation: Financial Advisor 

Goals: 

• Easily see the information necessary to initiate, conduct, and close what are probably going to be very uncomfortable client calls

Frustrations:

• There is a lot of information on the app that is on different pages, tabs, etc.

• It’s hard to keep track of what he is editing

• He has to keep the margin call record in a separate tab or window while looking for information on the rest of the application

Wants:

• To be quick and efficient on the calls

• A minimum amount of clicking or searching for the information he needs

• Buttery-smooth user experience with nice colours, since his cubicle is sad

 

USER STORY

Derek lands on the dashboard page after logging in. Then they go to their task list view, from which they can see task details. Typically, Derek finds 5-6 tasks assigned to them per day. Under certain scenarios, the user might need to create a Margin Call associated with the task.

Derek sees a task is ‘Red’ and selects the task to review. After reviewing the task, they decide it meets the criteria to initiate a Margin Call. 

Derek clicks ‘raise an alert’ and enters the necessary information to create the call record. ‘Submit’ starts the process. 

The Margin Call record should open in the Margin Call Dashboard. Derek keeps the call record open and is able to navigate around the rest of the application to reference information to conduct the call and advise their client.

When the call is completed, Derek adds details to the necessary closing fields. When they click ‘save’ the margin call is complete and closed. Derek gets up to refill his water bottle before moving on to the next task.

Derek’s supervisor wants to check something on Derek’s access. So Derek clicks on his profile, which pops out on top of the rest of the application. It's important to keep it this way since the user may need to escalate permission to the manager when needed in the middle of the task. Derek’s supervisor gets the info they need and walks away. 

 

DESIGN GOALS & PRINCIPLES

• Easy to use interface

• The style should be suitable for an internal enterprise setting

• An attractive and functional dashboard that user comfortable to use for many hours

    

EXPLORATION SCORE

Creativity: 5

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: 7 

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: 5

1: don’t care at all about the branding just functionality

10: without a properly branded product there is no success

 

GLOSSARY

• Margin Call - A margin call occurs when the value of a margin account falls below the account’s maintenance margin requirement. A margin call is a demand by a brokerage firm to bring the margin account’s balance up to the minimum maintenance margin requirement. To satisfy a margin call, the investor of the margin account must either deposit additional funds, deposit unmargined securities, or sell current positions. You can watch this video to get more insight about margin call.

• Margin Account - A margin account is an account offered by brokerage firms that allow investors to borrow money to buy securities.

 

SCREENS/FEATURES

Please make sure your design includes the following screens/sections. Our client is open to your suggestions about the structure of the screens as long as the screens deliver the same content and allow for the same functionality that is shown on the attached wireframes.

 
1. User Profile 
This section is intended to show basic details about the logged in user and their Role in the application. 

• Current behaviour (popping out over the rest of the app) is the desired behaviour, keep this in your new updated design.

• Current grouping of information is good

• Should be able to see more information in a single view

• Needs to match the rest of the design

• User preferences (out of scope) should be separate

• The section should be accessed when clicking on the user profile icon.        

 
2. Task List

The current task list dashboard, what can we improve from this part? Please note in the actual scenario there will be a lot of tasks so anticipate your design with this in mind, from here the user could create a Margin Call (currently ‘alert’) by clicking “Raise an Alert” on the Task List item. There are mandatory fields they need to fill out in order to start processing the call. The details of creating this margin call will be explained for the next stage of the screen.

• Individual tasks are called ‘Risk Events’

• ‘ED0238756’: Risk event ID

• Users should be able to create a margin call directly from the risk event

 

3. Margin Call (formerly ‘alert’)

Please check the updated form provided, this is the input form we want to update from our current new margin call design. Table 1 is your reference and please check the attributes groups label to determine their grouping, for Vital Info - Task overview these fields are auto-calculated when the user fills out the other fields on the form. 

• User will want to be able to view risk event details while creating the margin call record

• Group inputs by attribute groups (provided) 

• Mandatory for Creation: required and should be ordered first. They are visible when creating and editing a Margin Call, and this group should have visual precedence.

• Mandatory for Closure: required to close the Margin Call. Inputs should be visible when the user opens an existing margin call record. Should have visual precedence.

• Vital Info: Should always be visible to the user when creating and viewing a margin call. 

• Vital Info - Task Overview: Should always be visible when creating a margin call. This information auto-calculates based on inputs and should be in a tabular format. 

• Additional Info: Needs to be quickly available to the user, but it can default to a ‘hidden’ state.

  
4. Margin Call List (currently ‘Alert Dashboard’)

This will be the only search page in the app. Current main issue: Since the margin call details can become long and we don’t have a separate screen per record, a user may scroll down and accidentally click on the next call record, or accidentally start working on a call record that is not the one they intended to work on how we are fixing this?. 
 

• Default view:

  • Record ID – should be alpha-numeric combinations

  • Record Type - margin call, risk event, customer, margin call flag, transaction reference

  • Risk event amount - there will always be an amount associated, but it could be $0

  • Deadline date - n/a is an option

  • Ratio - use 2:1 for them all

  • Comments: Start with the first 25 characters, popover for more

• Click on the arrow next to the record ID should give basic details about the record. Users should be able to edit these details.

  • Details: 

    • Client

    • Deadline date

    • Alert Status

• Should be able to go to record page when the user clicks on the record ID

• ‘Eye’ icon: The columns are customisable and are saved as a user preference, so whenever the user lands on the page the same layout will be shown. Please change the icon to something that makes sense.

• “Show Filters”: User preference above should inform available filters. These filters are temporary.

• Should have an ‘Export’ button/icon

• Should have a search bar

• Record Details (arrow icon)

  • The default state is read-only. There should be an ‘edit’ icon or button to allow for editing. 

 

5. Margin Call Detail Page

This is a continuation after user search from the margin call list. We need a detailed view of the record that comes up in the result. There will be attributes in view mode when the user drills down for the detailed record. These attributes you can find on the attached sheet in Table 2. Please use all the attributes you see in the table in view mode for this page. Then the user can step into edit mode by clicking on the edit button and turning the fields to an editable state.  

 

• Should have Record ID and type at the top of the page.

• Active alert details should be prominently displayed.

• Should be able to see associated customer information. 

• Should be able to see any associated Risk Events or Margin call records.

• Additional information should be available, but towards the bottom of the page.

• Should be easy to get back to the search page.

• This page should be printable.

 

BRANDING GUIDELINES

We are looking for your creativity here, colours and layout that make sense and functional. The dashboard will be packed with a lot of information, so make sure you apply the good usage of colour contrast and readability.

 

DESIGN ASSETS / INPUT DATA

Please check the forum for design assets:

• Current Dashboard Design

• Updated form for the new margin call creation.

 

FORM FACTOR    

• Desktop - 1280px, height as much as needed, please make sure to follow this width requirement.

 

FINAL DELIVERABLES

• All original source files

• Create files in Adobe Photoshop, Adobe XD or Sketch.

• Marvel Prototype - 

  • Upload your screens to Marvel App.

  • Send your marvel app request to seetakaurchamba@yahoo.com

  • Include your Marvel app URL as a text file in your final submission. Label it “MarvelApp URL”.

 

------------------------------------------------------------------------------------------------------------------------

 

SCREEN REQUIREMENTS

Please provide the following screens for the checkpoint along with your clickable Marvel prototype with hotspots.

 

• 1. User Profile

• 2. Task List

• 3. Margin Call

• 4. Margin Call List

  • 4.1 Margin Call List View

  • 4.2 Margin Call Basic Edit

• 5. Margin Call Detail Page View and Edit