Challenge Summary
The goal of this project is to provide high-ranking bank employees with a mobile application to lookup, understand, and help customers while interacting in public.
Note: Please do not submit a colored version of wireframes as they are just meant to guide you, outline necessary screens, and further explain the application basics. You are highly encouraged to enhance the wireframes with your own design style / ideas / solutions during this design concepts challenge.
Round 1
Submit your design for a Checkpoint feedback (Registered Members):
0. Navigation.
1. Login Page.
2. Find Customer Page.
3. History Page.
4. Search Results Page.
5. Customer Details Page.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Round 2 Information (Registered Members):
Please submit the following screens, updated with checkpoint feedback, for the final submission
0. Navigation.
1. Login Page.
2. Find Customer Page.
3. History Page.
4. Search Results Page.
5. Customer Details Page.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Description (Registered Members)
Thank you for your registration!
Our Client is building a mobile application that will allow employees--from the CEO to a high ranking individual contributor--to act as bank ambassadors when engaging with customers out in the community. The interactions range from official bank business (such as charity event participation) to chance encounters (like crossing paths at a baseball game). During public customer interactions such as these, the app will be used and should enable employees to do three key things:
1. Find The Customer
o The app will use data from our client’s Customer Master Data Management (MDM) and Customer Relationship Management (CRM) systems to find and identify the customer
2. Know The Customer - “I know you…”
o The app will use data from our client’s MDM and CRM systems to paint a picture of the customer for the employee so they can better understand who they are, what kind of customer they are, and where they might need help
3. Help The Customer - “I can help you…”
o The app should enable the employee to serve the customer in several ways:
§ View customer’s current products, services, or interactions.
§ Connect customers to product and/or service specialists for new needs.
§ Initiate a problem resolution process for customer issues.
We will use Ionic (HTML5/Angular JS), a native-hybrid framework, to build the app. This means it is NOT an adaptive web application. Keep this in mind while designing.
We are looking for the [topcoder] design community to help us explore design concepts and a user interface to optimize the future UX.
Branding Guidelines:
We’ve created a branding and design direction site. This includes downloads for logo, fonts, wireframes, etc. https://projects.invisionapp.com/boards/K79E4YRY2TFD/
Design Concept Goals:
- Allow a bank employee to quickly see a snapshot of a commercial or consumer banking client and understand how he/she utilizes bank services and interacts with the bank.
- Allow the bank employee to access summary level details about the customer's banking activity to further deepen client understanding.
- Provide a mechanism for creating a new opportunity when a customer is interested in adding new products.
- Provide a mechanism for creating a case when the customer is having a problem with the bank or current products.
- Mobile experience needs to be intuitive to encourage broad adoption by employees.
- Presentation of customer overview should balance need to quickly understand a customer with ability to deepen that understanding if needed.
- Application should be built to allow for future expansion for additional functionality and use of insights in future releases.
Target devices:
We are building a hybrid app and targeting our most common resolution.
- Mobile Resolution: 1080px x 1920px at 400dpi (Portrait orientation)
Make sure you create graphics in “vector” format using shape layers and Smart Object, so items remain sharp when/ if they are resized. THIS IS VERY IMPORTANT.
User Flow:
- Maia is a bank employee.
- Maia meets a customer in an event with no prior planning.
- Maia open the ambassador application and searches for the customer by typing his information in data fields or by voice.
- Maia selects the customer from search results list.
- Maia now can view Customer Profile (overview), Accounts, Servicing, and Sales.
- Maia will have the ability to email, call, create a service request, and create a referral
User Flow Notes:
- The Profile dashboard is only representative at the moment and has not been fully vetted by the client. Feel free to suggest different metrics/graphic treatment based on your interpretation of the project goals
-There is no need to build out Transaction Details (accessed by clicking on a specific account). The first version of this app will not go into that amount of detail
Main App Features:
- Finding Customers.
- Knowing Customers.
- Helping Customers.
Required Screens:
0) Navigation:
- How does the user navigate this application?
- Include navigation that you think fits with this application.
- Focus on the priority items and how things should be sized.
1) Login Page:
- Please refer to login.html
- App will automatically pull in Username. The user will still need to enter his/her Password.
Provide design for:
-- Sign in button.
-- Show validation error style.
2) Find Customer Page:
- Please refer to home.html
- User should have the:
-- Ability to locate customers by name, address and phone (by typing or speaking). Note: We are considering the use of geolocation services on the next screen to help filter search results.
- After search is done:
-- Display basic information (name, address and phone number) of customers who meet the criteria. (search_results.html)
-- User can select customer of interest from the match results to learn more. (customer_details.html)
3) History Page:
- Please refer to history.html
- User can see the search history of:
-- Today.
-- Week.
-- Month.
-- All.
- Please follow wireframe note and design the swipe left feature to show:
-- Call Option.
-- Send SMS option.
- Display basic information (name, address and phone number) of customers.
- Display when was the search done.
4) Search Results Page:
- Please refer to search_results.html
- User can filter search results to include customers with a home or business address in a specified radius of the app user’s physical device location. Click anywhere link to see filter slider option.
- Please follow wireframe note and design the swipe left feature to show:
-- Call Option.
-- Send SMS option.
- Display basic information (name, address and phone number) of customers
- Display the customer distance from your location.
- User can update the search by speaking; clicking on microphone icon at the bottom.
5) Customer Details Page - Profile
- Please refer to customer_details.html
- Display customer name at the top.
-- Trend of total available balances over the last year
-- Current Available Balances | Total Number of Utilized Products & Services
-- Better representation of products and services used
- Swiping left and right will display Account, Servicing and Sales screens
-- Make sure you are capturing all included screens and flows as shown in the wireframes
Note: Although it is not necessary or feasible to include all of the following, here is a list of additional services the bank provides. Some may interest a bank employee who is quickly trying to get a feel for a
customer:
Bank
-- Checking
-- Savings
-- Online banking
Borrow
--Auto Loans
-- Home Loans
-- Credit Cards
-- Commercial Leases
Customer Profile:
-- Customer Name.
-- Customer Address.
-- Primary Phone.
Household information:
-- Email.
-- Gender.
-- Date of Birth.
-- Company.
-- Commercial Concentration.
Clicking on Create icon at the bottom will show:
A. Create service request options:
-- Service Type.
-- Title.
-- Details.
Customer details:
-- Name.
-- Phone.
-- Email.
B. Create referrals options:
-- Title.
-- Details.
-- Branch Manager / RM.
Customer details:
-- Name.
-- Phone.
-- Email.
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
Target audience:
- High ranking bank employees and business unit managers. The kind of people who represent a company at sporting events, promotional events, fundraisers and charity functions.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to success - it must help users quickly understand a customer
- Completeness of 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 will be asked to make any additional edits and changes within the scope of this challenge. This is a requirement of the challenge and functions the same as checkpoint feedback. We request that any changes be made within 24-48 hours. Multiple rounds may be necessary.
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.