Challenge Summary
Welcome to the Odyssey Open Banking Responsive UI Design Challenge.
In this challenge we are looking into adding a new service to the Odyssey online banking services for which we have created user interfaces over a series of challenges. The new features will enable the end-user to access Odyssey’s account and payments services through third party providers, aka enable open banking for Odyssey customers.
CHALLENGE OBJECTIVES
- To create the UI for 8 unique screens for a web application in desktop format.
- To provide a seamless flow to complete user goals.
- To explore the best way to incorporate the design goals and principles.
Round 1
Please provide the following screens for checkpoint along with your clickable Marvel prototype with hotspots.- 1. Account Consent for Account Information
- 5. Access Dashboard and Consent Revocation for Account Information
- 7. Multi-authorisation Payments
- 8. Consent for Confirmation of Funds
Round 2
Please provide the following screens with checkpoint feedback incorporated for final review along with your clickable Marvel prototype with hotspots- 1. Account Consent for Account Information
- 2. AIS Access for PSUs from Corporate Entities
- 3. Permission and Data Clusters
- 4. Account Consent for Payment Initiation
- 5. Access Dashboard and Consent Revocation for Account Information
- 6. Access Dashboard and Consent Revocation for Card Based Payment Instruments
- 7. Multi-authorisation Payments
- 8. Consent for Confirmation of Funds
APPLICATION OVERVIEW
Open Banking is the secure way to give providers access to one’s financial information. Odyssey’s customers may use different applications (e.g. other banking applications) that allow them to access their accounts and pay for services through this link. To be able to create this link, there are several steps that need to be followed in a highly secured manner that follow certain standards.
AUDIENCE
Odyssey Bank’s customers
PERSONA
Name: Chris
Occupation: Entrepreneur
Goals:
- Being an entrepreneur, Chris is very busy, so he needs solutions that get his tasks streamlined and make him able to quickly accomplish them.
Frustrations:
- Chris has 4 bank accounts and it annoys him that whenever he wants to access his accounts, he has to log into 4 different accounts.
- Concerned about the security of current solutions.
Wants:
- Wants to use a single (third party) app for managing his bank accounts, and have full control over the third party apps’ access to his accounts and credit cards.
USER STORY
Chris has installed a new banking app that can handle his multiple accounts at different banks and other useful things. This app lets him see his account balances without having to log in to each of them, but for this he needs to give his consent to the third party app to access his account balances. He initiates this from the third party app and gets redirected to Odyssey where he can give his consent. Once it is done he gets redirected to the third party app, and now he is able to see his balance. He can also manage the access he has given to the third party app from within the Odyssey Online Bank app once the links have been established.
DESIGN GOALS & PRINCIPLES
- Odyssey branding should be strictly followed. You have to use the Odyssey logo and name.
- The design should allow for informed decision making: Customer journeys must be intuitive and information must be easily assimilated in order to ensure informed customer decision making.
- The design should allow for simple and easy navigation: There must be no unnecessary steps, delay or friction in the customer journey.
- The design should allow for parity of experience: The experience available to a PSU when authenticating a journey via a TPP should involve no more steps, delay or friction in the customer journey than the equivalent experience they have when interacting directly with their ASPSP.
- The design should allow for familiarity and trust: The customer must only need to use the login credentials provided by the ASPSP.
- At all times users should know:
- Where they are in a specific process (and what they should expect from that process).
- Where they have come from.
- What options, actions or steps they have in front of them (if any).
- The (implicit) consequences of taking those actions or next steps.
- An unambiguous signal, feedback and/or response, once that action is taken.
EXPLORATION SCORE
- Creativity: Conservative; barely new ideas, use what is already proven to work in order to provide a secure, familiar environment.
- Exporation: Restrained; strictly follow the provided screen requirements section and production guidelines.
- Aesthetics: Hi-fidelity design; provide a top-notch finished looking visual design.
- Branding: Strict; carefully follow the provided guidelines and stick to them
GLOSSARY
Glossary of terms and abbreviations can be found in the challenge assets folder, that is shared on the challenge forum.
SCREENS/FEATURES
Please make sure your design includes the following screens/sections. Our client is open to your suggestions about the structure of the screens as long as it aligns with the brand. We have provided wireframes based on open banking standards, which help you understand how the required screens behave in the flow through the journeys. Do not copy the wireframes!
Please note, that as part of the Final Fixes we will require the winner to construct actual flows that include existing authentication screens and the screens that you will design in the challenge.
Please note, that as part of the Final Fixes we will require the winner to construct actual flows that include existing authentication screens and the screens that you will design in the challenge.
1. Account Consent for Account Information - wireframe
From a third party provider (TPP) the customer is being redirected to Odyssey’s consent page. After authentication (which is not in scope) on this page the customer can select to which of their accounts they want to give access to the TPP and give the explicit consent, upon which they will be redirected back to the TPP (not in scope).
2. AIS Access for PSUs from Corporate Entities - wireframe
Similar to the above screen with different copy that includes the company name on whose behalf the user acts.
3. Permission and Data Clusters - sample data
Both the above screens contain a link to let the user check what permissions they grant to the TPPs called ‘Review the data you will be sharing’. Please provide a screen where you include a set of permissions to be shown to the user.
4. Account Consent for Payment Initiation - wireframe
From a third party provider (TPP) the customer is being redirected to Odyssey’s consent page. After authentication (which is not in scope) on this page the customer can select from which of their accounts they want to make the payment for TPP and give the explicit consent, upon which they will be redirected back to the TPP (not in scope).
5. Access Dashboard and Consent Revocation for Account Information - wireframe
The customer can log in to his account on Odyssey’s portal and navigate to this page to check what TPPs they have given access to their account information. If they wish, they can revoke the access per TTP.
6. Access Dashboard and Consent Revocation for Card Based Payment Instruments - wireframe
The customer can log in to his account on Odyssey’s portal and navigate to this page to check what Card Based Payment Instruments they have given access to their cards. If they wish, they can revoke the access per CBPII.
7. Multi-authorisation Payments - wireframe
Some payments have to be confirmed by more users to get the payment authorised. In these cases the user can see the list of the authorizing users and the status of the authorization for each. Also this user can go ahead and authorise the payment.
CBPIIs must have the explicit consent of the customer prior to making Confirmation of Funds requests (to check if the customer has the sufficient amount to make payments) to the Odyssey account prior to responding to the first CBPII Confirmation of Funds request.
In some cases the CoF Access token gets invalidated after the consent has been setup, for example due to suspicion of fraud. In these instances, the PSU will need to be re-authenticated (Re-Authentication of COF Access at the ASPSP). The two screens are similar, but the flow is different in the background.
In some cases the CoF Access token gets invalidated after the consent has been setup, for example due to suspicion of fraud. In these instances, the PSU will need to be re-authenticated (Re-Authentication of COF Access at the ASPSP). The two screens are similar, but the flow is different in the background.
BRANDING GUIDELINES
Follow branding guidelines (attached on the challenge forum)
DESIGN ASSETS
The below items have been attached.
- Glossary
- Branding
- Wireframes
- Existing Odyssey prototype
FORM FACTOR
- Desktop - 1366 px width
STOCK PHOTOS AND ICONS
- Photos: use only free photos from the sites allowed by Topcoder.
- Icons: use only icons that are free (based on Topcoder icons policy) without giving attribution, or create the icons yourself. If the icons are not free, we will require them to be replaced in the final fixes.
- Fonts: use fonts as allowed by Topcoder font policy.
MARVEL PROTOTYPE
We use Marvelapp to showcase your design to our client.
- Ask for a Marvel project on the forum.
- Upload your screens to Marvel, and include hotspots so that the client can see the interactions between your screens
FINAL DELIVERABLES
You have to submit a single zip file that includes the following 4 items:
- Source.zip
- All original source files
- Create files in Adobe Photoshop, Adobe XD, Sketch or Figma.
- Submission.zip
- Your screens exported as PNGs
- Declaration.txt
- A text file that contains all the notes about font usage, photo and icon declarations and your Marvel project URL
- Preview.jpg
- Create a JPG preview file of 1024 x 1024 px
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.