Olive - CX Mobile UI Design Challenge

Welcome to “Olive - CX Mobile App Design Challenge”!

In this challenge, we are looking for your help to come up with a design for a brand new mobile app for Olive. Olive (name changed) is a leading group of companies which offers financial services to their users around the globe. The company manages investment assets from equities, fixed income and real estate. In this project, they want your help to design a new mobile app for their customers who are actively monitoring their retirement corpus. 

Note: Olive is the code name we are using for the client name. 

Please read the challenge specifications carefully and let us know if you have any questions in the forums.

 

Challenge Objective

• User interface design
• 10-12 screens
• Mobile App Design

Round 1

Submit your initial designs for checkpoint feedback.

• 02 Home/Landing Screen
• 03 My Account flow
• 04 Products Page flow

As part of your checkpoint submission, upload your designs into MarvelApp prototype so we can provide direct feedback on your designs. Please include the MarvelApp Prototype URL in your notes.txt. Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your final designs for checkpoint feedback.

• 01 Login flow
• 02 Home/Landing Screen
• 03 My Account flow
• 04 Products Page flow
• 05 Documents
• 06 Notifications

As part of your final submission, you must replace your checkpoint submission with the final submission into MarvelApp prototype so we can provide direct feedback on your designs. Please include the MarvelApp Prototype URL in your notes.txt. Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Project Overview

• CX Mobile app is a new app offering by Olive, who offers financial services to their customers.
• We are looking for your help to design screens for the mobile app from scratch, based on the requirements in this challenge.
• The app is envisioned as a cross-platform app, and will be implemented in React Native and deployed on iOS and Android Platforms.
• The app will serve as a central touch point to view and manage their savings/investments within multiple sub-accounts, in particular to those who are planning for their retirement.

 

User Story

Caleb has been working as a Operations Manager for last ten years in a large multi-national firm in the capital. He is in his late 40s and have always believed in the importance of planned investments. He learns about Olive which can allow him to bring all his investments to one place. 

Caleb is excited that he will no longer need to manually keep track of his multiple investments at different places. Caleb learns about Olive app. After identifying one of the Olive’s product, he signs up for it.

In Olive app, he is able to monitor and understand ways in which he can achieves his retirement goals earlier with funds that are also sustainable and ESG compliant. And has a help from a dedicated adviser who always stay in touch virtually.

 

Workflow

Please make sure your design incorporates the elements from this workflow. We are open to modifications in this workflow to create a better user experience.

Step 1: The user launches the app and logins into the app preferably through biometric ID. Users will have the choice of registering face/touch based biometric ID after registering and using the app for the first time. And also from “My Account” within the app.

Step 2: Users land on the home screen and view their account details including total account value, growth percentage, sub-accounts, recent and upcoming transactions summary. Users can also find details of the adviser assigned to them, and contact them if needed.

Step 3: User taps one of the sub-account and checks the constituent funds with the amount invested, and how it is performing.

Step 4: User further looks at the details of their investment within a fund through a visual chart.

Step 5: User comes back to the home screen and moves to the Documents tab to see their financial documents saved in their account. Documents page to contain an external link where they can see their documents.

Step 6: User receives notifications from the app and they access it in the notification center.

Step 7: User accesses My account to view or edit information related to their account.

Note: We are open to optimising the above workflow to provide better user experience.
 

Glossary

• Customer: A person who has registered for investment management services with Olive.
• Product: A user registers to become a customer with Olive by purchasing one of their instrument products, is assigned a “Account”.
• Account: An “Account” is like a master folder for keeping track of all their past and future investments. The customer can map several sub-accounts with the newly created “Account”.
• Sub Account: An “Account” may contain several sub-accounts. It could be an existing bank/investment account or a new sub-account that they create within their main account. To give you an idea, sub-accounts could be Savings or Pension account.
• Funds: Each sub-account may have one or more funds in it. A fund is an investment scheme/instrument offered by investment professionals that invests your money into equity, debt or real-estate. 

 

 

Audience

• Olive customers: new and existing
• People actively planning for their retirement savings

 

 

Screen/Features

Please make sure your design includes the following screens:

01 Login flow

• We want this screen to be minimal and functional. 
• We prefer to have biometric ID as the default login method, and manual login for users who may not have enabled biometric ID to login.
• Manual Login needs to have following:
  • Username
  • Password
  • 6 digit secret pin/code
• The screen should also show links to: 
  • Forget password
  • Create new account
• Research about best practices of Login flow, especially with biometric ID.

02 Home/Landing Screen

• This is the most important screen of this app, and the default landing screen.
• This screen should allow for these elements:
  • Short welcome message to the customer
  • When they last logged in
  • High level product information owned by the user
    • Can include a image thumbnail
    • Product title (70 characters)
    • Product description (250-300 characters)
  • This is a summarised version of what they will see under the Products page.
