User Experience Design (UX) for the Win!

1

Oregon Secretary of StateJacqueline Sowell

May 5, 2014

UX FTW!(User Experience for the Win!)

UX Design in Application Development

2

Introduction

Premise:Professional user experience (UX) design is the missing piece in Secretary of State (SoS) application development.

UX designers create user interfaces (UI) that •Conform to how people see and perceive, per studies of the human perceptual system. •Fit how we respond emotionally and make decisions, per studies of human cognition.

Count on a UX designer to improve the experience customers have with the Secretary of State’s website and online applications.

Take a look at the progress we’ve already made…

3

In the beginning…

UX design:Success is measured by business outcomes: adoption, growth, revenue, and retention.

Website migration and redesign:The complete makeover of the Oregon Secretary of State website was first enterprise-wide project with a UX designer on board.

During the course of the project, we•Simplified the information architecture. •Developed a task-based layout.•Designed fully accessible, mobile-first templates.•Whittled content down to the top 5 tasks of each business unit.•Rewrote content in plain language.•Instituted Web governance.

Take a look at how the site metrics have changed: Measured April 2013 vs. April 2014

4

After website redesign

Usage up 275%

Page views up 1,065%usage|

5

After website redesign

Bounce rate down 53%bounces|

6

Completed or in the works

applications

7

Rebrand and refine

Before: No brand. Dated design After: Design is true to SoS brand

Historical Trademark Search application

Modernize and standardize

8

App Home pageSearch results list

Detail view

Historical Trademark Search application

Modernize and standardize (2)

9

BeforeAfter: New application. New design.

Central Business Registry application (CBR/OBR)

Modernize and standardize (3)

10

Before: Home page

During: Mock ups

After: Full redesign

Municipal Report Search application (MUNI)

Apply user interface conventions

11

Before: Long, repetitive list During: Mock-ups guide development

Shop the Archives application

Apply user interface (UI) conventions

12

After: Customer-focused e-commerce experience

Shop the Archives application

•Repetitive product descriptions consolidated.•Outmoded ordering and payment options gone.•Button title – Check Out – describes next step.•Side-by-side product comparisons created. •In-context quantity ordering added.•Compact design reduces scrolling.

13

Make forms easy to scan

Before After: Form designed on a grid

Early Oregonian Search application

Designing on a grid creates predictability.• Lay out controls on a grid to structure form.• Create fewest possible alignment points for labels and

controls.• Group like controls closer together.• Use consistent layout on every form in the application.• Use ample white space.

14

Avoid overwhelm: Give options as needed

Default to the fewest options needed

Mock-ups showing two form states

Early Oregonian Search application

15

Make structure reflect function

Instructions lost in paragraphs Rewritten as 1, 2, 3 procedural

Secretary of State website

Since April 2013, SoS website: •Usage is up 275%.•Page views are up 1,065%.

16

“Don’t make me think!”

Design for simplicity and clarity of function

Oregon Business Registry application

17

Avoid bias in visual communication

Online Voters’ Pamphlet

When the Voters’ Pamphlet was first posted, the Democratic candidates for president were displayed by default.

After UX intervention, the default behavior was changed to display all left navigation closed until the customer clicked on a heading.

18

Write it in plain language | ORS 183.250

Legal language Plain language

Oregon law requires all state agencies to prepare public communications in language that is as clear and simple as possible (ORS 183.750)

UCC definitions

Current website

Legacy website

19

Write it in plain language | ORS 183.250

Before

After

Write for your audience, so they come back again and again.

Secretary of State website

SoS website bounce rate reduced by 53% after rewrite and redesign.

Bounce rate: a measure of the effectiveness of a website in encouraging visitors to continue with their visit.

20

Support ADA accessibility

Design it. Test it. Use it.ADA testing video clip. Turn on volume to hear screen reader

Reports on My Vote application and HTML Ballot

Rework is costly.

21

Support ADA accessibility (2)

Accessibility review of UCC app includes code fixes

Uniform Commercial Code application

22

Maintain professional, uniform interface

Build customer confidence with brand voice, tone and style

Reduce customer frustration through consistent use of controls

Oregon Business Registry application

23

Make it repeatable: Documentation

Web Visual Style Standards

Web Editorial Guidelines

Topics:•Visual style: branding, color, typefaces•SOS user interface conventions•HTML/CSS best practices•Form layout best practices•Writing ADA-accessible code•Accessible error messaging•ADA checklist•Visual testing tools

Topics:•SOS Web editorial style, tone, word usage•How to write for Web interfaces•Examples of using plain language•More about accessibility

Application Branding KitTopics:•GoogleAnalytics usage tracking code•Page layout templates•Commented code•Banner and footer graphics•Legend for site colors, typefaces, links•Sample code for skip to links (ADA)

24

UX FTW!User Experience for the Win!

We can do this – we already are!

Rework is costly. Iterative user experience design belongs in every project plan.

25

Questions?

Jacqueline SowellSocial Media and Web StrategistOregon Secretary of State

jacqueline.sowell@state.or.us | gotsowell@gmail.com | @gotsowell