SDCI_thumbnail

 Seattle Department of Construction and Inspection website

A tool for renters and housing prodivers anywhere in the leasing process

As a major hub of technology and industry, Seattle is a global beacon to some of the best and brightest. With so many newcomers arriving annually, The City of Seattle's Department of Construction and Inspection's (SDCI) website provides answers and tools a renter or landlord may need.

(Skip ahead and view the live site)

PROBLEM

The original Renting in Seattle site went unused, was unattractive and difficult to navigate

COLLABORATOR

Fahmida Azim (illustrator)

ROLE

• Designer
• Art Director

TOOLS

• Illustrator

Problem + Solution

The SDCI offers resources and services to Seattle renters and landlords, but their site was poorly trafficked. Even when visitors found the site, they still had a poor user experience. The  single page site was little more than a long list of links without hierarchy or the ability to search. Additionally, it not did not match the updated visuals of the City of Seattle website and had an unrelated url contributing to the low number of visitors.

My team reevaluated the information architecture and, working with the client, created 6 unique milestones for both a renter and a housing provider. Using these steps as a map, the layout of the site began to form. Once the site mapping was complete, I created several page templates that were assigned based on the page's hierachy. SDCI provided content and we provided guidance. 

SDCI_wireframe

Initial wireframes. Not only did these guide later design but aided communication between my team and the client.

Design

After meeting with the clients, we were all in agreement on the guiding principles

WHAT A comprehensive source to help renters and housing-providers 

WHO Any resident of Seattle, with a focus on underserved, underrepresented communities

WHY As a public body, it is the duty of the SDCI to be public, transparent and benefitial

SDCI provided user personas (first time landlord, unhappy apartment dwellers, and non-native english speakers seeking resources). I performed a comparative analysis by reviewing apartment finder apps and websites, I also assessed similar govermental sites. Most of the appartment hunting apps were aggregators spitting out long lists of results that could be narrowed further with filters. Many of the agency sites were difficult to navigate and required multiple clicks of the 'back' button to find the service I was seeking. To avoid the shortfalls I'd run into, my design had to have easily digestible content, clear information hierarchy, and still be visually appealing.

Designe began with City of Seattle visual guidelines and pre-existing layouts. During the process I remained in contact with the Seattle IT team, running ideas by them and working with them to create custom features. Finalizing those features in this phase saved time down the road and ensured product viability.

The site utilizes two parallel user flows, one for renters and a second for housing providers. Buttons on the home page address the common requests, and place visitors on the appropirate page. Dealing with renters and landlords can be stressful and the new design reduces that stress with clarity and transparency.

The current live site can be viewed seattle.gov/rentinginseattle

Final designs provided to client. The clickable checklist is a new custom feature designed for the client.

final-designs

UI Toolkit

Additionally, a UI toolkit and style guide was created. The guide directs the client on matters including page layout, color use, typography, iconography and the intention behind site design. 

style guide cover

UI toolkit and styleguide
(click to view the PDF)