www.sanjoseca.gov
Figma
Google Suite
Adobe CC
Trello
Miro
4 weeks
User Research
Prototyping
UI Design
The original site had no alibi for being this ugly.
San JosĂ© is the center of Silicon Valley.  When you think of the city you picture big tech, mid-century modern designs, and maybe the San JosĂ© Sharks. You wouldnât know any of those things when looking at their current site. Â
While the navigation looked new, the use of gradients over images muddied the look of the entire page. Finding anything on the site itself was a chore and took most users over a minute to find what they were looking for.
The site was in dire need of a restructuring and an updated look with some recognizable imagery. Â Our team of 4 worked hard to make that change.
Through our analysis of the site, we found that they had used 8 different shades of teal in their home page (thatâs a lot of teal) and that all the tiles in the middle of the page were directly related to COVID-19. We were also sent to another page for business support (right) which looked completely different than the rest of the site, which made us question if the site was being redesigned already. Â
During the 4 weeks of the project, the site has received some updates, including more resources for COVID-19 and a static chatbot, which we ended up incorporating as well, but nothing as drastic as the page to the right. We did use that new logo, though, because it seemed San Jose itself was trying to rebrand with this new design.
We started with brainstorming why someone would visit a government site and came up with 4 tasks to start:
We tested 4 people with these tasks and 100% of them used the search bar for at least one task.
1. It took users an an average of 4 clicks to get to the Recycling rates pages through the menu.
2. 3/4 users had to use the search bar to find this information. Â The 4th gave up.
3. Not one person could figure this one out. Â Nevermind that the breadcrumb says this is under âYour Government,â but to get to this page you need to go to Residents>Parks and Recreation. Yes, ârecreationâ is in the name, but when youâre looking for something to do next weekend, every user started with Events under the visitors menu.
One user even got off site to the San José tourism page and found their calendar and thought that was it.
4. Â Reporting graffiti takes you off the main San Jose site, which confused users, and also prompts you to download an app, which frustrated one user.
You donât need to read it to know that itâs a lot.
To say the current architecture was confusing would be an understatement. From our analysis, we found that there were 10âs of thousands of PDF files dumped on the site and only the designers of the site know how many pages. It was an impossible task to redesign and prioritize all of it, so we started with the top menu.
In the current navigation, we found a lot of excess information and one broken link, so we consolidated the information in a way that made sense to us and, hopefully, our users. Â
The original navigation had 4 categories: Residents, Business, Visitors, and Your Government. We changed those categories to Living Here, Things to Do, Business, and Government after users were confused that only visitors would be interested in things to do in the city.
We then did our own sorting and organized it in a way that made sense for our first draft of the new architecture.
Well, it made sense to us at least ...
We had 8 of our friends do card sorting and had them organize the 25 subcategories into the 4 categories mentioned earlier.
By unanimous vote we had to make some changes.
Our new navigation would help our users find what theyâre looking for based on their own mental models.
We had 4 weeks to redesign this thing, not 4 years, so we narrowed our pages down to 3 flows that we could do in a reasonable amount of time: rates and billing for a single family home, utility services lookup, and finding a maintenance request form. Â
We chose these flow so we could show what subcategories, forms, maps, and directions would look like on the new site.
The original site is pretty severe, with sharp cornered rectangles and dark colors structuring the pages, so we rounded those edges to see how we liked it.
Since everyone used the search bar, we wanted to make sure that it held equal weight to all the other menu options, so we made it bigger ... maybe too big.
The site also had accessibility options in their menu that allowed users to make text larger and change the language.  We needed to keep those options available considering the potential users for the site are literally any of the 1 million+ people living in San José, so, for now, moved these into an accessibility dropdown menu.
We tried to think of better ways to present the information on the site, so tried using icons to focus usersâ attentions over the lists that are currently on the site.
In hindsight, we may have gotten carried away with the icons.
We tested 5 users on our lo-fi prototype and had them try to complete the tasks for the flows we created:
1. One user got confused because she looked under residents first and did not read all the way to the bottom of the page.
Insight: move up the page.
2. One user used the breadcrumbs from the previous task to get back to the last page where he had seen more garbage icons.
Insight: accurate breadcrumbs are important in information-heavy sites. Some icons may be helpful as users are able to recognize them more easily.
3. One user stated that the search bar was really big and cutting off the menu.
Insight: make search bar smaller.
Biggest change to come out of this iteration was a new menu. Â We made the search bar smaller, but kept it in line with the other menu options. Â When clicked, it expands to the full length of the menu.
We also restructured the Garbage and Recycling Page so users wouldnât get confused by the âI am aâ subcategory.
We wanted to keep that bright, urban yet modern feeling that is distinctly San José and kept some of the teals they had in their original style guide.
And too many icons and illustrations to list.
Watch this video I made and narrated for more details on our design.
Continue to iterate.
Perform more A/B tests.
Too much of a good thing can be bad. We started off liking the icons and illustrations in the lo and mid-fi wireframes, but when implemented in hi-fi, it became a messy jumble of different styles and designs as it was difficult finding all illustrations in one style or by one artist.
Concentrate on content. Â Once we started working on hi-fi. everyone wanted the content to look good, but we definitely lost sight of functionality. Â In sites as information heavy as this one, sometimes more text isnât a bad thing.
Do more A/B Testing. It isnât necessary to get the style right the first time. Our group definitely started to struggle with creating cohesive design styles. We all just jumped in and our competing styles and lack of communication resulted in a product that did not fit users' mental model of a government site.
Cohesive designs require communication. Â I worked on the web version along with another member of my group, while another 2 members worked on the mobile version of the site. Â It showed in our designs. Â Looking back, we talked little about our designs, assuming everyone would do the same thing based on our previous testing, but the end product resulted in different menus and flows for web and mobile, resulting in a design that did not look like it was created by the same group. This was a great learning experience in team designing.
I couldnât just leave the project there. Â I had to go back and at least fix the parts that I felt I could fix.
I started at the beginning: the home screen. First, I decided to change the hero image from an illustration to an image. Images tend to be more powerful emotionally-speaking and should help with users' mental model of a city site over the illustrations. Finding one within our color palette was hard, but after some digging I found a cityscape of San José that I thought complemented the teals and portrayed the vibrancy of the city then edited the colors a bit.
Next, I took a look at the other illustrations on the page. Â The COVID-19 resources illustrations definitely had too much going on in them for being small buttons, but what to do with them? IÂ tried editing some icons and tried different colors, including black and white, but the icons were almost too simplified, at least for a home page. The current site had images with teal overlays on them, which left a little to be desired aesthetically-speaking. Â
For a subject as information dense as COVID-19 I would want to see some kind of summary of what each category contained rather than just those titles, which are themselves vague. Â Three of the categories go off site and 3 stay within, so how best to do that? Â The answer could be a module, similar to Twitterâs embedded ones that can show a glimpse of the linked page with vital information from each category. Â Especially for âGetting testedâ it could save on clicks by allowing users to make an appointment right there on the home page without leaving the site.
I gave mobile a new menu, to stay more in line with what web looked like and changed the COVID-19 resources to be more information-centric.
Iâve tested it on one user and he said it matched more what he would expect from a government site and wasnât distracted by the imagery.
