User experience design (UX) is too often seen as the icing on the cake rather than as the integral element that makes online applications and websites successful (as measured by customer adoption, growth, revenue and retention). Learn how UX design has improved the Oregon Secretary of State agency's online presence.

1. Oregon Secretary of State
Jacqueline Sowell
May 5, 2014
1
UX FTW!
(User Experience for the Win!)
UX Design in Application Development

2. Introduction
Premise:
2
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:
3
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
4
Usage up 275%
Page views up 1,065%usage|

5. After website redesign
5
Bounce rate down 53%
bounces|

6. Completed or in the works
6
applications

7. Rebrand and refine
Before: No brand. Dated design After: Design is true to SoS brand
7
Historical Trademark Search application

8. Modernize and standardize
8
App Home page
Search results list
Detail view
Historical Trademark Search application

9. Modernize and standardize (2)
9
Before
After: New application. New design.
Central Business Registry application (CBR/OBR)

10. Modernize and standardize (3)
10
Before: Home page
During: Mock ups
After: Full redesign
Municipal Report Search application (MUNI)

11. Apply user interface conventions
11
Before: Long, repetitive list During: Mock-ups guide development
Shop the Archives application

12. 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
13
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
14
Early Oregonian Search application

15. Make structure reflect function
Instructions lost in paragraphs Rewritten as 1, 2, 3 procedural
15
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
16
Oregon Business Registry application

17. Avoid bias in visual communication
Online Voters’ Pamphlet
17
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
18
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
Currentwebsite
Legacywebsite

19. Write it in plain language |ORS 183.250
Before
After
19
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.
20
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
21
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
22
Oregon Business Registry application

23. Make it repeatable: Documentation
Web Visual Style Standards
Web Editorial Guidelines
23
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 Kit
Topics:
• 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. 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. 25
Questions?
Jacqueline Sowell
Social Media and Web Strategist
Oregon Secretary of State
jacqueline.sowell@state.or.us | gotsowell@gmail.com | @gotsowell