Challenge Summary
Welcome to Ohio Deferred Compensation - Responsive Website Design Challenge. In this challenge, we are looking for your help to come up with designs for 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
A. Web User
01 Landing Page - Home Screen
01_1 Enrollment
01_2 Signup for an Online Account
01_3 Retrieve Username / Password
02 About Us
B. Participant:
07 Account Manager
09 Account Summary
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.
A. Web User
01 Landing Page - Home Screen
01_1 Enrollment
01_2 Signup for an Online Account
01_3 Retrieve Username / Password
02 About Us
03 Contact Us
04 Calculators & Tools
04 1 College Funding Calculator
05 Resources
06 Investments
B. Participant:
07 Account Manager
08 Beneficiaries
09 Account Summary
10 SMart Plan
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!
- 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/
- 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
- 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. Web User:
01 Landing Page - Home Screen:
Reference: participant_-_home.html
- This is the landing screen for a web-user (not -logged in users)
- Show us how the main navigation need to look like
- We would like to show a sub-nav or a way to show “contact us” (clicking on this will show a pop-up, think on how to put this up?), “Help” (Clicking on this will show a on page help..looking forward to your thoughts on
to put it up)
- Provide a way for the user to search.
- We need a space for notification that shows a announcements/information about scheduled maintenance, etc (please see above the banner)
- Provide a way for the user to login into app, options to retrieve username / password, they will also have option to sign up for an online account and option to Join as a participant (Join Now button).
- Follow the other sections from the wireframes, think through the layout / responsiveness!
01_1 Enrollment:
Reference: webuser_-_enrollment_step_1.html, webuser_-_enrollment_step_2.html, webuser_-_enrollment_step_3.html, webuser_-_enrollment_step_4.html, webuser_-_enrollment_step_5.html, webuser_-_enrollment_step_6.html, webuser_-_enrollment_step_7.html, webuser_-_enrollment_step_8.html
- This is a eight step process, follow the steps / content from wireframes..we will need your help to come with the design for all the steps and include any interactions in the step (as indicated below)!
- Looking forward to your thoughts on how to show the steps involved in enrollment?
Step 1:
Reference: webuser_-_enrollment_step_1.html,
- Capture the form UI elements, show designs for date picker, Radio buttons, drop-down styles, etc.
- When user clicks on “Select Employer” we have a modal window (within the window, click on search)..please show how this modal window will look like.
- Click on “next” > “Case 1: If existing account is detected”...shows a modal window..show us how this will look like!
Step 6:
Reference: webuser_-_enrollment_step_6.html
- Show how the user can add or remove a beneficiary / follow the content from wireframes.
01_2 Signup for an Online Account:
Reference: webuser_-_sign_up.html
- Follow the wireframes, think on how to show the progress steps!
- In the 2nd step > Click on “Next” > If Invalid Username...show us how the error message can be shown
01_3 Retrieve Username / Password:
Reference: webuser_-_retrieve_password.html
- User will enter their first / last name, DOB, SSN number (last 4 digits)..on entering this will show their username in the next step.
- If user need to change their password, they will be required to authentication via email or mobile by entering the code received to their mobile or email - once this is confirmed, user will be able to enter /choose a
new password.
- Think on how to progress to the user in the retrieving process.
- NOTE: We will need to help information for each of the field.
02 About Us:
Reference: webuser_-_about_us.html
- How do you think this page need to be designed!
- We have 3 tabs in this page, where/how do you think these need to be put up?
- You just need to show the landing page for this page, no need to other tabs.
03 Contact Us:
Reference: webuser_-_contact_us.html
- Grab the contents as in wireframes and show us the best possible layout!
04 Calculators & Tools:
Reference: webuser_-_tools.html
- This page shows list of tools available for the user.
- Looking for a clean, simple interface..
04 1 College Funding Calculator:
Reference: webuser_-_college_funding_calculator.html
- Follow the wireframes for content!
- Please make sure to keep these progress bar / step indicator consistent with other pages.
05 Resources:Reference: webuser_-_resources.html
- In this section, we have 3 tabs..we are looking for you to show “Video & webinars” tab to be designed.
- Think through the layout for this page, we need to show videos that have been uploaded in the past and organized by year.
- Feel free to expand on the concept shown in the wireframe to give a better design
06 Investments:
Reference: webuser_-_investments.html
- In this page, we will have 3 tabs..looking for you to design couple of tabs:
- - - Fund Profile & Prospectuses:
- - - Fund Performance
B. Participant:
07 Account Manager
Reference: participant_-_account_manager.html
- This is the landing page for the account manager user.
- Clicking on “View Account Number” drop-down will show a pop-up with a list of accounts, think on how to design this!
08 Beneficiaries:
Reference: participant_-_beneficiaries.html
- This page shows the list of beneficiaries, come up with the best design / arrangement!
- User will have option to modify all of them.
09 Account Summary:
Reference: participant_-_account_summary.html
- This is one of the important pages of the application.
- Think through the user experience on what a user need to see..wireframe contains/shows most of the information that have a good placement.
- Fund Allocation: This will show 2 tabs...please show both!
- Account Value over time: This will allow user to choose a period for which they need to see the graph.
- NOTE: We will have the tooltip help for certain fields / sections (hover over question mark icon) as shown in the wireframe, we are looking for ideas on this - so that it is also responsive in mobile and tablet devices
and also WCAG level AA Compliant!
- Provide option to print.
10 SMart Plan:
Reference: participant_-_view_smart_plan.html
- User arrives in the SMart page by clicking on “View” shown corresponding to “SMarT Plan” in Account Number section in “account summary page”. You are shown 2 options, please look to show your designs for both options
Case 1: If the user is already enrolled
- Clicking on case 1, we show this page
- Follow the content from wireframes
- User will have option to make changes to the deferral amount.
Making Changes to SMart Plan
Reference: participant_-_update_smart_plan.html
- User will be able to choose/change the deferral amount from a drop and also set the starting month and year.
- They will have option to suspend, clicking on it will ask for a confirmation to suspend within a modal window / show us how this will look like.
Case 2: If the user is NOT enrolled
- Clicking on case 2, we show a page similar to View smart plan but user will have option to “Enroll into a SMart Plan”
- Clicking on Enroll into a SMart Plan will show participant_-_enroll_smart_plan.html, which is same as that of an update smart plan > next step we show a review screen with the details selected and user will be required to agree to the terms
- Clicking on “Save” shows a success screen
- Think on how to design the entire flow!
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
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.