Letting Users Get On With Their Lives

Letting Users Get On With Their Lives

How Knoxville Utilities Board Created an Industry Leading Web Experience.

Presented at thepathtoagility.com

32de0bd2ba869609d26fd052a4622778?s=128

Ryan Cromwell

May 25, 2016
Tweet

Transcript

  1. Collaborative Note-taking: bit.ly/kub-path

  2. Ryan Cromwell Sparkbox Web Experience Workshop DeWayne Lane Knoxville Utilities

    Board
  3. How Knoxville Utilities Board Created an Industry Leading Web Experience

    Letting Users Get On With Their Lives:
  4. Dewayne Lane Knoxville Utilities Board

  5. ABOUT KUB

  6. Knoxville Utilities Board

  7. None
  8. None
  9. 925 Employees

  10. $900,000,000 Budget

  11. 445,000 Customers

  12. None
  13. 10,000 Miles of Pipe

  14. None
  15. 32,000 Manholes

  16. None
  17. 4th Largest Tennesse Valley Authority Distributor

  18. None
  19. BACKSTORY

  20. 2004

  21. None
  22. Enterprise Architecture

  23. JSP

  24. JSP SOAP SOAP SOAP SOAP SOAP

  25. JSP SOAP Queues Queues Queues Queues SOAP SOAP SOAP Queues

    SOAP
  26. JSP SOAP Queues Oracle Cobol Lotus Notes Queues Queues OMS

    Queues SOAP SOAP SOAP PeopleSoft Queues SOAP
  27. Enterprise Process

  28. None
  29. Use Cases

  30. None
  31. Wireframes

  32. None
  33. STORY TIME

  34. Real Time Payments

  35. “Press 1 to make a payment”

  36. Kiosk

  37. Credit Card Processor

  38. Same Service Infrastructure!

  39. Real Time Outage Reporting

  40. First Storm

  41. 3 Outage Reports Online

  42. 40% chose m.kub.org

  43. None
  44. 70% mobile

  45. None
  46. None
  47. SOAP Queues Oracle Cobol Lotus Notes Queues Queues OMS Queues

    SOAP SOAP SOAP PeopleSoft Queues SOAP JSP
  48. JSON SOAP Queues Oracle Cobol Lotus Notes Queues Queues OMS

    Queues SOAP SOAP SOAP PeopleSoft Queues SOAP JSP
  49. ESB People Soft Oracle Cobol OMS JSP

  50. None
  51. Ryan Cromwell Sparkbox

  52. REDESIGN

  53. Energy Company?

  54. We know that!

  55. CMS?

  56. We do those!

  57. None
  58. That’s Us!

  59. RWD?

  60. Pssh - we helped make that.

  61. None
  62. Mentoring?

  63. None
  64. Behind the Scenes ‣ Prep ‣ Kickoff ‣ Big Picture

    ‣ Design Prototypes ‣ Pattern Library ‣ Process & Tools ‣ Challenges
  65. PREP

  66. Customer Interviews

  67. None
  68. “Initial shock of I don’t know what I’m doing.” GENERAL

    WEBSITE FEEDBACK
  69. “The information served was good, but it wasn’t easy to

    find.” GENERAL WEBSITE FEEDBACK
  70. ‣ Site looks outdated ‣ If users knew mobile site

    existed, they liked it. ‣ Primary use-case is to pay bills ‣ Outage map is helpful ‣ Most users “just know around the time” a bill is due, and when to visit site. GENERAL WEBSITE FEEDBACK
  71. Stakeholder Interviews

  72. None
  73. ONSITE KICKOFF

  74. None
  75. None
  76. EXERCISE: PRIORITIZE GOALS

  77. ‣ 10 minutes ‣ Place your post-its on the goals

    you feel are most important PRIORITIZE GOALS: VOTE
  78. None
  79. Goal 1 Be the quickest, easiest, and most accessible place

    to complete a task with KUB.
  80. Goal 2 Provide findable, relevant, precise content for our audiences.

  81. Goal 3 Increase website customer satisfaction.

  82. Goal 1 Measure Decrease form abandonments by 30% for the

    Start/Stop, Pay Bill, and Report Outage flows.
  83. Goal 3 Measure 20% increase in website customer satisfaction on

    the survey provided on the website.
  84. EXERCISE: HOMEPAGE

  85. ‣ Step 1: Content Brainstorm ‣ Step 2: User Feelings

    ‣ Step 3: Vote ‣ Step 4: Discuss HOMEPAGE EXERCISE
  86. None
  87. EXERCISE: INFORMATION ARCHITECTURE

  88. ‣ Pay My Bill ‣ Outage Map ‣ Report an

    Outage ‣ Contact Customer Service ‣ Payment Locations ‣ Start/Stop Service ‣ Job Openings ‣ Open Bids & Surplus Items ‣ Property Management Plan ‣ Computer Energy-Saving Tips ‣ Economic Development ‣ Green Power ‣ News Releases ‣ Round It Up (billing program) ‣ Electric Service ‣ Gas Service ‣ New Construction ‣ PACE 10 (Wastewater Improvements) ‣ Automated Phone System ‣ Business Energy Audit & Incentives ‣ Protecting Against Scams INFORMATION ARCHITECTURE EXERCISE
  89. None
  90. None
  91. EXERCISE: STYLE TILES

  92. ‣ Quick style explorations in under 
 10 minutes ‣

    None are the correct answer, just explorations for discussion ‣ Write notes on printouts, but look at designs on the projector screen STYLE TILES
  93. None
  94. None
  95. None
  96. None
  97. None
  98. None
  99. None
  100. None
  101. Manifesto

  102. None
  103. “…will serve KUB, and its audiences, for the next 6-10

    years…”
  104. “…improving customer satisfaction and reducing operating costs.”

  105. “Users should be able to come to our site, find

    what they’re looking for, do what they need to do, and get out and get on with their lives.”
  106. BIG PICTURE

  107. Content Audit

  108. None
  109. None
  110. Element Collage

  111. None
  112. None
  113. None
  114. DESIGN PROTOTYPES

  115. Start, Stop, Transfer

  116. None
  117. Pay My Bill

  118. None
  119. PATTERN LIBRARY

  120. None
  121. None
  122. None
  123. None
  124. None
  125. ‣ Task Runner: node & npm ‣ Javascript: ES6 via

    Webpack ‣ Templates: fabricator, assemble, handlebars ‣ CSS: Sass, PostCSS & Autoprefixer ‣ Icons: SVGs via Grunticon ‣ Hosting: Heroku PATTERN LIBRARY TECH
  126. EXPRESSION ENGINE CMS

  127. ESB People Soft Oracle Cobol OMS

  128. ESB People Soft Oracle Cobol OMS

  129. Mission: Unified Experience

  130. None
  131. ‣ Minimize EE Customization ‣ Surface Account Information ‣ Deep

    Integration with Account “App” CHALLENGES
  132. ‣ Share Data Via Cookies ‣ ExpressionEngine Templates ‣ Structured

    App Urls ‣ Content Services SOLUTIONS
  133. MY ACCOUNT

  134. ESB People Soft Oracle Cobol OMS

  135. None
  136. None
  137. None
  138. None
  139. None
  140. None
  141. ‣ Ember ‣ Ember Data w/ Custom Adapters ‣ Mirage

    MY ACCOUNT TECH
  142. JSON SOAP Queues Oracle Cobol Lotus Notes Queues Queues OMS

    Queues SOAP SOAP SOAP PeopleSoft Queues SOAP JSP
  143. JSON SOAP Queues Oracle Cobol Lotus Notes Queues Queues OMS

    Queues SOAP SOAP SOAP PeopleSoft Queues SOAP JSP JSON v2
  144. SOAP Queues Oracle Cobol Lotus Notes Queues Queues OMS Queues

    SOAP SOAP SOAP PeopleSoft Queues SOAP JSON v2
  145. PROCESS

  146. Content UX Design Dev START Build (In browser) Planning Update

    END Update Update Update Update Update Update Update Update
  147. Wireframes

  148. None
  149. None
  150. None
  151. None
  152. None
  153. Trello

  154. None
  155. Standups

  156. None
  157. None
  158. Slack

  159. None
  160. Github

  161. None
  162. None
  163. CircleCI

  164. None
  165. CodeClimate

  166. None
  167. Heroku Review Apps

  168. None
  169. All Pull Requests Deployed

  170. None
  171. Pattern Library ExpressionEngine ember-cli-kub (Ember) My Account (Ember) Outage Center

    (Ember) ?
  172. Drops Process

  173. None
  174. None
  175. Weekly Releases

  176. None
  177. Feedback Loops

  178. Corrello

  179. None
  180. None
  181. None
  182. None
  183. CHALLENGES

  184. None
  185. Too Many Tools

  186. None
  187. None
  188. None
  189. None
  190. None
  191. None
  192. Hangouts

  193. Measuring Progress

  194. WHERE ARE WE NOW?

  195. Security Testing

  196. Load Testing

  197. July Soft Rollout Employees Only

  198. Polish

  199. Outage Maps

  200. September Rollout

  201. (picture of site full/ mobile)

  202. KUB will be hiring! dewayne.lane@kub.org

  203. buildright.io | seesparkbox.com

  204. Tickets are now available at buildright.io

  205. QUESTIONS?

  206. (picture of site full/ mobile)

  207. THANKS! @fdlane dewayne.lane@kub.org @cromwellryan ryan@heysparkbox.com