Michael Anderson

Overview

This was an individual class project for Introduction to Web Design. The goal was to redesign an existing website to better serve user's goals. I chose to redesign the website for the Supreme Court.

Problem: Website out of date and out of touch with user's needs

I chose to redesign the Supreme Court's website because I saw the opportunity to improve:

1. the visual design

2. the information architecture

3. the user experience of the advanced search.

The initial website is pictured below:

The main issues I identified were:

1. Multiple navigation/search areas: The two navigation bars and search area appears hodgepodge and makes the site feel cluttered. With my redesign, I aimed to unify all the navigation and search options.

2. Site title appears busy: The site title appears on top of an image with large text. My redesign aimed to improve the visual appeal and reduce clutter.

3. Search difficult to navigate: Having worked in a legal environment before, I had developed a sense of what search functionality is most useful for case searches. I aimed to apply this knowledge with my redesign.

Homepage: First iteration:

I used Sketch to create a high fidelity mock-up of the home page (see below).

I showed my initial design to some users learned from their feedback:

1. The relative scale needed to be reconsidered: The navigation bar was abnormally tall.

2. The navigation was reduced too much: I needed to reconsider the information architecture.

3. The "blocky" design was not appealing: I needed to rethink and refine some of my visual design decisions.

Homepage: Final Iteration

With Sketch, I took the initial feedback into consideration and refined the homepage (see below).

In addition to the homepage, I also redesigned the Advance Search and Justices pages.

Key Takeaways:

As one of my first design projects, I learned many skills and concepts that have continued to inform my design.

1. Information Architecture: I became familiar with some of the key concepts with information architecture through mistakes (such as over reduction of navigation) made with my initial redesign.

2. Web Design Basics: I learned the importance of details pertaining to scale, grid, color, and progressive disclosure. This project opened my eyes to the questions that were important to ask myself as a designer through various stages of a project.

3. Visual Design Tools: I became familiar with Sketch through this project which I've gone on to use extensively.