Illinois.gov
Improving content for a state's website
Issues researched:
Product:
Critical assessment of the website's weaknesses
A revised website with clearer content hierarchy, improved copy, & a more content effective
UX Research:
• Heuristical Analysis, • Open Card Sort, • Problem Statements
Skills used:
UX Design & Writing:
• Proposed Sitemap, • Low & Hi-Fi Wireframes, • Prototype, • Original copy tailored to users
UI Design:
• Imagery & color scheme
The Issue: How to improve Illinois's website
As a proud Illinoisan by birth, I was dismayed to learn that the state's site makes the list for 'worst government websites.' To be fair, it is a confusing site with poor navigation. The headers are vague & link to pages with un-scannable data. The copy in general is vague, confusing, & wordy.
​
Aside from being an eyesoar, the site has a bigger problem: accessibility. Critical resources like financial assistance & job resources are hidden amid gluts of data.
The Research:
Analyzing the website's weaknesses
A word about this research approach:
The website aims to connect all Illinois residents to resources. Because its function is clear & there's no typical user, I didn't try to understand its visitors in depth. Competitive analysis also seemed unnecessary because the site has no competition.
​
Instead, I focused on how the site could be more accessible & navigable by everyone. I analyzed the site's weaknesses by performing a Heuristical Analysis. I then conducted a Card Sorting exercise to suggest a more intuitive copy & hierarchy. My findings are based largely on my own assessment,* not empirical data.** The results are not really 'data driven.'
* Heuristical Analysis involves forming opinions based on direct observation of a product.
** Empirical Research involves forming opinions based on empirical data about how users use a product (with user interviews, surveys, or usability testing).
General website assessment:
When performing a Heuristical Analysis. I looked at • site visibility, • familiarity in jargon, • user ability to navigate, • general consistency, • user error prevention, • recognition vs. recall, • efficiency of use, & • aesthetic, simple design. I derived the following insights:
Navigation is confusing:
The Primary Navigation System is & vague & jumbled: It stores a lot of data, with links to 'data dumps', or pages with lots of conflated services. See Sitemap
The main headers are too vague to direct visitors to specific services: They include, "Government," "Business," "Employment," "Education," "Residents," "Education."
Copy is generic, vague, wordy, or confusing:
Copy for service headings is vague & confusing -sometimes comically so: They include 'Find Road Services' -find them where??, 'Locate Registered Sex Offenders' -who needs a sex offender?
Copy for slogan & tagline is trite: They say, "Welcome to Illinois.gov!" & "Find places to go, things to see. Search through all the different services offered by the various Illinois agencies."
Copy for CTA's is vague & confusing: CTA's include "GO TO SERVICE," "VIEW LIVE VIDEO," etc.
Copy for services is abstruse & confusing: Drivers seeking to renew a license are sent to "Offices of the Secretary of State" - (the DMV)
Problem Statements (PS's):
Understanding visitors' needs
Accessibility is a challenge for this site. Taking into account its resources & diverse audience, I wrote a few PS's to clarify the needs of its visitors.
1. Visitors need to discover available resources (ie, disability benefits, financial aid, etc.) easily because they need them but wouldn’t know to look for them.
2. Visitors need to discover available resources (ie, disability benefits, financial aid, etc.) quickly because they need them but don’t have the time to browse the site.
3. Visitors need to spot clear, engaging headlines because they might benefit from the content -but they'll only read it if it sounds interesting.
Illinois' Sitemap:
Assessing the hierarchy
The current sitemap illustrates the site's 'data dump' effect. It's not scannable & it's difficult to find a resource.
Government
-
Business registration
-
IL business info Corp & LLC’s name search
-
Verify a registered business
-
Become a vendor
-
Certificate of resale Corp & LLC online filings
-
Locate a registered business name​​
Business
-
Prof. License Lookup
-
Employee salary database
-
IL Pin
-
​Find public records
-
Email the goveror
-
Vehicle title & registration
status inquiry -
Estimated Payments
Employment
-
Employment charge of discrimination
-
Pesticide license search
-
Taxpayer answer center
-
Income tax & refund status inquiry
-
Error notice & bill inquiry
-
File income taxes
-
IL income tax filing
-
Tax rate finder
Education
-
Find info on the IL science assessemnt
-
Find info on the every student succeeds act
-
College access & financial aid: workshops & one on one assistance
-
Financial aid: grants & scholarships
-
College IL: 529 prepaid tuition app
Residents
-
Business registration
Watercraft & snowmobile renewal
-
Child support account serv
-
View child support payments
-
Address change for motorists
-
Apply for vehicle title & registration
-
Circuit breaker license plate
Visiting
-
Find competitions entry & results info at the IL state fair
-
Find concerts & entertainment at the IL State Fair
-
Purchase tickets to the IL State Fair
-
Purchase tickets to the DuQuoin State Fair
IL rest areas -
Find current winter road
Open Card Sorting:
Gathering data to inform a better hierarchy
To generate some ideas on content hierarchy, I performed an Open Card Sorting exercise with 3 people. Here's a snapshot of one result.
Some differences emerged among testers. This tester had a misunderstanding of what the DMV offers. He also grouped 'For People with Disabilities' under 'People in Need,' which may be because he didn't realize how diverse the needs of Illinois residents are. But everyone agreed with a taxonomy that centers around the types of resources available to residents.
The Designs:
Brainstorming Ideas
A New Sitemap:
Improving navigation with a new hierarchy
My hierarchy targets the different residents. The two headers (Visitors & Residents) break down into subsets so visitors can find the resources specifically for them.
RESIDENTS
For Families
For Professionals
For People with Disabilities
For Employees
For Job Seekers
For the General Public
-
Our School System
-
Plan Ahead for College
​
-
College Illinois! Prepaid Tuition Plan
-
Plans​​
-
ISAC plans
-
ASBE grants
-
-
​
- ​​For Families in Need
-
​​Learn about our financial resources
-
The MAP for tuition assist
-
Dept. of Healthcare & Family Serv. (DHFS)​​
-
-
Obtain or Update a License
-
Update an Address
-
Become a Service Provider
-
Become a Lender
-
For Business Owners
-
Register a business
-
Look up a business
-
Recruit & hire
-
-
Learn About Our Rehab Serv
-
The DHR
-
Our Job Coaching & Day Serv program
-
-
Apply for Workers’ Comp
-
Get Health Ins. for College Tuition (state employees)
-
Get Fair Compensation
-
The Equal Pay Act
-
Fed & state min wage
-
Your pay stubs
-
-
File a Complaint
-
Access our Job Listings
-
Govt jobs
-
Private sector jobs
-
-
Access Our Career Serv.
-
Resume building
-
Interview preparation
-
Job fairs
-
Career assessment
-
-
Access Unemployment Resources
-
File or certify for benefits
-
Layoff Assist Guide
-
-
File Your Taxes
-
Tax amount & status of refund
-
Tax filing assist
-
-
Access DMV Serv.
-
Obtain or renew vehicle title registration
-
Obtain or renew a license
-
-
Give Back to the Community
-
Join the Nat. Guard
-
Serve on an IL Board
-
Volunteer
-
​ALPLM
-
The Gov Mansion
-
The IDNR
-
The IDCFS
-
The IDOC
-
The Ombudsman Program
-
-
Donate
-
Cons Found.
-
-
Low-Fidelity Wireframes:
Giving the sitemap some structure
Once I had a hierarchy that felt intuitive, I drafted some Low-Fi wireframes to better visualize how the content would look on a site. This required thinking about images, hyperlinks, & what would be visible from where.
The homepage highlights news & popular services -there are images with the content. If a visitor clicks Residents at the top...
This page displays specific career resources.
This page lays out the major headers with hyperlinked subheaders. If a visitor clicks a hyperlink under Job Seekers'..
High-Fidelity Wireframes:
Breathing life into the wireframes
It's a lot easier to view the wireframes when they're brought to life with color & imagery.
The screens below show a before/after homepage -with the latter directing users with headers & links. Popular resources are displayed as cards. The video box (which links to a non-functional live video) is removed. A simple hyperlink could be added when it's functional.
IL's current homepage:
My suggested homepage:
The site has headers for Visitors or Residents at the top. There are also helpful headers targeting common demographics (Job Seekers, Employees, Tax Filers etc.).
​
Clicking on Residents connects the user to a page for residents.
​
Clicking on For Job Seekers connects the user directly to a page for job seekers.
The site has vague headers at the top (Government, Business, Employment, Education, Residents, Visiting) & confusing cards.
The page for Residents presents the sitemap with headings that are scannable & hyperlinked so resources are easy to spot.
If a user scrolls to For Job Seekers, he can click on specific resources & connect to a page for job seekers...
The page for job seekers lists various resources (again) packaged as cards.
If a user clicks Job Seekers on the homepage, or he clicks a resource under For Job Seekers on the Residents page, he'll connect to this page.
A Closer Look at the Articles:
Improving accessibility with better copy
The site's copy for news & resources isn't just dry. It's often vague & confusing. Here's a closer look at some copy improvements to make the site's resources more accessible to the public.
1. A resource for checking road conditions:
Before:
Visitors will get a sense of what this post links to, but it's little unclear what the resource is or what regions it covers.
After:
This relays more info about traffic & road conditions throughout the state. It clarifies that it can help users plan a route.
2. A resource for checking a professional's license:
Before:
This is also a little confusing... whose license can be looked up & why?
After:
A simple word like 'verify' directs the visitor towards this resource, with clarity on why it's useful.
3. A news post with tips on taking financial precautions:
Before:
A passive voice that talks about crime is easy to overlook. The article reads like a long prelude. Most visitors won't know what IDOR is or does.
After:
The title at a glance tells visitors why the article is relevant to them. The active voice gives them clear visuals about what they can actually do to protect their finances.
4. A resource on staying safe from local predators:
Before:
Visitors will likely intuit that this is a safety tool, but it's not clear for whom. It could be for law enforcement or an employer who wants to run a background check.
After:
The title (& imagery) makes it clear that this resource is for residents. The copy helps clarify how it can be used.
5. A resource for finding jobs:
Before:
Aside from being generic, the post only advertises govt. jobs. The site also links to a private sector job database & career resources. Why not inform visitors?
After:
This 'job portal' is more eye-catching & it better informs job seekers about available resources.
6. Finally, the logo & tagline:
Before:
The tagline is long, rambling, & vague. It doesn't give any idea of what resources the website actually offers.
After
The URL & tagline were removed. A tagline isn't really necessary to convey the resources the site offers to the public. Instead, headers direct visitors to resources.
​
FUN FACTS are added instead:​
The Designs:
Testing & Refining
A Limitation on Usability Testing
It would be difficult to do an 'apples' to 'apples' comparison of a prototype to http://www.Illinois.gov because it contains a fraction of the data that the site has -so scanning it for resources will be pretty easy by default. ​
To better visualize the new site, view a prototype here:
