The Office of the Attorney general of california

The Office of the Attorney General is the guardian of the public interest and their website needs to reflect the same responsibilities they uphold to their citizens. 

Help Center 

Project Scope:

Duration: 2.5 weeks  

My teammates and I collaborated on all aspects of the process. I conducted user interviews, comparative analysis and card sorting. I also produced sketches and built wireframes.

Overview

The Office of the Attorney General of California needs to serve its residents with a website that provides information relevant to people's needs and interests. Currently, residents are not finding the resources they need and are being misguided to the wrong resources. On the business side, forms and contacts submitted by users are being misguided. A majority of these end up on the Public Inquiry Unit's (PIU) desk. The PIU then must spend time sorting and sending the applications and forms to the correct agencies. Over 80% of forms end up at the wrong place, the PIU. 

SOLUTION

Create a help portal on the main page that helps guide users to the correct and relevant resources. This portal would act as a front door that would guide residents in a user friendly way. 

Challenges

The main challenge was organizing all the resources into an intuitive way. One late night, a teammate and I created a portal breakdown from information provided by our client. Everything was broken down into three main entities: Individual, Law Enforcement, and Business & Organization.

 These entities broke down into five main actions:

  1. Issues and Concerns
  2. General Contact Information
  3. Apply or Register
  4. File a Report
  5. Check a Status
 
 

This exercise were vital to my understanding of the information architecture of the site and creating a design that would assist an array of different people looking for various resources on the Attorney General's website. Basically, there are a lot of different people looking for a lot of different things. 

 
 

With limited real estate on the home page help portal, it was important to narrow down the most popular help topics sought out by users, which are: filing a complaint, checking a status, looking for information, or applying for something. 

 
 

This flow follows an individual filing a consumer complaint. The goal was to help funnel users through the questions. 

REsearch


Contextual Analysis

We did heuristic evaluations on several help centers. 

Main Takeaways: 

  • Easy to navigate
  • Information is clear and easy to understand
  • Use of breadcrumbs 
  • Friendly language 
 
 

Interviews

I interviewed a small business owner and a home owner. I mostly asked them about their experience accessing city and state level government websites. 

Pluses for users:

• Efficiently finding resources, such as permits for homes, or making monthly sales tax payments

Pain Points: 

• Wording is too convoluted

• When paying property taxes, the form is confusing 

• Outdated design 

SITE MAPS

We did six different site maps to make sure we had covered the most important resources people see. This particular site map covers becoming a gun dealer applicant. 

On the left I have the catch all Help Center page, where a user may end up from an organic search. On the left, is how the user would access this information from the help portal. Either journey would take them to the correct resource. 

BRAINSTORM


Ideation

As a team, we brainstormed ideas and collectively created rough wireframe sketches, all while touching base with our client throughout the entire process. Here are sketches of early ideas for the Help Center Portal (top left), the Background Check Subpage (bottom left) and the Help Center Page (right). The first sketches were more icon based.

 
 

ITERATIONS

 

The help portal went through several iterations based on usability testing and client feedback. Based on usability testing, the portal became less icon based due to a disconnect between questions and icons.

Design Challenges:

  • Creating friendly, non-passive language to help guide users. We changed the wording the most on the design. 
  • Organizing resources into buckets which users can understand and making sure we caught at least six different user flows by using the portal.

Usability Testing

Major discoveries:

  • Users responded better when the action and specific goal was asked first instead of "who are you?"

  • Copy and guidance was vital in guiding the user to the next question

  • Either a left to right or top to bottom design worked best

  • Users felt a disconnect from the "questions to answer" portion on the portal

Design


DESKTOP WIREFRAMES

This portal would act as a gateway to help a user find what they need and would sit on the home page under the hero image. Having limited space, a dynamic design worked best. This is the version we tested and iterated the most with users. 

The first question prompts a user to his or her goal. As you can see below, these all fall under the most popular topics. The second screen is a hover state example. 

MOBILE WIREFRAMES

 
 

Our client challenged us with designing a responsive version of our portal. These are my designs, which demonstrate where the user would tap on answers to move through the funnel. 

 
 

Future steps

We prepared all files and deliverables for our clients and passed them along. Here are our suggestions for moving forward: 

  • Conduct additional usability tests of each version and execute design decisions based off of feedback
  • Implement clean and modern visual design
  • After usability testing, focus on bringing one design to high fidelity

Main Takeaway 

Let the design guide the user. This can be accomplished by making the design more active, not passive. 

 
Our GA team with our amazing clients from the Office of the Attorney General 

Our GA team with our amazing clients from the Office of the Attorney General