401K - Retirement Plan Hybrid Mobile Apps Design Concept Challenge

Welcome to "401K - Retirement Plan Hybrid Mobile Apps Design Concept Challenge". The purpose of this challenge is to create look and feel for our hybrid mobile application that allows participants/customers of a 401(K) product (retirement Plan) the ability to enroll and access their 401K accounts through their mobile phones. At the end of this challenge, we are looking for a customer friendly, easy-to-use and intuitive designs, leveraging the latest trends in mobile design practices and the ability to captures the requested user interactions needed in the application.

Round 1

00. Navigation Solution
02. Login Screen
03. Participation Enrollment Screen
04. Landing Page Screen
05. Account Balance Screens 

Round 2

00. Navigation Solution
01. Splash Screen
02. Login Screen
03. Participation Enrollment Screen
04. Landing Page Screen
05. Account Balance Screens 
06. Ongoing Contributions Screen
07. Wealth Projection Screen

Project Brief
We want to build a hybrid mobile application (designed to support multiple platform like iOS, Android, etc) that allow participants in our client’s mutual fund product the ability to enroll and access their 401K accounts through their mobile phones.  For this project, the application will be available through iTunes and Google Play stores. For this reason, we require an “application launch” icon. Additionally, we will require an offline mode where data is still available in the application.  We are looking for your creativity and ingenuity to help develop this exciting new app concept! 

Your design should be customer friendly, easy-to-use and intuitive; leveraging the latest trends in mobile design practices. 

Do you know about 401(K) plans? Check the explanation from these links :
- http://en.wikipedia.org/wiki/401(k)
- http://www.401khelpcenter.com/401k_defined.html#.VEd5j2eSxhg

User Story - New User
Eric is a new salesperson at a large company with many great benefits including a 401(K) investment plan.  He hears about the plan in an email from human resources division while on the road. They also give him instruction to register to the plan via a 401K application that available in the apps store. He searches for the application in iTunes and installs the application. After registering and enrolling to 401K plan, Eric feels more confident he knows how he wants to invest but is stumped when he must decide ongoing contribution amounts. He sees the application provides advice about what others investors with retirement age goals of 55 are doing to be on track and quickly is confident that his target should be to contribute between 8-10% of his salary.

Project Goals
Our intent is to provide quick and easy access to key account information while reinforcing/continuing the conversation with the user about their retirement goals.  Ultimately that's what their account is about – saving for retirement.  So whenever possible, that concept should be reinforced as a way to provide guidance on how to maximize their participation.  

For example: 
- When displaying their total account balance, also display their retirement wealth projection to reinforce that their balance today is really about their retirement tomorrow.  
- If the user has actively set a goal with us, the experience will provide status updates on how they are tracking towards that retirement goal.
- When making a contribution election, provide them how much they should be contributing to reach their retirement goal, as a starting point for their change.
- We are hoping to make saving a habit, so anything that makes this app fun and easy to use and reinforce the goal is important.

Suggested Screens :

NOTE: You do not have to exactly follow the screens below, we are including them so you will understand the challenge of an easy tool for investment decisions more clearly. Remember this is a Concept Design challenge where we are looking for a better UX approach to solving the problem.

00. Navigation Solution
- Provides us a clear navigation concept for this application.
- The following information must be accessible from every page in the mobile application:
* Log Out option
* Contact Us View with the following details:
* 1-800-457-1860 (English participant services number)
* 1-800-822-8252 
* chretirement@loremips.com
* Link to the full website
* Privacy Link
* Security Link
- Maybe add those information in a menu if there is enough space there?
- Please design a navigation solution that would be easy/engaging for a the application user!

01. Splash Screen
wireframe references 00 Splash_Page.png
- Create a cool design for the splash screen.
- Create simple logo for this application and put it in this screen.
- Use generic name like “401(K) Retirement Plan” as the application name.
- Loading bar that indicates the application is launching. 
- Explore how this page needs to build/interact!

02. Login Screen
wireframe references 01 Login_Page.png
- Login screen should contain common login form elements such as username, password, sign in button, register button, forgot password link, and contact us section (by phone (in English and Spanish language) and email)
- Login page also needs to display the following links (if you think it fits) : Legal, Privacy and Security, Annuities, Funds, College Savings, Client link placeholder.
- Show us how this screen handle login error condition.
- add application logo to this screen. 
- Think and explore how this page should be create!

03. Participation Enrollment Screen
wireframe references 04 Participation_Enrollment_Page
- This screen will appear after user login to the apps.
- This screen will only appear for all eligible employees/user who have not yet enrolled the 401K plan but already registered to the apps. If user already enrolled, they will not see this screen and being redirect to landing page screen.
- In this screen, user will be asked to select contribution rate and submit their selection to the apps.
- There are two form entry needs to be added in the screens, "Before-Tax Contributions" and "Roth Contributions" (refer to wireframes for form elements).
- Once user finished choose their contribution rate, they should be able to submit the contribution amount, please provide a message to all participants once they finish submitting, maybe a modal window message that confirm data is sent successfully? 
- It is not shown in wireframes, but after user saw the modal window message and close it, user will see to this screen again, but now with a plan limit option appear at the top of the screen.  
- There are 3 plan options for the user in the plan limit :
1. Plan minimum
2. Plan maximum
3. Catch-up provision.  Whether the catch-up applies or not is a plan feature however the amount of the catch-up provision is universal and set each year (along with the IR limits).
- The application will show which plan from the 3 aboves that closely match with user previous selection.
- User can change the % and $ values from "before tax contributions" and "Roth contributions if they think the plan not suited them well. Changin the value will affected the plan limit selection. increase/decrease the value will change their plan limit options.
- User can re-submitted again after they are sure about the plan limit choice or confirm/approved the plan limit.
- Think and explore how this page should be created! 

