Challenge Summary
Welcome to the beginning of the Bank Ambassador app! The goal of this application is to provide bank employees with a tool to locate, view and help customers, and to help Bank Ambassadors know their customers more while in the field.
We are looking for wireframe solutions (Axure) based on the requirements below. We’re also looking for the community to come up with interesting ideas for the workflow and we’re absolutely open to creative solutions!
At the end of this wireframe challenge, we should have a complete solution for the user experience and flow of the application.
This application will be wrapped in a security program called a Mobile Device Management System. This system takes care of authentication and authorization, so this app should assume that the user is known and the system and communication is secure (ie: there's no login required).
Round 1
Submit the following screens for checkpoint feedback:
0. Navigation.
1. Find Customer Page.
2. Know Customer Page.
Notes.jpg: Any comments about your design for the Client
Round 2
Please submit the following screens, updated with checkpoint feedback, for the final submission:
0. Navigation.
1. Find Customer Page.
2. Know Customer Page.
3. Help Customer Page.
Notes.jpg: Any comments about your design for the Client.
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 a charity event participant) to chance encounters (like crossing paths at a baseball game). During these public customer interactions, the app should enable employees to do three key things:
-
Find The Customer
-
The app will use data from our client’s Master Data Management (customer) and CRM systems to find and identify the customer
-
-
Know The Customer - “I know you…”
-
The app will use data from our client’s Master Data Management (MDM) and CRM systems to paint a picture of the customer for the employee to better understand who they are, what kind of customer they are and where they might need help
-
-
Help The Customer - “I can help you…”
-
The app should enable the employee to serve the customer in several ways:
- View customer’s current products, services, or interactions.
- Connect customers to our product and/or service specialists for new needs.
- Initiate problem resolution process for customer issues.
-
We will use Ionic (HTML5/Angular JS) to build the mobile framework. This means the app will run natively on the mobile device but we’ll still require web technologies. This means it is NOT an adaptive web application. Keep this in mind while designing.
Wireframe Expectations:
- Produce HTML click-through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The application must be very easy to use and intuitive. Keep this in mind when designing your solution.
- You MUST cover all screens mentioned in required new sections below. If any requirement is missing in final submission the client will not look at it, so make a checklist for the required screens to make sure you’ve designed all of them.
- Please show us your proposal as a movie or series of wireframes that communicate the user’s intended interaction with your proposed solution.
- You MUST use wireframes note pane in every single page you design to explain which items are addressed in that page from the documentation and what things you added/changed/removed. Use the comments to make your idea more clear and help the client give your constructive feedback.
Notes:
- Your wireframe submission needs to be able to drill down for all page/screen flows
- Show your wireframe solution in Portrait View. Use this screen size (375px x 663px)
- Feel free to suggest any tools/function that can create great User Experience for this mobile application.
Wireframe Goals:
- Allow the bank employee to quickly see a commercial or consumer banking client snapshot, showing how they utilize the bank’s services, including: commercial banking, personal banking, online banking, loans, insurance, etc.
- Allow the bank employee to access financial transactional and interaction (ex. call to call center) details about the customer’s banking activity to deepen their understanding as needed.
- Provide a mechanism for creating a new opportunity when a customer is interested in adding new products or services.
- Provide a mechanism for creating a case when the customer is having a problem with the bank or current products or services
- Mobile experience needs to be simple and intuitive to encourage broad adoption by technology savvy, yet non-millennial employees (with a lean towards a more progressive experience design)
- Presentation of customer overview should balance need to quickly understand a customer with the ability to deepen that understanding if needed. Does a dashboard help with the at a glance view? How can a user effectively dive deeper into specific information using his or her mobile smartphone?
- Application needs to be built to allow for future expansion and additional functionality, and use of insights in future releases.
User Flow:
- Maia is a bank employee.
- Maia meets a customer at an event with no prior planning.
- Maia opens the ambassador application and searches for the customer by typing his/her information in data fields or by voice.
- Maia selects the customer from search results list.
- Maia now can view the customer’s profile, servicing information and possible sales opportunities.
- Maia will have the ability to create a service request and/or email the customer a personalized number to call to follow up.
- Maia will have the ability to create a lead/referral and assign to RM/Branch manager for follow up.
Main App Features:
- Finding Customers.
- Knowing Customers.
- Helping Customers.
Suggested Screens:
The suggested screens are listed below. You are also encouraged to suggest screens and features that you think this app should incorporate.
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) Find Customer Page:
- User should have the:
-- Ability to locate customers by name and phone (by typing or speaking). Note: We are considering the use of geolocation services in the future to help narrow search results.
- After search is done:
-- Display basic information (name, address and phone number) of customers who meet the criteria.
-- User can select customer of interest from the match results to know more.
2) Know Customer Page:
For Consumer and Commercial customers, ability to display:
Customer Profile:
- Customer Name.
- Customer Address.
- Primary Phone.
- List of Accounts and/or services utilized
-- Account type (Checking, Savings, Investment)
-- Account balance (US Dollar Amount)
-- Account status (Active, Frozen, Closed)
- Household information
- Commercial concentration (Placeholder Text)
Servicing:
(This is an action history the user has with the bank. Think of normal interactions a banking customer has with a bank.)
- Activity (Digital, Call Center, Branch, Chats and others).
- Accounts and Detail
- Transactions and Detail (Deposit, Withdrawls)
- Payments – Transfers, Bills, Wires, P2P (History, Scheduled).
- Service requests.
- Branch Manager / RM.
Sales:
- Leads / Referrals.
- Opportunities.
- Campaigns.
3) Help Customer Page:
- Ability to create a service request and/or email customer with a personalized number to call to follow up.
- Ability to create a lead/referral and assign to RM/Branch manager for follow up.
Learn Axure:
New to Axure? Here are some quick tutorials to help you get started.
http://www.axure.com/learn
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:
- User Experience of Bank Ambassador App.
- Completeness and accuracy of the wireframes as defined in the spec requirements.
- How well your wireframes provide a consistent user flow and experience.
- Creative interaction 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
Generated HTML files with all the requested contest requirements stated above.
Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all content must be listed and the pages should be linked together to show page flow.
Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.
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.