Before and after examples of website design solutions
The client referred to the website as a credit card form because it was boxy, colorless and dull. The site was expanding with new content, features and large interactive maps. All the content, tools and alerts for mutually exclusive modes of travel were grouped together making it difficult to skim content and separate actions.
Through several design iterations, we added larger images, less lines and more spacing. The logo and branding became brighter, and the map stayed as top priority. Through user testing, I found that a persistent, vertical navigation worked best for users to quickly skim all of their options.
Analytics showed that site visitors were leaving because they wanted to pay tolls from the San Francisco Bay and Los Angeles Metro areas, both of which had toll roads/bridges managed by other organizations. With too many navigational elements, the toll booths closing announcements and new toll payment options, the homepage design needed to provide a clear way for drivers to pay their tolls and manage their accounts.
The freeway signs were key to making sure users knew they were at the correct toll roads website. Providing a larger centered button to pay tolls directed first time users, and we kept the same top right location of the login (a web best practice) for existing account holders. The top actions on the side were moved to center stage, and images of the clear roads gave the experience the "no traffic" concept better than a live map.
What appeared to be a simple website hid a massive, multi-site structure with deep navigation, duplicated links, and confusing UX. The Port of Seattle not only manages all marinas in the Seattle area, but also the Seattle-Tacoma International Airport - not to mention coordinating with all the businesses, communities and parks around each of these locations, as well as all the governmental processes and procedures.
Working in Drupal, we focused on a more flat structure, and then used categorical tagging to create connections between categories, subcategories and reusable content, creating a single source of information without breaking the design. A mega menu was used for overall site navigation, and each department could create unique landing page designs that were dynamically coded through the tagging. This gave a consistent and trustworthy design across the site allowing users to focus on the content.
The logo was just approved, the website was created by non-design staff, and I had only 2 weeks to clean it up while learning Webflow. The resulting site (shown here) was clean, responsive, and had good content, but the presentation lacked flow, imagery and a cohesive brand.
For the redesign, I brought in iconography, photos and color blocks to incorporate the branding. I regrouped the content to create a shorter navigation, added a call-to-action (CTA) button and a translation widget. The homepage is split into sections highlighting each topic in the navigation.
