Digital Style Guide

INTERNSHIP PROJECT · UI/UX DESIGN

Design style guide assets

Intro

Duration

September 2018—June 2019

Skills

Research
Prototyping
Development

Tools

UXPin app logo

Goal

At the beginning of my senior year at the University of Washington, I was giving a chance to work for the Digital Engagement team at the City of Seattle as a UX Design Intern. My main project was to create an initial version of the Digital Style Guide for seattle.gov website.

Approach

  1. Identifying potential stakeholders and users, and interviewing them to define specific use cases of the future style guide.
  2. Conducting a complete inventory of all website elements, including colors, typography, iconography, interaction components, and layout patterns.
  3. Determining the structure of the design system, defining usability and accessibility principles, prototyping UI elements, writing the copy.
App Store's most doenloaded apps' feedback comparison

Brainstorming

During our brainstorming session, we identified the main steak holder categories as

  • Vendors–companies who are integrating services into the website.
  • Content managers–people maintaining departmental websites and their content.
  • Digital Services and IT–people maintaining the website's CMS and developers.
  • Design team–as a source of truth.
Design inventory of the City of Seattle website

Design Inventory (colors, typography)

Design inventory of the City of Seattle website, continued

Design Inventory (elements)

I started the inventory by investigating all website pages, identifying variations of colors, fonts, icons, main interaction elements (buttons, input fields, forms, etc.), collecting screenshots and placing them in a single location.

I was also identifying main page types and layout patterns including their responsive behavior and mobile treatment. Therefore I was able to determine four different types of layouts and five page categories: Home, About, Services, Blog, and Contact Us.

Design inventory of the City of Seattle website, page types and layout patterns

Design Inventory (layouts, page types)

When the inventory was done, I worked on the stylegude's structure, determining its main sections. I went through a couple of iterations, trying to make it comprehensive and easy to use for each category of the stakeholders.

Building the style guide was a team effort. I've been presenting my progress to our designers, engineers, department managers and other people involved in the website's development process. I used the feedback to iterate on the project.

At first, we planned to base our future style guide on the website's native CMS platform but eventually decided to use the UXPen design system tool since it was already used for the development process.

While I was drawing design elements and building interaction prototypes, my manager was helping me with editing the supporting documentation. Every section of the style guide we supported with Usability and Accessibility context.

We also followed recommendations from the United States Web Design System because as a government organization we had to comply with these standards.

Results

Screenshot of the style guide's structure

Structure

We divided the style guide into the following categories

  • Accessibility and Usability
  • Colors
  • Typography
  • Iconography
  • Logos
  • UI and Page Elements
  • Color scheme

    Colors

    We defined the main color scheme, including text, background, and notification colors. We also provided examples and best practices of how the scheme should be implemented.

    Typography and Iconography

    Typography and Icons

    To maintain cohesive experience across all the websites, we decided to minimize font choices to

    • Seattle Text – titles and headlines
    • Open Sans – body text

    We also went with Font Awesome for our icon library choice, because historically the majority of departments already used it.

    UI and Page Elements

    UI and Page Elements

    We structured the UI and Page Elements category as

    • Buttons
    • Forms
    • Lists
    • Tables
    • Notifications
    • Navigations
    • Headers
    • Footers

    Takeaways

    This was a great experience for me as a design student to work on a real project with a team of designers, collaborate with engineers, interact with different categories of stakeholders, and see real results at the end.

    Check out the live version of the City of Seattle Digital Style Guide.

    Thank you for reading!