user experience design (ux) for the win!
TRANSCRIPT
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
[email protected] | [email protected] | @gotsowell