BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to "GOVT - Integrated Portal Web App Design Challenge". In this challenge, we need you to create the best UI/UX for the California Statewide Automated Welfare System (CalSAWS) system that will be used by the residents of all Govt counties via web/desktop device.

We are running two parallel challenges for this GOVT system, please also take a look at our mobile challenge and join the challenge if you are interested.

Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!

Round 1

Submit your initial design for a Checkpoint Feedback
  • As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt. 
  • Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final Design plus Checkpoint Updates
  • As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
  • Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
  • If you’re not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

BACKGROUND OVERVIEW
  • We are in need to create a single Portal that works for both Web and Mobile devices called California Statewide Automated Welfare System (CalSAWS) 
  • This system will be used by the residents of all Govt Counties and will integrate seamlessly with the Govt system 
  • The solution will enable the public to securely apply for benefits, report changes, access case information, schedule appointments, access electronic correspondence, submit verifications, as well as support a user-centric / user-friendly experience

DESIGN  CONSIDERATION
  • Simple, clean, and intuitive designs - Provide a seamless and interactive way as well as improvement on how the target audience can use the system easily  
  • Access to an easy way to navigate and an interactive application
  • Focus on Web/Desktop Best practices and follow our Guidelines
  • Needs to be compliant with WCAG guidelines
  • Creativity to identify new and different capabilities that the user may desire beyond the original request
  • Focus on the UI/UX interactions on how this application should work (specifically around all related govt transactions). What should the user see and experience when using the application?

CHALLENGE GOAL
  • The goal of this challenge is to create the best design visualization for the California Statewide Automated Welfare System (CalSAWS) based on screen requirements and use cases provided

CHALLENGE FORUM
SCREEN REQUIREMENTS
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.

01) Home Page
  • Please refer to web-screenshot.pdf page 1
  • Provide an area where user can see the latest public announcements related to all benefits programs
  • Show information about the system capability: 
    • Link to all available benefit programs in this app
    • Information about the details of each benefit program (medical, food, cash, jobs, skills, etc)
  • Learn and Online help in various ways - videos, support team, or AI chatbot?
  • Links and CTA to “create an account” and “sign-in”
  • Main menu and navigation for additional pages (Contact Us, Language, FAQs, etc)

02) My-Benefits Overview Page
  • Please refer to web-screenshot.pdf page 2
  • This page will be available for the user once they are logged in to the system
  • Think of this as a dashboard with all access to the app features and to check user latest status activity in the application
  • Provide an area to show announcement related to the user and benefit programs in this page
  • Show information of “MyBenefits Overview” contains user latest summary information of their benefit application status
  • Ability to set online notices and alerts (so they don’t need to open the web app to check the latest status of their benefit application)
  • Ability to perform a various activity in the system (Upload documents, Report changes or Renew Benefits, View or Continue Application, <county services>)
  • Provide More options area contains links to all features in the system

03) Notification Page
  • No Screenshot - please use your best judgment here
  • This page will display all the notification for a user in a list format like mail inbox. On click of notification item from the list, the notification content will be displayed

04) “Am I Eligible”  - People Information
  • Please refer to web-screenshot.pdf page 3 to 5
  • This page will be available for the user that wants to check their eligibility status to apply for a program available in the system
  • Provide user personal information - page 3
  • If there is anyone living with the user in the same home, the user will need to fill an  additional form and provide information on the persons living with the user (create interactions on how to manage and add information for multiple people living in the same home?) - page 4
  • Provide additional information if the user or person living with the user have some special needs (pregnancy status, disable, etc) - page 5
  • Three screenshots are attached. Create a concise user experience combining the given three pages provided in the screenshot

05) “Am I Eligible”  - Final Summary and Result
  • Please refer to web-screenshot.pdf page 6 to 7 
  • Show the summary preview of all information that is provided by the user - page 6
  • Show the result of the app calculation based on user input from the previous action - provide status for “qualified” and “not qualified”
  • Two screenshots are attached. Create a concise user experience combining the given two pages provided in the screenshot

06) Apply Benefits – Request for Assistance
  • Please refer to web-screenshot.pdf page 8
  • User will arrive here after clicking on “Apply for Benefits” button or links from dashboard
  • Provide a form that shows all programs such as medical, food, or cash that user can apply
  • Provide some brief information about each program, checkbox where user can apply to the program, and link to give the user more information about the program details

07) Apply Benefits – People Information  
  • Please refer to web-screenshot.pdf page 9 to 11
  • Once the user applies for programs, they will need to answer a series of form questions split into 4 sections:
    • People
    • Income
    • Resources
    • Expenses
  • We will only focus on "People" form in this challenge, make sure to check the 3 screenshots attached. It contains all field needed for "people" form, create a concise user experience combining the given three pages.

08) Apply Benefits – Application submitted 
  • Please refer to web-screenshot.pdf page 12
  • This page will appear once the user filled all 4 sections (people, income, resources, and expenses) and hit submit button
  • Show the user benefit application status and information about what’s to do next
  • Ability to print or send email their copy of benefits application status
  • Ability to get information or status to their email address

IMPORTANT
  • Keep things consistent. This means all graphics styles should work together.
  • All of the graphics should have a similar feel and general aesthetic appearance

MARVEL PROTOTYPE
  • We need you to upload your screens to Marvel App.
  • Please send your marvel app request in the challenge forum
  • You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload)
 
BRANDING GUIDELINES
DOCUMENTATION
TARGET DEVICES
  • Web-Based Application
  • Desktop: minimum 1366px Width with Height adjusted accordingly

TARGET AUDIENCES
  • Public Society - Govt Residents

JUDGING CRITERIA
  • Your submission will be judged on the following criteria:
    • The overall idea and execution of concepts
    • How well does your design align with the objectives of the challenge
    • Execution and thoughtfulness put into solving the problem
    • The overall design and user experience
 
SUBMISSION AND 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 image files based on Challenge submission requirements stated above
  • MarvelApp link for review and to provide feedback
 
Source Files
  • All source files of all graphics created in either Adobe Photoshop, Illustrator (Might need to convert it to PSD later), XD, or Sketch and saved as an editable layer
 
FINAL FIXES
  • As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2020 Topcoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • AI files created in Adobe Illustrator or similar
  • Sketch
  • Adobe XD

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30112534