Challenge Summary
Welcome to Ohio - Deferred Compensation Mobile Design Challenge - Part 2!
Recently we completed the desktop designs and also did mobile designs for some of the desktop screens for the Ohio - Deferred compensation web application.
In this challenge, we are looking for your help to come up with mobile designs for rest of the desktop screens.
Good luck and looking forward to your designs!
Round 1
Submit your initial designs for Checkpoint Feedback
01 My Profile
02 Login Credential
03 E-Delivery Preferences
04 Manage Bank
06 Transaction History
07 Fund Exchange
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 My Profile
02 Login Credential
03 E-Delivery Preferences
04 Manage Bank
05 Account Contribution
06 Transaction History
07 Fund Exchange
08 Withdrawals
09 Create Withdrawal Request
10 Edit Withdrawal Request
11 View Withdrawals
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)
This will be responsive (viewed in browsers), we would like you to think through this and come up with responsive mobile solutions, solutions that would provide a great interface for the mobile viewers.
Challenge Assets:
Please find all required files for this challenge in the forums
IMPORTANT - Responsive Design Guidelines:
- Designs shall not deviate much from the current desktop designs as coding for those designs will use the same design approach and must be designed in a way that no new coding is required for design of mobile/tablet.
- It must follow the responsive design so that UI elements are reused as much as possible between desktop and mobile/tables screens.
Design Considerations:
- Clean, streamlined design and user flow.
- Come up with improvements wherever possible
- As mentioned above, make sure you are following the same design style as that of the provided storyboards as these are just responsive mobile designs
- Follow the size of your designs as 750 x 1334 px (portrait view).
- We are providing mobile screens from the previous challenge, so please make sure you are following them to create designs for this challenge.
- NOTE: In the supplied mobile designs, you can see that not all icons from the desktop designs has been used...also please make sure to follow the iconography as defined in the supplied mobile designs
- Make sure your designs are WGAC 2.0 Level AA compliant. This is a quick reference guide which recommend to include: https://www.w3.org/WAI/WCAG20/quickref/
Required Screens:
Below are the screens to be designed..
01 My Profile:
NOTE: In below screens (17-1-1My-Profile.jpg), it shows only 3 sub-navigations but it needs to be 4...please see 24-1Manage-Bank.jpg and use those as the sub-navigation.
17-1-1My-Profile.jpg
17-1-2My-Profile.jpg
17-1-3My-Profile.jpg
17-1-4My-Profile.jpg
17-1-5My-Profile.jpg
17-1-6My-Profile.jpg
17-1-7My-Profile.jpg
17-1-8My-Profile.jpg
17-1-9My-Profile.jpg
17-1-12My-Profile.jpg
17-1-13My-Profile.jpg
17-1-14My-Profile.jpg
02 Login Credential
17-2-1Login-Credential.jpg
17-2-2Login-Credential.jpg
17-2-3Login-Credential.jpg
17-2-4Login-Credential.jpg
17-2-5Login-Credential.jpg
17-2-6Login-Credential.jpg
17-2-7Login-Credential.jpg
17-2-8Login-Credential.jpg
17-2-9Login-Credential.jpg
17-2-10Login-Credential.jpg
03 E-Delivery Preferences
17-3E-Delivery-Preferences.jpg
04 Manage Bank:
24-1Manage-Bank.jpg
24-2Manage-Bank.jpg
24-3Manage-Bank.jpg
24-4Manage-Bank.jpg
24-5Manage-Bank.jpg
24-6Manage-Bank.jpg
24-7Manage-Bank.jpg
05 Account Contribution:
18-2-1Account_Contribution.jpg
18-2-2Account_Contribution_pending.jpg
18-2-3Account_Contribution_edit.jpg
18-2-4Account_Contribution_error.jpg
18-2-5Account_Contribution_review.jpg
18-2-6Account_Contribution_success.jpg
06 Transaction History:
18-3-1Account_TransactionHistory.jpg
18-3-2Account_TransactionHistory.jpg
07 Fund Exchange:
20-1Account_Fund-Exchange.jpg
20-2Request_Fund-Exchange.jpg
20-3Request_Fund-Exchange.jpg
20-4Request_Fund-Exchange.jpg
20-5Request_Fund-Exchange.jpg
20-6Request_Fund-Exchange.jpg
20-7Request_Fund-Exchange.jpg
20-8Request_Fund-Exchange.jpg
20-9Request_Fund-Exchange.jpg
20-10Request_Fund-Exchange.jpg
08 Withdrawals:
21-1Withdrawals-Landing-Page.jpg
21-2Withdrawals-Landing-Page.jpg
21-3Withdrawals-Landing-Page.jpg
21-4Withdrawals-Landing-Page.jpg
09 Create Withdrawal Request:
22-1Create-Withdrawal-Request.jpg
22-2Create-Withdrawal-Request.jpg
22-3Create-Withdrawal-Request.jpg
22-4Create-Withdrawal-Request.jpg
22-5Create-Withdrawal-Request.jpg
22-6Create-Withdrawal-Request.jpg
22-7Create-Withdrawal-Request.jpg
22-8Create-Withdrawal-Request.jpg
10 Edit Withdrawal Request:
22-9Edit-Withdrawal-Request.jpg
22-10Edit-Withdrawal-Request.jpg
22-11Edit-Withdrawal-Request.jpg
22-12Edit-Withdrawal-Request.jpg
22-13Edit-Withdrawal-Request.jpg
22-14Edit-Withdrawal-Request.jpg
11 View Withdrawals:
23-1View-Withdrawals.jpg
23-2View-Withdrawals.jpg
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the mobile designs
- Overall design and user experience
- Cleanliness of screen design and user flow
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
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 a 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.