Challenge Summary
Welcome to the JUNO ZIO Mobile App Fund Switch UI Design Challenge. In this challenge, we are looking to continue designing the JUNO ZIO mobile application for our multinational insurer client by implementing multi policy switching functionality to the application.
CHALLENGE OBJECTIVES
- To create or modify the UI of 4 screens for a mobile application.
- To provide a seamless flow to complete user goals.
- To keep the existing style of the application.
Round 1
Please provide the following screens for the checkpoint along with your clickable Marvel prototype with hotspots.
- 1. Select Funds to Buy
- 3. Choose Funds to Sell
- 4. Confirm Switching
Round 2
Please provide the following screens with checkpoint feedback incorporated for final review along with your clickable Marvel prototype with hotspots.
- 1. Select Funds to Buy
- 2. Select Switch Type
- 3. Choose Funds to Sell
- 4. Confirm Switching
APPLICATION OVERVIEW
- Juno Group is a leading multi-line insurer that serves its customers on the global and local markets. With about 53,000 employees, it provides a wide range of property and casualty, and life insurance products and operates in more than 210 countries and territories. Juno’s customers include individuals, small businesses, mid-sized and large companies, as well as multinational corporations. JUNO plans to offer a mobile application as part of its IT proposition for individual members of corporate pension plan arrangements. This mobile application will be developed as a hybrid application using flutter.
- The ZIO mobile app provides online plan administration, servicing and tools for corporate pension plan members. We have run a design challenge already with the initial requirements of JUNO, and they came back with additional requirements described in detail below.
- Users of the ZIO app might want to change their investment strategies over time against one or more policies they have within their corporate pension arrangement held with JUNO. In this challenge we are going to create screens for the users to be able to carry out the switching process.
AUDIENCE
Private Access for JUNO Customers.
PERSONA
Name: Jane
Occupation: Marketing Manager at ACME Company
Goals:
- Switch funds in her plan.
Frustrations:
- Not easy to find the new funds as there may be hundreds available.
- Can see existing fund holdings and values but is not able to change them from that screen
Wants:
- Jane would like an easy way to manage the fund switching on the go on her mobile, along with easy fund selection.
USER STORY
Jane has been working for ACME Company for a while and is a member of the ACME Company pension plan which is arranged via JUNO. As a member of the plan she has 3 policies, each policy representing a different contribution type (e.g. Employer, Employee, Bonus Payments). She keeps a close eye on her funds and realised that she’d be better to update the investment strategy of two of the 3 policies. She opens the JUNO ZIO app and opts for fund switching in her plan details. She has four options available to her:
- Change current funds and future contributions
- Change current funds only (future contributions will continue to be invested in her current fund mix)
- Change future contributions only
- Change her existing automated investment strategy or move into an automated investment strategy
She looks at the available funds or automated investment strategies available. She is able to filter the individual funds by Asset Class, Currency, Sector, Fund Code. She adds as many funds as she wishes and sets the percentage of the funds she would like to invest into. If she selects an automated investment strategy it is automatically 100% into one strategy. The next step for Jane is selecting the two policies she would like to change the funds or automated strategy for. Within each policy, she sets the percentage of the funds she would like to sell. She is all set to confirm the switch. After confirming she is able to check the status of the process in the Switching History (which is not in scope).
DESIGN GOALS & PRINCIPLES
- Easy to use interface
- The style should be in line with the existing application
- The user should be able to easily recover from wrong actions
EXPLORATION SCORE
Creativity: 5
1: barely new ideas
10: a utopic product with features not proven to be able to be fully implemented
Aesthetics: 10
1: low-fidelity design, wireframe or plain sketch
10: top-notch finished looking visual design
Exploration: 7
1: strictly follow an existing reference or production guideline
10: open to alternative workflows/features not listed here that would help the overall application
Branding: 10
1: don’t care at all about the branding just functionality
10: without a properly branded product there is no success
GLOSSARY
- Plan: A Plan is the employer sponsored retirement and savings scheme that the individual member belongs to
- Policy: Each member holds one or more individual policies in their name within the plan.
- Funds: A Fund is a way to grow your money by investing in a range of different asset classes and geographic territories. Individual and institutional investors can place money in different types of funds with the goal of earning money.
- Switch (only): If the user wants to change his/her present fund holdings into a new investment strategy, but wants the future contributions to continue to follow the existing investment strategy.
- Redirect (only): If the user wants to change the funds his/her future contributions are invested and leave existing funds invested in the present investment strategy.
- Switch & Redirect: If the user wants to change his/her present fund holdings into a new investment strategy and want future contributions as well to follow this new strategy.
- Automated Investment Strategy: An automated investmnent strategy means that the individual does not need to choose which funds to invest into and when to switch. Instead it automatically switches funds at pre-determined intervals (typically based on the individual’s age). Within the JUNO switch process the members selects a single strategy with no reference to the underlying funds.
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 the screens deliver the same content and allows for the same functionality that is described below and the design is in line with the already existing screens. We have shared screenshots of the existing desktop application, please use it to understand the user tasks and translate the flow to a mobile experience.
The user will have the ability to select one or more policies in his/her plan and have a Switch Funds link to enter to this new flow (this is not in scope of this challenge). The user will need to move through the following screens but we are open suggestions regarding the order in which this will need to happen. Consider adding a progress indicator to let the user know where he is at in the process.
1. Select Funds to Buy
Make sure to provide enough information to the user, so that he/she knows what to do next at all times during the process. Analyse the desktop experience (attached) for more details.
The user is able to see the funds available for that particular policy. The number of funds may be between 2 and 100+.
At any point of the process the user needs to be able to cancel, go back (if applicable) and continue to the next step, given that all the necessary tasks have been done.
2. Select Switch Type
The user can select between 3 types of switching, that are discussed in the glossary:
- Switch only
- Redirect only
- Switch & Redirect
- Automated Investment Strategy
Please provide short descriptions (refer to the attached screenshots) of the four switching types and an ability to clearly select from the four.
3. Choose Funds to Sell
In this step of the process the user is shown all his funds per policy he/she selected to modify. You need to show the number, the type and the currency of the policies, so that the user can easily identify each. For each fund, please show the below fields:
- Fund code
- Fund description
- Fund currency
- Fund value
- Percentage to sell
The user also has a way to opt for selling everything in one step, so he/she doesn’t have to go over all the funds one by one and set those to 100%. For sample data, please refer to the attached screenshots.
N.B. Any switch into an automated investment strategy will automatically cause the sale of 100% of the existing funds within the policy
4. Confirm Switching (this needs to be the final step)
Once the user made all the decisions needed for the switching, the system provides a summary of the switching, that the user has to confirm, or go back if he/she would like to apply any changes. Besides getting the selections confirmed, we would like to show the users the switching timing information, so they are informed early on about what to expect concerning the change. Please refer to the attached screenshots for more information.
If the user confirms the switch, he/she gets prominent feedback about the confirmed transaction, and an ability to print the confirmation and to close the process.
BRANDING GUIDELINES
��� The design should follow the style of the existing application
DESIGN ASSETS
The below items have been attached. This is for reference only. DO NOT COPY
- Screenshots from the existing desktop application
- Existing mobile application
- Branding guidelines
FORM FACTOR
- Mobile - 750 px width
FINAL DELIVERABLES
- All original source files
- Create files in Adobe Photoshop, Adobe Illustrator, Adobe XD, Sketch or Figma.
- All screens in png or jpg format.
- Marvel Prototype
- Upload your screens to Marvel App.
- Send your marvel app request to pere.viktoria@gmail.com
- Include your Marvel app URL as a text file in your final submission. Label it “MarvelApp URL”.
SUBMISSION STRUCTURE
Please follow the below rules regarding the structure and naming when creating your submission!!!- An archive called Source.zip file that includes:
- All original source files created in Adobe Photoshop, Adobe Illustrator, XD, Sketch or Figma placed in a folder called Source.
- An archive called Submission.zip file that includes:
- All your design files in PNG or JPG format in a folder called Submission
- ���A txt called Declarations.txt that includes:
- Any notes about fonts usage, photo and icon declaration and link to your Marvel project.
- ���An image called Preview.jpg of 1024x1024px
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.