• Do you have better ideas of how we can integrate the landing and product page?
• How do we show this information visually so it remains very glance-able?
• Screen should also include a persistent navigation/tab bar to move between other screens. Help us identify the tabs and their order in the navigation. 

03 My Account flow

• My Account allows users to view their personal details or app preferences.
• My Account should preferably include a list of sub-screens based on our classification of their information, which is:
  • Personal details (In scope)
  • Contact details (In scope)
  • Bank details (In scope)
  • Account/Security (In scope)
• Personal details page should allow users to view their Personal information like their Title, First and Last name, Gender, DOB, Nationality, Marital status; and Employment information like Employment status, National insurance number and Tax residency.
  • Information on the Personal details page will be read only and can be modified by calling Olive..
• Contact details page should allow users to view their Contact information - Email, Phone numbers, Preferred contact number; and view Contact preferences - SMS/By Post/Secure message.
• Bank details page shows them their bank details - like Account name, number and location. This page will not allow them change their bank details.
• Account/Security page should allow users to view and edit their username, password, pin or change any biometric preferences (FaceID, TouchID).

04 Products Page flow

• Products page allows users to see the product owned by them.
• A product in the context of this app is an investment scheme held by the user.
• We would prefer to have this information presented visually and very glance-able, allowing users to quickly understand how their account is growing its value.
• The product page should show users the details of their product: 
  • Account number
  • Value (Amount of money invested + Gains/Loss)
  • Valuation wording: “This valuation was last calculated on dd/mm/yyyy, it's not guaranteed and can change. It also does not include any pending transactions and is not predicting a future value”
  • High level details of sub-accounts with in this account
    • Name and value of each sub-account. Example: An account may have a Savings sub-account, Income sub-account, etc.
  • High level detail of recent and upcoming transactions (1 each)
  • High level details of the adviser assigned to the user
    • Name, phone number and email address
    • Link to call or find more details
  • Sub-screens: The product page should allow users to view details of their sub-accounts and funds within them.
    • Sub-accounts screen (In scope)
      • Sub account number and its name
      • Value (Amount of money invested + Gains/Loss)
      • High level details of funds with in this sub-account
        • Name and value of each fund
    • Funds screen (In scope)
      • Fund name
      • Value (Amount of money invested + Gains/Loss)
      • A visual chart indicating how they have accumulated value in this fund since they started investing in this.
    • Your adviser screen (Not in scope)
      • Variations
        • When there is no adviser on file, and information on how to find one
        • Or their name, firm and contact details
    • Beneficiaries (Not in scope)
      • View/Edit/Remove/Add beneficiaries who will receive proceedings from their account
    • Transactions (Not in scope)
      • View Future and Past transaction
      • Filter/sort transactions
• This flow is second most important after the landing page. We want to see your ideas in simplifying this flow and how you incorporate visual charts to provide account details.
• See Glossary to understand the hierarchy between Product, Account, Sub-Account and Funds.

05 Documents

• This page shows details of accessing their financial documents on their account, which is hosted by an external service.
• Needs to have about a paragraph long text and a link to take them to an external link that allows them to see their documents.

06 Notifications

• This screen allows the user to see and read all of the app’s notifications.
• Should notifications be persistent or do they disappear once the user clicks on them? 
• Is the notification necessary to be in the tab bar? And should users be provided options to delete the notifications.

Device Specifications

Please make sure your design supports these form factors:

Mobile portrait 

• Design for iPhone 12 screen resolution: 390 x 844 pt
• Export for native resolution (@3x): 1170 x 2532 px

 

Operating Systems

App will be implemented using React Native and will be deployed as cross-platform app for both Android and iOS.
 

Branding Guidelines

Use the provided branding guidelines posted in the challenge forum.
 

Judging Criteria

Your submission will be judged by:

• Presentation: Provide a thorough solution. It should simulate the workflow described, including linked screens, variations and behaviors of elements.
• Completion: Your solution MUST fulfil all the requirements or equivalent to achieve the given workflow.
• Exploration: Consider the screen requirements and guidelines as a draft or start point. Provide alternate experiences or workflows to achieve what we are proposing in the requirements and satisfy the user goals.
• Aesthetics: Provide production level designs that can be fed into development.
• Branding: Your solution MUST follow the provided brand look and feel.

 

Final Deliverables

• All original source files.
• Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator or as a layered AI file or Sketch or Figma
• MarvelApp Prototype
  • We need you to upload your screens to the Marvel App.
  • Please send your marvel app request in the challenge forum.
  • You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your app prototype, click on share and then copy the link).