Challenge Summary
Welcome to CCV BANK - Customer/Contact Visualizer Responsive Design Challenge.
The goal of this challenge is to design an application that will be used by a financial services company (a bank) to show all of the relationships between their customers and easily find these relationships.
This application need to be responsive and work nicely on mobile and desktop devices. The ultimate goal is the user experience. Feel free to do some research or explore any ideas you have when designing this app.
Round 1
- For round one you must submit at least all the screens mentioned in the spec
- Submit in both mobile and desktop size.
- Feel free to add some pages if you think necessary to show your ideas.
- Add notes about your design to make the client easily review and understand your solution.
Round 2
- All your design screens with the checkpoint feedback implemented.
- Any notes about your design for the client.
Challenge Description:
In this challenge we need your design concepts to build a visualization map to show relationships between all of their customers and the Intersect points.
Here is the scenario:
CCV bank has built a data model to keep track of customers and contact relationships.
Each person account has one primary record and many contact cards related to him.
Each contact card is related to a different Business
The Business related contacts together.
As a user I can search for one specific Contact i.e. Bill Harris,
Bill Harris has multiple contact cards each connected to a different Business
I can click a button to display the “Visualizer” to show related contacts.
Bill Harris is graphically represented on a page. (think hub and spoke as an idea)
Each of Bill’s contact card needs to be represented on this page
Each contact card can be related to other contact cards by business. Please check THIS DOCUMENT to see the illustration.
When I hover over any contact card I would like to see contact detail
If I click away from One Contact to another I want the view to change to show how other contacts are related to this newly selected one.
If I start with Bill Harris and find that Suzie White is related, When I click Suzie White I now see a graphical representation of her related contacts.
Suggested Screens:
1. Visualizer landing page.
- User will see this page upon clicking the Visualizer button from the search page. (You do NOT need to design the search page, assume the button already clicked)
- One prominent contact graphical will be displayed on this page. Use Bull Harris as example for the name.
- There will be some contact cards related to this user that need to be displayed on this page.
- Each contact card can be related to other contact cards by business.
-- We need your ideas or solution on this. There will be a case when some contact have many cards. How do you plan the user experience to handle this case?
2. Contact card details page.
- Upon hovering or clicking any of contact card the details on the card should be displayed.
- contents:
--First name
--Last name
--Company Name
--Phone Number
--Email Address
Please use dummy (lorem ipsum) for texts content for now.
3. App UI interactions
- Please show the UI interactions in your design about the app flow. I.e hovering, tapping, screens transition etc
Screen Size:
- Use standard 320px width for mobile
- Use standard 1024px width for desktop/pc
References & Branding:
Check this document for your reference (DO NOT COPY ANYTHING) and see the branding on the document too.
- Reference and ideas
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.
- Make sure your design is responsive on desktop and mobile devices, please plan a great user experience that works well across all the platform.
Target Audience:
- Financial Service User (i.e Bank customer, etc)
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a responsive design.
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 may 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.