Modernizing a Utility Company: From Tech to Team Case Study

How we partnered with a customer-focused utility company to modernize its technology stack and level up its team, design, and user experience.

This post is part of a series on our engagement with Knoxville Utilities Board (KUB). You can also read more about our planning engagement (part 2), our design efforts (part 3), or how we co-developed a pattern library that fed a content management system and Ember applications (part 4).

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. Last year, 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 Engagement Motto

The engagement started in June 2015 and the site launched in September 2016. Continuous deployments were critical to a healthy feedback loop and confident deployment process.
The engagement started in June 2015 and the site launched in September 2016. Continuous deployments were critical to a healthy feedback loop and confident deployment 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, 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 pattern library 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.

Capitalizing on Improvements

Not only did KUB want to deliver their users a fast, mobile-friendly, modern site experience, they also wanted to use their website redesign to address and improve several business processes. There were many opportunities for improvement with this engagement.

Improve User Experience On Every Device

Voting on goals at kickoff.

We gathered with more than a dozen stakeholders in Knoxville for a kickoff meeting where we came prepared with interviews, discovery, and user research to guide the planning.

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 Study

Better Content Publishing

Not only did we want to help the KUB team better serve their customers, we wanted to make it easier for them to do so. The process of revamping the website allowed for our teams to assess their content publishing strategy and provide solutions for how they could more easily, centrally, and automatically publish content such as outage statuses, construction updates, or 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

The homepage before relaunch: the redesign was a chance to revisit the KUB brand and imagery, and to modernize their look and feel.

To take relevant content and well-thought usability further, this redesign would be a chance to revisit the KUB brand and imagery, and to modernize their look and feel. We had a chance to rethink the visual representation of KUB on the web. 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.

Building an Enterprise Design System: From Static Comps to a Pattern Library

Leveling Up Tech: Team and Process

We work with companies to maximize their investment in the web, as well as the team that runs and maintains their systems. Sparkbox was able to work alongside KUB’s own development team to supplement the development effort and also fill in gaps in their staffing, 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 systems and a pattern library to give a busy, but talented, development team the tools 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 Team

Sparkbox worked alongside KUB to teach the KUB team our development processes for tools, technologies, and build processes.

The 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.

The redesigned KUB homepage allows users to quickly initiate needed tasks.
The redesigned KUB homepage allows users to quickly initiate needed tasks.

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.

– The KUB team

Some of the major highlights include:

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 used 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, including:

“I just paid my bill—it could not have been easier!”

“Love the site upgrade—much easier to use!”

We took great care in wireframing, testing, and refining the new flows and language used to ensure the paths were clear and easy-to-use.

Modernized Design

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.

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 well-thought experience by way of 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 Processes

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 EmberJS applications for customer account management. This seamless experience is founded in friendly URLs without subdomains, a Pattern Library 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.

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.

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).

Performance Stats – Afte
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.

We also needed to think beyond the initial redesign and work with the KUB developers to build the tools to deliver 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 Pattern Library, downstream assets for their CMS, and an EmberJS addon. The KUB developers can now easily enhance and maintain the site using these modular components. 

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.

The pattern library we delivered allowed the KUB development team easily maintain and add new pages to the site.
The pattern library we delivered allowed the KUB development team to easily maintain and add new pages to the site.

Setting Up for Future Success

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 where we can work together 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.