Knoxville Utility Board Case Study
Knoxville Utilities Board (KUB) provides electric, natural gas, water, and wastewater utilities to more than 400,000 Tennessee residents. The KUB staff members are dedicated to providing their customers with an outstanding user experience, especially on the web. When we began our engagement, they were ready to update their more than 10-year-old site to give their customers an improved online experience, particularly their rising base of mobile users. The KUB team engaged with Sparkbox to leverage our experience in planning and crafting successful enterprise-level web experiences to help them navigate this large endeavor.
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.
KUB Project Process
Crafting and shipping a new website from the ground up was no small feat. Fortunately, Sparkbox has the team and experience to plan for and develop enterprise-level websites. Our team engaged in a deep research and planning process to allow us to design for users while achieving business goals. We gathered with more than a dozen stakeholders in Knoxville for a kickoff meeting, where we came prepared with interviews, discovery activities, and user research to guide the planning. From there, we assembled a team of around 15 specialists from both Sparkbox and KUB to pair together in design, content strategy, and development. Our design team prepared thorough wireframes, prototypes, and static comps that would eventually lead to an extensive and robust design system to serve the development team through eight months of development effort. Our planning reached beyond the end site itself, though—we wanted to use this opportunity to achieve multiple business goals during the redesign.
Not only did KUB want to deliver their users a fast, mobile-friendly, modern site experience, but they also wanted to use their website redesign to address and improve several business processes. The engagement offered many opportunities for improvement.
Improve User Experience On Every Device
Above all, our collaborative effort needed to increase customer satisfaction with the website and provide a consistent, usable experience on any device. At the start of the engagement, the mobile site—a separate mdot experience—provided mobile users access to only select website content. Additionally, several of the critical user actions, such as managing accounts, paying bills, and even performing a site search, had a lot of opportunity for UX improvements to create better flows. Improving the user experience from the ground up would require a collaborative team approach between the web specialists at Sparkbox and the KUB team who knew their customers best. We leaned on our content strategy and UX team to help deliver solid plans for an improved user experience.
Planning an Enterprise-Level Redesign: Knoxville Utilities Board Case StudyBetter Content Publishing
Not only did we want to help the KUB team better serve their customers, we also wanted to make it easier for them to do so. Revamping the website allowed our teams to assess their content publishing strategy and provide solutions for how they could more easily, centrally, and automatically publish content. This content included outage statuses, construction updates, and other pertinent alerts being managed in central locations and being published to their users in the right spaces at the right time. We prioritized providing the team with a content management system very early in the redesign process to allow both teams to continually audit content, processes, and tools to serve their team better.
Design Improvements
To take relevant content and well-thought-out usability further, we used the redesign as a chance to revisit the KUB brand and imagery and to modernize their look and feel. In addition to providing great design work, we also wanted to make sure the team could continue to implement our designs and keep a consistent brand standard throughout future releases. A design system was what they needed.
Designing an Enterprise Design System
Leveling Up Tech: Team and Process
We work with companies to maximize their investment in the web as well as to maximize the team that runs and maintains their systems. Sparkbox was able to work alongside KUB's own development team to both supplement the development effort and also to fill in staffing gaps in areas like user experience and frontend design. This co-development arrangement gave us opportunities to work with the KUB team to level up their tools, technologies, and build processes. In addition to pairing and team building, we also could help them by developing ongoing tools and a design system to give a busy, but talented, development team the resources they needed to more efficiently maintain a large site and corresponding applications. The development was a hybrid effort between the Sparkbox and KUB development teams that spanned across every piece that made the site (including the content management system and Ember applications) and helped create a solid delivery cadence—re-scoping and planning as the engagement progressed.
Co-Development: How We Worked with the KUB TeamThe Result: A New, Updated Website
The end result of all the concentrated efforts was a modern, beautiful, responsive website that is far easier for the KUB internal teams to update and maintain.
Thank you to Sparkbox for a successful collaboration on KUB's new website. The site is beautifully designed to enhance our customers' web experience with streamlined workflows and responsive design. Sparkbox offered valuable expertise and experience to assist KUB with content organization, ensuring that the new site is customer-focused.
Some Major Highlights
Simplified User Experience Flows
Many of the key actions on the website were refined into simpler, more user-friendly experiences. We took great care in wireframing, testing, and refining the new flows and language to ensure the paths were clear and easy-to-use. The effort definitely paid off with the site receiving lots of happy feedback from users.
Modernized Design
The new KUB website has a beautiful design that engages users while still reflecting the local and established branding of KUB. The final result is a simplified, updated UI that gives KUB a modernized online presence. Whether starting or stopping service, checking outages, or paying a bill, current and new users will find the site easy to use and pleasing to the eyes.
Improved Technology and Process
A Seamless Mixed Stack
The KUB site now runs on a modern, consistent tech stack that is simpler to maintain, faster to load, and improves their code review and deployment processes. Our teams took great care to ensure users were not aware that KUB.org was built with a mix of ExpressionEngine CMS and Ember.js applications for customer account management. This seamless experience is founded in friendly URLs without subdomains, a design system distributed across ExpressionEngine and EmberJS, and a shared authentication system.
ExpressionEngine CMS is the place content managers go to publish content. When storms approach, KUB can prepare resources for customers and, at the flip of a switch, put the site into Storm Mode, delivering consistent, essential information and alerts across KUB.org.
Performance Enhancement
Many of the scenarios in which customers are contacting their utility provider are stressful: power is out, bills need paid, services need started or transferred. Minimizing this stress is essential. As we considered these scenarios, we knew great performance would be important always but especially during connectivity-challenged times like a storm. Designing and building with performance in mind led to a speed index half (~2300) of what it was prior (~5000) and better still than the minimally functional mdot version (~2800).
After the rebuild, we reduced load time 40% while cutting the speed index and number of requests by over 50% compared to the original desktop site. We even improved the speed index compared to the mdot site, which had very little content and functionality.
Design System Integration
We also needed to think beyond the initial redesign and work with the KUB developers to build tools for delivering more systems that honored the new aesthetic. The KUB team knew from the beginning that having a custom design system in place would help their team to more easily enhance the website and free their developers to focus on bigger efforts. We agreed and iterated early and often to deliver this for their team in the form of a static design system, downstream assets for their CMS, and an EmberJS addon. The KUB developers can now easily enhance and maintain the site using these modular components.
Results
Beyond delivering users an easy-to-use and beautiful experience on all devices, we're even more excited that we've helped set the KUB team up to maintain this site for many years to come. We love having opportunities to work as a trusted advisor to web teams, collaborating to deliver a great product and improve long-term processes. And hearing customer praise such as, "Thank you for the incredibly helpful website… it makes it much easier and faster to pay my bill," makes it all the better.