04. Landing Page Screen
wireframe references 05 Landing_Page_Dashboard.png
- User that already enrolled to the 401K plan will see this page by default after a successful login. 
- This screen will provide user with information about his current enrollment condition status. 
- Needs to have CNNMoney logo in this screen. (logo is attached)
- provides a wealth projection chart that showing goals vs current wealth status.
- Needs to provide details information about user current balance (refer to wireframes for content elements). 
- Click/tap the hamburger menu will open main navigation, it will give user ability to navigate to all other pages.
- Think and explore how this page should be created! 

05. Account Balance Screens :
wireframe references 06A Account_Balance_-_by_money_source.png and 06B Account_Balance_-_by_Risk.png
- User should be able to see his account balance in this application.
- There are two types of account balance information that user can access: By Money Source and By Risk
- check wireframes for the details about form elements needed to be create in your design for each account balance type.
- user should be able to navigate from one account balance type to another easily in the apps.
- For the chart in Risk screen, the application currently use pie chart as solution to show the data, please think of what kind of chart that more suitable for this!
- Make sure use the same colors from your chart/graph for indicators square “Investment by Risk” in the Risk table screen.
- Think and explore how this page should be create! 

06. Ongoing Contributions Screen
wireframe references 07 Ongoing_Contribution_Page.png
- This screen should allow participants/user to change their ongoing contribution amount. 
- User can access this screen via landing page (from main menu) and from the Wealth Projection screen.
- It is very similar to requirements 04 above in terms of applying limits/edits, however excluding the reference to the investment option (plan limit).
- It is not shown in the wireframe, but please add a section to show user full name (First, middle and last name) in this screen.
- It is not shown in the wireframe, but please show user Date of Birth (DOB).
- In this screen, user can see the calculation of their on going contributions and have an ability to edit it.
- by editing the enrollment contribution, the value in bottom content will be change accordingly.
- Needs to provide exit and submit button in this screen.
- Show some error condition when user edit the enrollment values but it exceed his capability or the value is not correct.
- Wireframes should be treated as reference for the content only. Create a clean, elegant, unique design that doesn’t need to stay within the confines of the wireframes 
- Think and explore how this page should be create! 

07. Wealth Projection Screen
wireframe references 08 wealth_projection_page.png
- This screen will show some simulation about user wealth projection and how they can reach their future goals.
- The graph/bar will display wealth projection image/marker (wireframes only show 1 marker right now for "goal") that provides the following details :
* Social Security Benefit (where applicable)               
* Total Contributions and Savings Amount                   
* Goal Amount 
* Gap Amount (where applicable)
* Action Plan (where applicable)
* $50.00 Projection (where applicable)
- Each projection images/marker in graph/bar will have it's own colors.
- Social security benefit image/marker will always shown on the far left of the graph/chart follows by Total contributions and saving.
- gap image/marker will show between "total contribution and saving"  and "goal".
- provides a legend description to each image/marker along with their values (example like, $150,000 for goal, etc).
- User will be able to navigate to ongoing contribution screen by click/tap "change contribution" button.
- monthly/annually projection will show different values, monthly show value for each month while annually show data in a year.
- Wireframes should be treated as reference for the content only. Create a clean, elegant, unique design that doesn’t need to stay within the confines of the wireframes 
- Think and explore how this page should be create! 

Important:
- Keep things consistent. This means all graphic styles should work together.
- We’re only requires 7 screen creations in this challenge (not all wireframes screen is needed).
- DO NOT COPY / SKINNING the wireframes. It should be use only as references. use your creativity and skills to create the perfect UI and UX for the application. 
- All of the graphics should have a similar feel and general aesthetic appearance

Design Guidelines
- Font : Open to designer.
- Colors : Check our branding_guidelines document.
- Orientation : Open to designer. 
- Create it for iPhone 6 device (1334 ×750 px resolution)
- Make sure create all your graphic in 'vector' format (buttons, icons, etc), so when resize for bigger versions, graphic still look sharp!

Design Considerations
- The application should be customer friendly, easy-to-use and intuitive; leveraging the latest trends in mobile design practices.  
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!

Attachment
- wireframes reference.(DO NOT copy the wireframes, use it only as references about content that needs to be create in each screen).
- branding guidelines document.
- Client partner logo that needs to be added in the apps (CNNMoney)

Target Audience
- Retirement Plan participants - usually employees of any medium/large company that have reached age 21 or older.

Judging Criteria
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should be possible to build and make sense as a mobile application
- How easily a user can understand and follow the concepts of investing for retirement with confidence

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 may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.