Challenge Summary
Welcome to the "Eniatus Bank Internal Product Dashboard Design Challenge". In this challenge, we are looking for the complete revamp of an existing internal system for our client Eniatus Bank, a leading financial service provider to improve the overall user experience of their users.
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!
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 the following screens for checkpoint feedback• 1. User Dashboard
• 2. Product Dashboard
• 3. Product Summary
• 4. Inquiry Screen (Inquiry Details)
Round 2
Submit your final designs for all the screens with all checkpoint feedback implemented• 1. User Dashboard
• 2. Product Dashboard
• 3. Product Summary
• 4. Inquiry Screen (Inquiry Details)
• 5. Screen Inquiry (Field Inquiry)
• 6. Screen Product Launch (Pending Launch)
• 7. Audit Trail Inquiry
Challenge Objectives
• Develop web based application design based on the input.
• Understand the problem and come up with a great solution.
• 6 desktop screens 1366px width.
Project Background
• Eniatus Bank is a leading financial provider with many branches all over the world. They provide a large range of banking services like credit and debit cards, personal loans, commercial loans, etc.
• One of their services is based on tying up other companies (e.g. online ecommerce stores) to provide various credit card offers to their customers. For instance, you are purchasing some products in an online store. During payment you are informed that one of the banks offer 20% cashback if you use their card but you don’t have that card. The online store gives you an option to apply for that card instantly, so you can get those special offers.
• In order to maintain and track these credit card offer tie ups with other retail stores, online websites, Eniatus Bank has an internal tool, with several screens and flows, the flow of screens starts with user landing on his User Dashboard and then leading to Product Dashboard (these screens are in scope).
• The system is an existing one already, and the client would like to see your creative ideas how the user experience could be enhanced. The app runs in the browser (mainly latest Internet Explorer/Edge or Chrome) and has many functionalities. For this challenge we are going to cover only the Product Launchpad tab of the larger system.
• We are providing limited branding elements, so please use a placeholder logo and also a placeholder for the user and additional navigation items (tabs for the not covered system parts).
User Roles
The system has the 3 following user types:
• Maker: This user is a normal user who will usually create new products through the “Product Launch” function. This involves landing on the Dashboard after login and selecting the option to start a new launch which triggers series (about 9 screens before submission) of the screens with parameter names and values that needs to be added/edited/deleted by this user. Once submitted, this item will wait for the checker user or super user to approve or reject. The status of such requests summarized into User Dashboard screen.
• Checker: This user is like a supervisor to maker who usually validates, approves or rejects the maker’s requests from his queue and once approved, the product specifications will be regularized into the system and removed from the queue. The status of such requests summarized into Product Dashboard screen.
• Super Admin: Usually manages these two users. He will have all the privileges of both users.
• Checker: This user is like a supervisor to maker who usually validates, approves or rejects the maker’s requests from his queue and once approved, the product specifications will be regularized into the system and removed from the queue. The status of such requests summarized into Product Dashboard screen.
• Super Admin: Usually manages these two users. He will have all the privileges of both users.
Screen Requirements
Please create the following screens for this challenge (some content is provided in the resources):
1. User Dashboard
User lands on the User Dashboard Screen and selects a specific product to navigate to respective Product Dashboard.
Client provided a rough sketch of how the current UI could be modified. We can have tabular structure which lists lot of products (30-40 products). Pagination can be applied. Status can be like traffic RAG and description. Cookbook is a link to a respective document (not in scope). Clicking on "+" takes the user to the health chech which is not in scope. Please take the proposed IxD to the next level and suggest the most usable and user friendly ways to navigate throughout the app.
You might want to apply both list and grid views and also implement some KPI metrics on top like % of things which are yet to start, in progress, completed and overdue kind of. We are open to your ideas on Metrics.
2. Product Dashboard
Client provided a rough sketch of how the current UI could be modified. We can have tabular structure which lists lot of products (30-40 products). Pagination can be applied. Status can be like traffic RAG and description. Cookbook is a link to a respective document (not in scope). Clicking on "+" takes the user to the health chech which is not in scope. Please take the proposed IxD to the next level and suggest the most usable and user friendly ways to navigate throughout the app.
You might want to apply both list and grid views and also implement some KPI metrics on top like % of things which are yet to start, in progress, completed and overdue kind of. We are open to your ideas on Metrics.
On the user dashboard there will be 5 columns:
- Product Type: type of product like credit card, debit card, etc.
- ORG: will be organization code with which Eniatus is tied up.
- LOGO: will be type of credit card offers.
- Product Description: explanation of that card.
- Status: will say whether that offer is active, in progress or yet to launch. ARML launch Success means, that offer is active.
In the existing app after selecting product, if we click “+”, it will redirect to that particular product’s summary page. Please come up with the best flow for this interaction.
3. Product summary
- Product Type: type of product like credit card, debit card, etc.
- ORG: will be organization code with which Eniatus is tied up.
- LOGO: will be type of credit card offers.
- Product Description: explanation of that card.
- Status: will say whether that offer is active, in progress or yet to launch. ARML launch Success means, that offer is active.
In the existing app after selecting product, if we click “+”, it will redirect to that particular product’s summary page. Please come up with the best flow for this interaction.
Each summary will have the following columns: System, Category, Unique Key, Created By, Created Date, Authorized by, Authorized Date, Status, Super User Action.
Each Product and offer needs to be configured by various systems and parameters. This will follow the same order as given. Created By is Maker’s User ID, Authorized by is Checker’s User ID. Under each product, there will be a lot of systems and parameters.
Product status will be in green only if all the statuses in product summary table is green. If it is not started, it will be in Progress (yellow). If anything failed, product status will be red. Delete option is enabled only for Super User.
4. Inquiry Screen (Inquiry Details)
Each Product and offer needs to be configured by various systems and parameters. This will follow the same order as given. Created By is Maker’s User ID, Authorized by is Checker’s User ID. Under each product, there will be a lot of systems and parameters.
Product status will be in green only if all the statuses in product summary table is green. If it is not started, it will be in Progress (yellow). If anything failed, product status will be red. Delete option is enabled only for Super User.
If the user clicks on the menu option “Inquiry” (see attached document), he gets to the details page.
Inquiry screen is to fetch some technical data from the internal system. User needs to select Business Unit (e.g. Country), System value and Category. On clicking search, it will display the results. Clear will reset the values given in filters.
Results Table will have 4 tabs in which 1st tab is Acct Valid BC is in scope. Just keep the other tabs as well. Keep the table structure as it is. On clicking AMBS Block Code, it will fetch some values from the backend and display there.
5. Screen Inquiry (Field Inquiry)
Inquiry screen is to fetch some technical data from the internal system. User needs to select Business Unit (e.g. Country), System value and Category. On clicking search, it will display the results. Clear will reset the values given in filters.
Results Table will have 4 tabs in which 1st tab is Acct Valid BC is in scope. Just keep the other tabs as well. Keep the table structure as it is. On clicking AMBS Block Code, it will fetch some values from the backend and display there.
It will be under Application Configuration Setup menu option. It is also used to fetch some data related to maintenance. It will have the following filters. Product -> Each product have a lot of “Systems” associated -> Then category -> Then Subcategory. All these fields are mandatory to select. Then Field ID and Field Name is Optional. After that once we click search, results will be displayed. Clear will reset the search filters.
Columns should be as given on the screenshot. Each column will have functions like Edit, Delete and Authorize. User can also add new record. These options will be available according to user roles: Add/Edit will applicable to Maker, Authorize will be applicable to Checker. All the options available to Super Admin.
6. Screen Product Launch (Pending Launch)
Columns should be as given on the screenshot. Each column will have functions like Edit, Delete and Authorize. User can also add new record. These options will be available according to user roles: Add/Edit will applicable to Maker, Authorize will be applicable to Checker. All the options available to Super Admin.
It will be under Product launch menu option. Functionality of this screen is to find the products which is pending to launch and make it launch or delete. User can select the action and business units. On clicking submit, it will display all the products are pending to launch. Clear will reset the filters and results. On selecting product and clicking “+” will redirect to another page (not in scope) to see details of that product. Delete will delete the product from the list.
7. Audit Trail Inquiry
It will be under Inquiry menu option. It will be similar to previous screen. Once the user selects all the filters and mandatory fields, it should fetch some results. The table might have 30-50 records. Find sample screenshot here. Text fields like LOGO should show auto suggestion while searching. We need these kind of rich user experience throughout the website.
Columns on this page are:
- System
- Category
- Unique Key
- Copy from Key
- Action
- Updated by
- Updated Date
- Authorized By
- Authorized Date
- Comment
Columns on this page are:
- System
- Category
- Unique Key
- Copy from Key
- Action
- Updated by
- Updated Date
- Authorized By
- Authorized Date
- Comment
Resources
• Screenshots and content for the required pages Link
Branding Guidelines
Please consider the below guidelines during your design process:
• Eniatus Bank's brand color scheme is as follows:
• Stock photos and stock icons are allowed from the approved sources.
- Dark blue #112E53
- Light blue #2D6DA9
- Red #EB3223 (use sparingly)
• Typography is opened to designers- Light blue #2D6DA9
- Red #EB3223 (use sparingly)
• Stock photos and stock icons are allowed from the approved sources.
Target Audience
Users of the internal banking application are bank employees ranging from 100-200 people.
Judging Criteria
Your submission will be judged on the following criteria:
Final Deliverables
For submission you have to upload a zip file that contains the following 4 files:
• How well you plan the user experience and capture your ideas visually.
• Defining the details - design needs to compose of well defined discrete functions
• How the user of the system will have an enhanced experience in landing page, navigation to respective dashboard and experience improvements like grouping of certain parameters to ease of navigation, smart controls like textbox letting user get the assisted options, hover on the control to get help in the form of description or image
• Innovation in your concepts through color combinations, dynamic alignment of controls, smart controls, paginations, autosave/save options between multiple screens.
• Cleanliness of your graphics and design.
• Overall design, UI and user experience.
• Consistency across the UX/UI
• Design Explanation Notes (Please submit notes about your approach and design thinking)
• Defining the details - design needs to compose of well defined discrete functions
• How the user of the system will have an enhanced experience in landing page, navigation to respective dashboard and experience improvements like grouping of certain parameters to ease of navigation, smart controls like textbox letting user get the assisted options, hover on the control to get help in the form of description or image
• Innovation in your concepts through color combinations, dynamic alignment of controls, smart controls, paginations, autosave/save options between multiple screens.
• Cleanliness of your graphics and design.
• Overall design, UI and user experience.
• Consistency across the UX/UI
• Design Explanation Notes (Please submit notes about your approach and design thinking)
Final Deliverables
• All original source files.
• Design Explanation Notes (create this as an overlay on your screens for instance)
• Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator, Sketch or Adobe XD
• Marvel prototype
• Design Explanation Notes (create this as an overlay on your screens for instance)
• Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator, Sketch or Adobe XD
• Marvel prototype
Marvel Prototype
We need you to upload your screens to Marvelapp.• Please send your marvel app request to pere.viktoria@gmail.com
• You MUST include your Marvel app URL in your declarations.txt (in your marvel app prototype, click on share and then copy the link).
• You MUST include your Marvel app URL in your declarations.txt (in your marvel app prototype, click on share and then copy the link).
Submission & Source Files
Final Deliverables
For submission you have to upload a zip file that contains the following 4 files:
Source.zip – All original source files.
All source files of all graphics created in either Adobe Photoshop, Illustrator (Might need to be converted to PSD later), XD or Sketch and saved as editable layer
Submission.zip – PNG/JPG files
Submit JPG/PNG image files based on Challenge submission requirements stated above.
preview.png – Your preview image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72 dpi and place a screenshot of your submission within it.
declarations.txt – All your declarations and notes
This file must contain your notes if any, fonts, stock art declarations and your Marvel project URL.
All source files of all graphics created in either Adobe Photoshop, Illustrator (Might need to be converted to PSD later), XD or Sketch and saved as editable layer
Submission.zip – PNG/JPG files
Submit JPG/PNG image files based on Challenge submission requirements stated above.
preview.png – Your preview image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72 dpi and place a screenshot of your submission within it.
declarations.txt – All your declarations and notes
This file must contain your notes if any, fonts, stock art declarations and your Marvel project URL.
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.