Challenge Summary
Welcome to "Global Financial Institution - Crisis Management Platform Responsive Design Challenge". We are looking for your help to create the best look-and-feel for our new Crisis Management Platform application. This application will be used by senior corporate managers that lead a business, operations or technology group of a global financial institution that serves individual customers, businesses, and capital markets clients. These managers need to gather, analyze and decide on prioritized actions in order to prevent and respond to critical enterprise crisis events. We want you to focus on the UI/UX interactions and bringing clean and modern (creative) solutions to how this application should work. What should the user see and experience when using the application?
Round 1
Initial submission for client review:
01. Dashboard Screen (for the "Events" box, only the "Timeline View V1" tab is required for Round 1)
02. Event Details Screen
Round 2
All requirements as stated in challenge details with client feedback applied:
01. Dashboard Screen (for the "Events" box, all tabs are required for Round 2)
02. Event Details Screen
Project Overview
A large global financial institution that serves individual customers, businesses, and capital markets seeks to gather, analyze, and decide on prioritized actions in order to prevent and respond to critical enterprise crises. Crisis events could be things like a cyber attack or a large corporate customer going bankrupt. Basically, we're talking about events that span across geographies and/or business lines and have the potential to affect the entire enterprise.
Challenge Goals
We are looking for the best UI/UX that able to notify/alert the user, help the user monitor the events, and visually present solutions and strategies for how to solve them. The user is able to do this through a few key screens and through a series of processes and required functionality. We are looking for you to analyze the problem and propose a solution for what screens are needed and the best way to present the information/ functionality on those screens.
We are looking for the best UI/UX that able to notify/alert the user, help the user monitor the events, and visually present solutions and strategies for how to solve them. The user is able to do this through a few key screens and through a series of processes and required functionality. We are looking for you to analyze the problem and propose a solution for what screens are needed and the best way to present the information/ functionality on those screens.
Event Scenarios:
A global financial institution with consumer, commercial, and capital markets businesses needs a platform that is able to gather and correlate structured (possibly currency exchange rates or portfolio positions) and unstructured data (news articles and sentiment) from internal and external sources. They need to be able to view alerts and triggers, list actions (both completed and suggested) and view/select the tools to accomplish them (plans & Operations Response Document) and view the progress of the modeled results so that executives can make the best informed decisions possible.
A global financial institution with consumer, commercial, and capital markets businesses needs a platform that is able to gather and correlate structured (possibly currency exchange rates or portfolio positions) and unstructured data (news articles and sentiment) from internal and external sources. They need to be able to view alerts and triggers, list actions (both completed and suggested) and view/select the tools to accomplish them (plans & Operations Response Document) and view the progress of the modeled results so that executives can make the best informed decisions possible.
There are 2 critical events scenarios that we've embedded in the previously completed wireframes challenge. How would a application help to predict a scenario, show the correlation between many scenarios, and enable someone to react to a scenario?
Scenario 1: UK withdrawal from the European Union
Potentials effects:
- Rapid devaluation of Pound Sterling (GBP)
- Increased volatility in foreign exchange rates, equities, and related derivatives markets
- Capital flight (people taking money out of a country or financial institution)
- Operations Response Document: Operations Continuation
-- Action: Technology Infrastructure-Increase monitoring levels and reporting frequency for critical infrastructure
-- Action: Technology Infrastructure - Add capacity to systems as required based on results of continued performance monitoring
-- Action: Personnel - Prepare to move project related staff to operational roles
- Operations Response Document: Market Utility Plan
-- Actions: Monitor and manage Market Utility Plan membership / access
-- Capital flight (people taking money out of a country or financial institution)
- Operations Response Document: Monetary Funding & Liquidity Tracking
-- Action: Increase frequency of monitoring of liquidity to intraday
-- Action: Place hold on extending new lines of credit
Scenario 2: ATM Network cyber attack
Potential Effects:
- Reputational impact for the financial institution
- Increased volume of teller requests for cash
- Core system contagion / isolation (action by the FI)
- Increase in credit card usage / utilization
-- Operations Response Document: Communications
-- Action: Issue press release, contact regulators and shareholders
-- Increased volume of teller requests for cash
-- Action: Place limits on cash withdrawals
-- Core system contagion / isolation (action by the FI)
-- Action: Freeze planned release schedules for infrastructure maintenance / upgrades
-- Increase in credit card usage / utilization
Key and Required Features:
- Search (systematic or user initiated)
- Correlation (i.e. how are events connected, actions specific to the actual user)
- Alerting and Notifications
- Scenario Analysis: Allowing the user to analyze the severity of the event/ scenario that they have been alerted.
- Different views/filters for different users (some may be individual customer-centric while other may be concerned with just capital market events).
- Case Management: The app needs to be able to traverse Operations Response Documents and plans and pull back summary of activities and action steps to mitigate the event.
- In other words, the app should have the ability to “Read” Operations Response Documents - pull out actions and add them into decision matrix for the event.
-- For example, if there is an event related to a Liquidity Problem. The app should:
---- 1) Look at plans in Operations Response Document that relate to liquidity events
---- 2) Display a checklist of 10 actions from the Operations Response Documents to mitigate the crisis (the liquidity event in this example)
-- Document Linkage with process support
User Flow :
- View a dashboard
- Drill into areas of interest
- Receive alerts
- Review scenarios with probabilities
- Review list of potential actions and models for effects
- Receive links to relevant documents such as plans & Operations Response Document
Screen Requirements
01. Dashboard Screen
- Wireframe reference "Home"
- Main area where user will be able to see all events around the world and their summary information.
- Dashboard layout will be split into several areas such as:
Header
- Logo of the application (placeholder is fine)
- Main Navigation (Home, Events, History, Settings)
- Notification status
- Profile avatar and Logout Link.
Alerts Ticker
- Needs to be designed in such a way that we are able to attract user attention to see important information on it.
- This area will show the newest event that needs user attention.
- Create Icons to show information urgency (Low, Middle, High)
- This area needs to show several information, such as Events title, Severity status, Time stamp, etc
- Provide two buttons to close the alerts section and to open details of the event.
Events
- In this screen area, user will be able to see any important events around the world along with their status and related sub-events that influenced those events.
- User will be able to see an events in 4 ways (create all views) :
-- Timeline View
-- Map View V1 (Geographic Map)
-- Map View V2 (Grouping Event Map)
-- List View
- For round 1, you just need to provide the "Timeline View V1" design. Just to be clear, "Map View V1, Map View V2, and Business Unit View" tabs are not required for round 1 (this is requirements for round 2).
- Clicking circle item with border in the map will trigger popup that show summary of the event condition (make sure to create these pop ups in each view)
- There is a settings button for this area that provides two menus "View Details" and "Customize Visibility", clicking "Customize Visibility" will trigger a popup (create it).
Alerts
- This area will listing all alerts that happen in the apps and needs user attention
- In each list, there are several popup interactions that needs to be created, which are:
-- Escalate to Crisis team
-- Custom Escalate
-- Assess Severity
-- Customize Automatic Escalation
Event Lists
- This area will listing all events in timeline manner.
- User can add new event in this area (create the new event popup)
- User will be able to filter the content in this area
- List of event will contains summary information only, to see more information details they need to go to event details screen.
General Stats
- Show all Summary data information via Chart and Graph.
- This area will show how many active event, potential event and other information in numbers.
News
- This area will show feed summary from trusted news site related to events that current occurs.
- The feed content needs to show at least News title, News Source and the news highlight paragraphs.
Tags
- This area purpose is to follow tweet tags that currently trending.
- User can create events based on currently trending tag from social media.
- Please create the popup to create event from trending tag.
Past Event
- Listing all past events that affect the company.
- Show summary of information in each list such as Event Title, Severity, Response Time, and Financial Lose
Exchange Rate
- Show dynamic chart that showing the change of foreign exchange rate reported to US dollar.
02. Event Details Screen
- Wireframe reference "Details"
- In this screen, user will be able to drilled down more information about particular event from the dashboard.
- This screen will provide full information along with any proper action that user can do to manage the crises.
- User can import datas from external source to this detail screen (from excel, pdf, database, etc for supporting information)
- This screen is also split into several areas, such as:
Details Information
There are two tabs in this area, which are :
- Event Details
---- Show all details information regarding the event such as :
---- Event Status (active for xx hours)
---- Severity
---- Event Type
---- Escalation status
---- Event description
---- List of Potential Impact
---- Media Report
---- Assess Severity
- SubEvents
-- List and show all smaller events that influenced the main event
Potential Decisions
- Show all interactions users can do to manage the event crises that potentially impact the company
- Monitor Crisis, click the checkbox will open delegation form to assign people to monitor the crisis status.
- Take Action, All potential actions that the company can do to manage the crises. Each list contains different action form and needs to be created.
Team Progress
- Show all team member progress from the take action form in the gantt chart.
Supporting Documents
- Listing recent supporting documents along with their chart preview.
Assigned Staff
- Show all staff being assigned to manage this event crisis and their work task along with the task progress.
Decision Matrix
- List all matrix status that already finished or currently on progress or pending.
IMPORTANT
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
Design Considerations:
- The interface needs to be clean, modern, easy and intuitive to navigate.
- Ideally the focus should be a fluid user experience starting from the dashboard screen to the detailed action page.
- Focus on the design being a great user experience, think simple but effective solutions!
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- How quickly could you find information?
Create it as responsive design :
Desktop will be the primary target device, but please consider this app will be responsive in the future and design elements should be easily translate to working on different device sizes (i.e. mobile) in the future.
- Desktop - 1280px (height can expand as needed)
Branding Guidelines :
- No branding guidelines are being provided at this time.
Documentation :
- Wireframes
Target Audience
- Senior corporate managers that lead a business, operations or technology group (and thus need to react to an event that negatively affect the group they manage)
Judging Criteria
- The overall functionality of your concepts - how well do your ideas work as a crisis management apps. We are looking for an app that is easy-to-use
- Your ideas and concepts!
- How well does your design align with the objectives of the challenge
- Cleanliness of your graphics and design.
- Overall Design and User Experience.
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.
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 will be asked to update the style tile to reflect any new elements that you have added to the design. You may also 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.