Oregon Secretary of State
Jacqueline Sowell
May 5, 2014
1
UX FTW!
(User Experience for the Win!)
UX Design in Application ...
Introduction
Premise:
2
Professional user experience (UX) design is the missing piece in Secretary of State (SoS)
applicat...
In the beginning…
UX design:
3
Success is measured by business outcomes: adoption, growth, revenue, and retention.
Website...
After website redesign
4
Usage up 275%
Page views up 1,065%usage|
After website redesign
5
Bounce rate down 53%
bounces|
Completed or in the works
6
applications
Rebrand and refine
Before: No brand. Dated design After: Design is true to SoS brand
7
Historical Trademark Search applica...
Modernize and standardize
8
App Home page
Search results list
Detail view
Historical Trademark Search application
Modernize and standardize (2)
9
Before
After: 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 applicati...
Apply user interface conventions
11
Before: Long, repetitive list During: Mock-ups guide development
Shop the Archives app...
Apply user interface (UI) conventions
12
After: Customer-focused e-commerce experience
Shop the Archives application
• Rep...
Make forms easy to scan
Before After: Form designed on a grid
13
Early Oregonian Search application
Designing on a grid cr...
Avoid overwhelm: Give options as needed
Default to the fewest options needed
Mock-ups showing two form states
14
Early Ore...
Make structure reflect function
Instructions lost in paragraphs Rewritten as 1, 2, 3 procedural
15
Secretary of State webs...
“Don’t make me think!”
Design for simplicity and clarity of function
16
Oregon Business Registry application
Avoid bias in visual communication
Online Voters’ Pamphlet
17
When the Voters’ Pamphlet was first posted, the Democratic c...
Write it in plain language |ORS 183.250
Legal language Plain language
18
Oregon law requires all state agencies to prepare...
Write it in plain language |ORS 183.250
Before
After
19
Write for your audience, so they come back again and again.
Secret...
Support ADA accessibility
Design it. Test it. Use it.
20
ADA testing video clip. Turn on
volume to hear screen reader
Repo...
Support ADA accessibility (2)
Accessibility review of UCC app includes code fixes
21
Uniform Commercial Code application
Maintain professional, uniform interface
Build customer confidence with brand voice, tone and style
Reduce customer frustr...
Make it repeatable: Documentation
Web Visual Style Standards
Web Editorial Guidelines
23
Topics:
• Visual style: branding,...
24
UX FTW!
User Experience for the Win!
We can do this – we already are!
Rework is costly.
Iterative user experience desig...
25
Questions?
Jacqueline Sowell
Social Media and Web Strategist
Oregon Secretary of State
jacqueline.sowell@state.or.us | ...
Upcoming SlideShare
Loading in …5
×

User Experience Design (UX) for the Win!

742 views

Published on

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.

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
742
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

User Experience Design (UX) for the Win!

  1. 1. Oregon Secretary of State Jacqueline Sowell May 5, 2014 1 UX FTW! (User Experience for the Win!) UX Design in Application Development
  2. 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. 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. 4. After website redesign 4 Usage up 275% Page views up 1,065%usage|
  5. 5. After website redesign 5 Bounce rate down 53% bounces|
  6. 6. Completed or in the works 6 applications
  7. 7. Rebrand and refine Before: No brand. Dated design After: Design is true to SoS brand 7 Historical Trademark Search application
  8. 8. Modernize and standardize 8 App Home page Search results list Detail view Historical Trademark Search application
  9. 9. Modernize and standardize (2) 9 Before After: New application. New design. Central Business Registry application (CBR/OBR)
  10. 10. Modernize and standardize (3) 10 Before: Home page During: Mock ups After: Full redesign Municipal Report Search application (MUNI)
  11. 11. Apply user interface conventions 11 Before: Long, repetitive list During: Mock-ups guide development Shop the Archives application
  12. 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. 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. 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. 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. 16. “Don’t make me think!” Design for simplicity and clarity of function 16 Oregon Business Registry application
  17. 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. 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. 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. 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. 21. Support ADA accessibility (2) Accessibility review of UCC app includes code fixes 21 Uniform Commercial Code application
  22. 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. 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. 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. 25 Questions? Jacqueline Sowell Social Media and Web Strategist Oregon Secretary of State jacqueline.sowell@state.or.us | gotsowell@gmail.com | @gotsowell

×