Challenge Summary
Welcome to Ohio Deferred Compensation - Responsive Website Part 2 - Design Challenge. We recently completed the initial design direction for this web application, in this challenge, we are looking to continue and design rest of the screens based on the provided wireframes.
About this application:
The client is looking to modernize an existing legacy web site for the public sector employees to manage their retirement funds. We are looking for your help to create a best in class user experience design that follows our clients corporate branding which is responsive and intuitive.
As this is a responsive web application, you need to consider responsiveness while designing your screens. In this challenge, you will be designing only the desktop screens.
Really excited to see your designs for this challenge!
Round 1
Submit your initial designs for Checkpoint Feedback
01 File Manager
02 My Profile
You must upload your submission to MarvelApp so we can provide direct feedback on your designs.
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required designs with all Checkpoint Feedback implemented.
01 File Manager
02 My Profile
03 Account
04 Account Summary
You must upload your submission to MarvelApp, for the final submission - you can reuse the prototype that you shared for checkpoint
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The main focus on this requirement is that it shall be designed taking into consideration that it shall support modern browsers and multiple devices across multiple operating systems. We are looking for your help to improve the overall flow and user experience of this application.
Design Considerations:
- This will be a responsive web application.
- We are supplying the wireframes for your reference but please make sure you DO NOT COPY them exactly - as we want to improve / looking for better user experience, layouts, etc!
- Please make sure to follow the provided branding guidelines.
- Desktop view: Design for desktop display 1366px and height as required.
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
1.4.1 Use of Color
Level A: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
The following link provides an easier to understand guide for general purpose: https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=221#principle1
- Due to ADA compliance, please make sure there are no pop-ups in your designs...please have all pages as individual/ separate screens.
- Make sure your design consider responsiveness and will look good on both tablet and mobiles.
- Feel free to suggest you thoughts that can bring good User Experience for this application.
Challenge Assets:
Please find the - Wireframes, Branding Guidelines and Design from previous challenge:
https://drive.google.com/drive/folders/0B2MK5NncVSuQbHRmQk44TmFEbHc?usp=sharing
Branding Guidelines:
- We have supplied the branding guidelines “Ohio DC Style Guide 10.14.2015.pdf”, please make sure to follow that. There are a few design general guidelines we would need them to take in consideration as follows:
- Follow “Our Name” section standards
- Follow “Logo-Acceptable” Use standards
- IMPORTANT: Follow the appropriate colors that were used in the provided designs - if you adding any new colors then please follow Color Pallette Standards as mentioned below:
- - - - - Use the colors that are mentioned in the Section: Ohio DC has a primary and secondary color palette in its publications and other materials.
- - - - - The main color of PMS 485 must be showcased primarily throughout the publication.
- - - - - Secondary is PMS 136. Other colors may be used sparingly
- - - - - Use Gotham Section for font standards
- All of the Labels must follow “Title Case” approach Example “Account Summary”. Following are the exceptions. “SMarT Plan”, “SSN”, “DOB”
- Footer : All Capital letters
Required Screens:
Below are the list of screens required for this challenge
A. Participant:
01 File Manager:
Reference: participant_-_file_manager.html
- This page shows the list of uploaded files.
- Provide options to download or delete the file
- Deleting the file should ask for the confirmation, do you think it would be good to provide a way to bulk delete the files?
- Provide an option to upload the file.
Upload File:
- Think on how to show this experience / screen.
- Please include all the necessary fields as shown in the wireframes
- Would be good to show an indicator for file upload progress
- Do you think drag & drop feature would be good here?
02 My Profile:
- This screen will have 3 main tabs as a part of the navigation, think on how to include them in your designs
Personal Information:
Reference: participant_-_personal_info.html
- Please include all the fields as shown in wireframes
- Should have the ability to edit the overall information, also should ability to edit phone numbers or email address separately.
- Edit Personal Information: Show how this screen will look like.
- After updating and saving, user will go through the multi-factor authentication through mobile or email, they will receive a code in mail or phone as requested by the user and then after
entering the code ..the updates done to profile is accepted
Login Credentials:
Reference: participant_-_account_info.html
- User will be able to view their username and password (masked as shown in wireframes)
- They will be able to update username as well as the password individually
- Please go through the wireframes and design how edit screen is shown..
- After updating and saving, user will go through the multi-factor authentication through mobile or email, they will receive a code in mail or phone as requested by the user and then after entering the code ..the updates done to the username or password is accepted
- NOTE: User will also have option to “Resend” the code as shown in wireframes.
- Please make sure to capture the entire flow in these screens.
E-Delivery Preferences:
Reference: participant_-_preferences.html
- User will have the ability to choose if they want newletter or not
03 Account:
Statements TAB:
Reference: participant_-_statements.html
- This allows the user to choose a year and view list of quarterly and annual statements
- Should have the ability to view the statements as a PDF
Contributions TAB:
View Contributions:
Reference:participant_-_fund_contributions.html
- This page allows the user to view the fund contributions.
- It shows the current contributions (will have ability to modify it), also the pending contributions (will have ability to modify as well as delete)
Modify Contributions:
Reference: participant_-_change_contributions.html
- Clicking on modify will show the modify screen
- This screen will show the fields as shown in wireframes
- NOTE: When user selects “Dollar or percentage” the last column in the table that changes to amount and percentage. Think on how the user will choose / toggle between dollar and percentage
- In the table with funds, you will also need to include the funds classification values as attached in the screenshot..please include the values (no colors dots required) - in the screenshot percentage and values are interchanged...please make sure to include them in the order as per the table that you have in this page.
- We need to show progress indicators in this page..please see how the progress indicators are shown in the attached designs, make sure to follow the same style.
- You need to include validation error design (please click on “next” and then on “Case 1: Validation Error”, you can note that it shows a message as well as total is highlighted with a red background. (Please be sure to check if the attached design has any error styles if yes then please make sure to follow them.
Transaction History TAB:
Reference: participant_-_change_contributions.html
- This shows the list of transaction history
- Will have the ability to filter and print
- Please capture the filter options / make sure it is of the same style as that of the other filters in the provided design.
04 Account Summary:
- From the Account Summary screen, 1st box > Auto Rebalancing (there could 2 options, Case 1: if Auto-Rebalancing is Enabled and Case 2: If Auto-rebalancing is Disabled...please click on appropriate option to view the below cases)
Case 1: If Auto-Rebalancing is Enabled
Reference: participant_-_view_auto_rebalancing.html
- This page shows the auto rebalancing
- Should allow the user to make changes.
Update Auto Rebalancing:
- Clicking on “make changes” will allow the user to make changes (follow the wireframes)
- In the table with funds, you will also need to include the funds classification values as attached in the screenshot..please include the values (no colors dots required) - in the screenshot just include the percentage and no values are required.
- Provide option to disable
- Should be able to review (2nd step in this process) and accept the changes.
Case 2: If Auto-Rebalancing is Disabled
- This page shows an indication that Auto-rebalancing is disabled and user will have an option to enable it
Enable Auto-Rebalancing:
Reference: participant_-_enable_auto_rebalancing.html
- This is similar to how a user updates auto rebalancing.
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Target Audience:
The web site is used by public sector employees to manage their retirement funds. There are 2 main types of users of the web site:
- Participant (post-login)
- Web User (pre-login)
Participant:
User who enrolled into State’s retirement plan. Can setup online account and manage investments.
Web User (Any web user):
Web User, mostly who is Interested in Retirement Benefits or enrolled participant.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements.
- Note you would need to implement all required functionalities and items as written in the supporting document.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
Stock Artwork:
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-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
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
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.
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.