Letting Users Get On With Their Lives

How Knoxville Utilities Board Created an Industry Leading Web Experience.

Presented at thepathtoagility.com

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
9. 925 Employees
10. $900,000,000 Budget
11. 445,000 Customers
13. 10,000 Miles of Pipe
15. 32,000 Manholes
17. 4th Largest Tennesse Valley Authority Distributor
19. BACKSTORY
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
29. Use Cases
31. Wireframes
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
44. 70% mobile
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
51. Ryan Cromwell Sparkbox
52. REDESIGN
53. Energy Company?
54. We know that!
55. CMS?
56. We do those!
58. That’s Us!
59. RWD?
60. Pssh - we helped make that.
62. Mentoring?
64. Behind the Scenes ‣ Prep ‣ Kickoff ‣ Big Picture ‣ Design Prototypes ‣ Pattern Library ‣ Process & Tools ‣ Challenges
65. PREP
66. Customer Interviews
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
73. ONSITE KICKOFF
76. EXERCISE: PRIORITIZE GOALS
77. ‣ 10 minutes ‣ Place your post-its on the goals you feel are most important PRIORITIZE GOALS: VOTE
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
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
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
101. Manifesto
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
110. Element Collage
114. DESIGN PROTOTYPES
115. Start, Stop, Transfer
117. Pay My Bill
119. PATTERN LIBRARY
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
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
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
153. Trello
155. Standups
158. Slack
160. Github
163. CircleCI
165. CodeClimate
167. Heroku Review Apps
169. All Pull Requests Deployed
171. Pattern Library ExpressionEngine ember-cli-kub (Ember) My Account (Ember) Outage Center (Ember) ?
172. Drops Process
175. Weekly Releases
177. Feedback Loops
178. Corrello
183. CHALLENGES
185. Too Many Tools
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