Your SlideShare is downloading. ×
User Experience Design (UX) for the Win!
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

User Experience Design (UX) for the Win!


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, …

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

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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 | | @gotsowell