Challenge Summary
Welcome to Ohio Deferred Compensation - Responsive Website Part 3 - Design Challenge. We recently completed the Part 2 design challenge 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
00 Help
01 Account > Fund Exchange
02 Withdrawals Landing Page
03 Create Withdrawal Request
04 View Withdrawals
07 Bank Information
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.
00 Help
01 Account > Fund Exchange
02 Withdrawals Landing Page
03 Create Withdrawal Request
04 View Withdrawals
05 Modify Withdrawals
06 Stop Withdrawal
07 Bank Information
08 Manage Bank
09 Calculator and Tools
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.
Challenge Assets:
Please find the - Wireframes, Branding Guidelines and Design from previous challenge:
https://drive.google.com/open?id=1kgstP-KcJL05SvfJOrgr2lKSWzC91moD
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!
- Desktop view: Design for desktop display 1366px and height as required.
- Please make sure to follow the provided branding guidelines.
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp!
- Your designs must adhere to WGAC AA Compliance, please find the quick reference guide, it is much easier and quicker to understand. NOTE: Only Level A and Level AA must be met: https://www.w3.org/WAI/WCAG20/quickref/. For Example: 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 we will require to remove all popup screens from designs and make it a web page screen or message as part of the same screen where the popup screen was triggered.
- 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.
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. General:
00 Help:
- We don’t have a page for this in the wireframes but would like you to show your thoughts on how a help page would fit this design!
B. Participant:
01 Account > Fund Exchange:
Reference: participant_-_pending_fund_exchange.html
- This shows the list of pending fund exchange.
- Users will have option to modify, delete all and print all options
02 Withdrawals Landing Page:
02 1 No Withdrawal Request:
Reference: managewithdrawals-landing.html:
- This shows the withdrawal landing page with no withdrawal request
02 2 Current Withdrawals and Pending Withdrawals:
- Please include a landing page with just pending withdrawals as shown in managewithdrawals-landing-ncurrent-pending.html
- Also include a page that shows both current and pending withdrawals in the landing page as shown in managewithdrawals-landing-acurrent-apending.html
02 3 Landing page with a withdrawal stopped:
Reference: managewithdrawals-landing-acurrent-apending_-stop.html
- This is same as view with current and pending withdrawals just that pending withdrawal shows an alert with a message “Alert! Withdrawal will be stopped effective from 12/21/2017”
- Think on how to show the alert message.
03 Create Withdrawal Request:
03 1 Select Plan:
Reference: participant_-_select_withdrawal_type.html
- User will need to “Select Withdrawal Type” and based on the option chosen, either of the below pages (onetime payment or ongoing/recurring payment) will be shown.
- Please DO NOT create a modal for this page as we don’t want to use / include modal window in this application / include it as a separate page.
- Please include a progress bar as shown in the previous designs.
03 2 Select Payment Options:
Onetime Payment:
Reference: create_withdrawal-payment_details-onetime.html
- In this page, user will select all the required details as shown in the wireframes
Ongoing/Reccuring Payment:
Reference: create_withdrawal-payment_details-systematic.html
- In this page, user will select all the required details as shown in the wireframes
NOTE: Bank Information in above steps:
Wireframe doesn't show these interactions / buttons in the UI but we need you to include them in the designs.
- User will be choosing the bank information under "Bank Deposit Information" in both the above steps.
- Include "Add a New Bank" under "Bank Deposit Information"
- If a bank doesn't exist, think on how to indicate it to the user and user will click on "add a new bank" to add new bank information (this will take the user to 07 Bank information flow - see below).
- If there are multiple bank then we show a drop-down with multiple bank names for the "Bank Name" field / also we need to provide a way to edit each of the bank names - think on how to show them in your designs!
03 3 Withdrawal Review:
Reference: create_withdrawal-review.html
- Once all the details are entered, user will be reviewing the information that was entered in the previous step, include a design to show how this will look like.
03 4 Verify Identity:
- We already have designs for this, please see the 02-1-13My-Profile.jpg02-1-14My-Profile.jpg in the provided storyboards
- Just include these steps with the progress bar from this flow / you may use icons that were used for these steps in the previous design.
03 5 Confirmation:
Reference: create_withdrawal_-_confirmation.html
- This just shows a confirmation / success message
- Please follow the same designs from the provided designs (02-1-12My-Profile.jpg)
04 View Withdrawals:
04 1 View Pending Withdrawals:
Reference: viewwithdrawal-pending.html
- This shows the details of the pending withdrawal.
- Please include all the details as shown in the wireframe
- In the bottom, we have options to modify, delete withdrawal or can cancel (please change the text of the button to “Back”) to go back to the withdrawals page
04 2 View Pending Withdrawals:
Reference: viewwithdrawal-current.html
- This shows the details of the pending withdrawal.
- Please include all the details as shown in the wireframe.
- In the bottom, we have options to modify, stop withdrawal, remove stop withdrawal or can cancel (please change the text of the button to “Back”) to go back to the withdrawals page
05 Modify Withdrawals:
05 1 Modify Pending Withdrawal:
Reference: modify_withdrawal-pending-systematic.html
- This is modify page for the pending withdrawal page
05 2 Modify Pending Withdrawal:
Reference: modify_withdrawal-current-systematic.html
- This is modify page for the current withdrawal page
05 3 Confirmations:
Reference: create_withdrawal_-_confirmations-various.html
06 Stop Withdrawal:
Reference: stop_withdrawal.html
- This page allows the user to agree to the terms and continue with stopping of withdrawal
06 1 Confirmation:
Reference: Create_withdrawal_-_confirmations-stoped.html
- This shows the confirmation that the withdrawal is stopped.
07 Bank Information:
07 1 No Bank Information available:
Reference: participant-bankinformation-landing-nobankinfo.html
- This shows the landing page for the bank information
- Show us how the page looks like when there are no bank information.
07 2 Bank Information Available
Reference: participant-bankinformation-landing-bankinfoavaila.html
- Show us how the page looks like when there are some bank information.
- NOTE: Only 1 bank information is allowed per user.
07 3 Add New Bank Information
Reference: participant-bankinformation-add.html
- This page allows the user to add new bank information
- Include all the fields / make sure to follow the form designs from provided designs.
- When “Delete” button is clicked, user is directed to landing page with a message “You have successfully deleted Bank Information”, please take a look at current designs to see how you can show this message.
07 4 Edit Bank Information:
Reference: participant-bankinformation-edit.html
- This is same as add bank information, except that all details / fields will be already filled up and will allow the user to edit them.
08 Manage Bank (accesed from my profile):
Navigation update:
- User will be able to “manage bank” information” from “my profile” menu, so please include “Manage Bank” as a sub-menu under “My profile”
08 1 Manage Bank
Reference: Participant_-_bank_information-nobankinfo.html, participant_-_bank_information-available.html, participant_-_bank_information-add.html, participant_-_bank_information-edit.html
- This is same as 07 Bank Information, just that the same information is included under a different menu.
- Just include this as a part of the flow.
B. Web User:
09 Calculator and Tools:
09 1 Asset Allocation Tool:
Reference: participant_-_asset_allocation_tool&c=1.html
- This shows the asset allocation tool.
- Please make sure to include all the 4 steps from the wireframe.
- Follow the same designs from the existing for the progress bar.
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
Supporting Documents:
- Wireframes
- Branding Guidelines
- Designs from previous challenge
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.