Downtown Seattle Parking Website Redesign
Overview
Our team of four redesigned a local transportation website that never modernized as their users went mobile.
After evaluating the product, we defined our scope to three design principles. We created a map-centric UI with expanded functionality, helping users make a quick yet informed parking decision.
Our final solution was a 70-point SUS improvement from the original site and evolved how visitors engage with downtown Seattle.
Client
Downtown Seattle Association
Timeframe
10 weeks
My Role
User Research, Interaction Design, Visual Design, Prototyping
The Challenge
Nonstop road improvements have ironically made downtown Seattle frustrating for short-term traveling. In 2014, Downtown Seattle Association launched a website to help drivers locate parking, and to display a free shuttle service for walkers to bypass waterfront construction. Five years later, as 75% of their users went mobile, their solution stayed outdated.
How might we redesign the site’s short-term traveling experience to increase engagement in Downtown Seattle?
Research
Establishing A Baseline For Improvements
Our first priority was identifying a baseline to measure our redesign improvements. We graded the existing website using the System Usability Scale (SUS) method. The site scored 17.5 - the average SUS score is 68.
Usability testing was conducted with 8 participants running through two task scenarios - one as a driver locating parking, and one as a walker using the waterfront shuttle. We also released an online survey to 45 respondents to learn how visitors travel to downtown Seattle.
"I thought the Waterfront Shuttle link was an announcement, so I ignored it."
“It’s nice how it tracks the shuttle in real-time, but why can’t it show me the ETA as well?”
“Where are the garages actually located? These [list of garage names and streets} mean nothing to me.”
Price is the biggest factor for respondents when deciding where to park.
Key Findings
Users felt overwhelmed seeing a list of parking garages.
Rearranging garage options was limited and inconsistent across pages.
Users struggled to find links due to color scheme.
Shuttle map lacked information about stops or shuttle times.
Terminology and CTAs made it confusing to browse the website.
To summarize the data and frame our redesign, we conducted affinity diagramming and discovered themes that became our design tenets.
Pre-consolidated affinity diagramming
Consolidated affinity diagram that clustered into design tenets.
Visual
Participants struggled to complete tasks due to the site's color associations and unclear elements. Visual changes were needed to make the site feel modern and straightforward.
Functionality
Users felt overwhelmed seeing a list of parking garages. Adding sort and filter functionality makes decision-making more simple.
Content
Terminology and CTAs lacked clarity and needed to be revised. We also enhanced the content by adding nearby hot spots such as restaurants and attractions.
Prototype v1: Landing page
Prototyping & Testing
Discovering A Mental Model
Our early concepts focused on improving the experience to find parking. Testing the parking prototype informed us how to design the other two flows of the site: finding the Waterfront Shuttle, and the new searching Seattle attractions and storefronts.
The first prototype overhauled the landing page to reduce clutter. We removed unnecessary links and introduced a persistent tab-based navigation that doubled as a page header. A map image of all options available was introduced, but users expected feedback when interacting with the map.
Results from testing the current site and the first prototype made a key user mental model more evident. Users visualize and interact with these data points in the form of a map. We expanded on this idea by not only creating a map-centric interface for the parking flow, but also developing it for the other flows.
Visual Design
A Design System Workflow
With three designers building prototypes, we needed a new workflow to maintain design consistency. I implemented a design system as a Sketch linked library, and managed design iterations with Abstract version control. We became more organized and iterated at a faster rate.
DSA put a heavy investment on their brand, with signage located on downtown street corners and parking garages. I leveraged the client's brand guidelines, colors, fonts, and illustrations as the foundation of our design system.
Our basic building blocks led to creating more complex components. The top header and content cards went through several iterations as we continued to test our prototypes. As we reviewed new components and revised older ones, we were able to see the updates instantly across our designs.
Final Designs
As we progressed, we standardized templates that all flows would follow. This led to a consistent browsing experience where users know what to expect on each tap, reducing confusion.
Our final SUS score was 87.5, a 70-point improvement from the original website.
“This is one of the more well-reasoned and well-presented Capstone case studies we’ve seen here at SVC... the end result was very solid.”
Credits
Team
Amy Resling
Kiki Cooley-Lund
Kiana Sonnenfeld
Daniel Bui
Tools
Sketch
Principle
InVision
Abstract
Trello
Miro