OUC
You don’t become a national leader in providing reliable utility services without forward-thinking, planning, and innovation. To stay ahead of the game, Orlando Utilities Commission (OUC) launched a 2012 initiative to upgrade their online services. This is the story of how I helped Central Floridians better engage with their utility provider through technology.
My Role
As the design lead, I was responsible for user experience strategy, interaction design, art direction, and visual design for both the consumer website and account management application. I produced all major deliverables in these areas during the course of the project life cycle, roughly between summer 2012 and spring 2013.
Close collaboration
I worked closely with my project manager and fellow team members, including a junior designer and UX intern who assisted me in content strategy and design execution. Together we partnered closely with OUC across its many internal teams and external vendors.
Strategy and vision
I created frameworks and prototypes that helped communicate ideas, simplified complex processes, and informed decision making across multiple large teams.
Design execution
I created mood boards, UI Kits, user flows, wireframes, and detailed design concepts to visualize solutions and product features.
Leadership
I presented designs and concepts to key stakeholders and team members to gain consensus and buy-in. I provided guidance and direction to junior team members.
The Challenge
Optimize customer interactions
Since 1923, Orlando Utilities Commission (OUC) has been proud to serve its customers reliable electric and water services, and OUC knew what its customers wanted–the same convenient, secure, and on-demand access to information offered by their banks, credit cards and other service providers. With rapid growth of traffic to its website, OUC saw an opportunity to transition its customers to more economical and efficient self-service channels. Not only did this opportunity have huge potential for cost-savings, but increased customer satisfaction as well.
By converting customers to using its online products and services, OUC could significantly reduce costs, balance their level of service, and provide competitive rates.
Source: OUC 2012 annual report.
The Approach
Technology-driven customer strategy
By leveraging advances in technology, OUC would not only improve self-service features online, but move to a completely digital electric and water meter network and meter data management system. This would establish the foundation for providing an online dashboard that allows customers to better monitor their consumption, as well as future products and services.
Also included would be a redesign of OUC.com and a revamp of OUC’s customer-facing phone system to mirror the functionality and self-service features on the new website. The new Interactive Voice Response (IVR) system would give customers the ability to manage their accounts, pay bills, etc., while minimizing calls to customer service.
Together, these improvements sought to create a seamless customer experience, and would become the most expansive web project in OUC history.
The Discovery
Uncovering insights
The first phase of this monumental project involved making sure expectations matched the time and budget. To help with this, an extensive project plan was collaborated on and consisted of scope, project goals, technical planning, proposed timeline, responsibilities, and other planning documentation. This was provided to senior client stakeholders.
To understand OUC as a company, including its unfamiliar internal processes and lingo, we would often work closely with their teams on-site, created glossaries of terms, and immersed ourselves into the business side of the company as much as we could. This in turn helped us identify constraints or opportunities along the way that would affect the definition or design of the application.
Excerpt from project glossary.
Data Gathering and Research
During the research phase, we gathered as much data as possible on the current experience of customers, as well as their needs, views and goals. We conducted interviews, reviewed customer surveys, identified audiences, and analyzed existing data. We also conducted competitive analyses to gain understanding of the competitive landscape, especially on dashboards and digital experiences.
Key Insights
The following are a few of the insights we uncovered that helped shape the product:
We identified 5 audience types that needed to be accounted for, with customers being our primary user.
Making a bank account payment was the most important service to customers in online account management.
Most customers preferred accessing their account from their home computer as opposed to their smart phone.
Customers were having a lot of trouble remembering answers to security questions or their login information.
After auditing the current product, we found that not only did critical tasks such as paying your bill needed a lot of attention, but so did the content strategy. We were going to need to completely restructure the site’s information as it was disorganized and took users in circles. More guidance and clarity needed to be given to users as they performed self-service tasks.
The Vision
Round-the-clock Convenience
Utility service is a 24/7 operation. By enabling customers to easily complete forms, make a payment, report an outage or even start, stop or move service without having to talk to a customer service representative, OUC could extend the same round-the-clock convenience to its customers. To help customers accomplish these tasks, we wanted to focus on how the suite of sites would work and not just their “look and feel”. By taking the entire customer experience to the next level, we sought to make OUC the best utility service in the nation.
The Framework
How we got there
Several large-scale, on-site workshops with different cross-functional teams took place for everyone to get on the same page with requirements. Smaller review sessions occurred regularly, including internal reviews and reviews with the client. Prior to doing any wireframing or detailed work, I would often collaborate with the team on process flows or refine ideas through sketching. I performed supplemental research where needed, such as with the homepage, dashboard, and payment sections. Business and functional requirements, hefty in size and supplied to us by OUC, were used closely during framework definition.
Restructuring content with card sorting
Building off of findings from a content audit and research, the team conducted a card sorting exercise to develop a better information architecture for the site. We then tested it with cross-functional OUC employees during a card sorting “event” we held on-site. We wanted to see what solutions they would come up with and then measure them against ours. If we did it right, the solutions would be similar. If they weren’t, we’d need to do some revising.
Table documenting card sorting results conducted with OUC employees.
After documenting the findings and evaluating the data, we found some of the labels we had for the primary navigation were too similar. They were confusing people on where to go for service information vs. managing their account. Because of this valuable input, we were able to address the issue and give more clarity to the site’s navigation.
One of several iterations of the revised information architecture based on research.
Prototyping with wireframes
I began laying the foundation for interaction design by creating annotated wireframes driven by our research data. This became one of the biggest challenges I faced with this project, just due to the sheer amount of wireframes that needed to be created and maintained. The time it took me to revise them resulted in a huge amount of overhead. In the end, I created over 300 unique wireframes, and they went through multiple iterations.
Mobile navigation storyboard with annotations.
Once a good amount of wireframes were in place, I used InVision to create an interactive prototype which was presented to stakeholders. Due to the complexity of the project, this was an essential step in the process. The prototype was invaluable in explaining complex processes to large teams of people and gaining consensus on direction.
My initial exploration of the Account Summary dashboard started with two concepts, each with a different navigation pattern. We moved forward with concept A, which in itself went through about 5 iterations.
Validating design with user testing
Prior to moving into the detailed design phase, we tested the framework with two separate usability tests. The first test was conducted across two group sessions with current customers. A range of incomes, zip codes, ethnicities and age groups were represented by a total of 30 participants. They were asked to individually perform tasks using a clickable prototype and rank their level of difficulty, as well as answer a post test questionnaire.
We gained overwhelmingly positive feedback. Customers found the prototype to be easy to use, simple and functional. Very few tasks were ranked as difficult to complete. The biggest pain points centered around labels and what kind of content users associated with them. They also needed more help knowing where to go to change their billing preferences. After the tests were conducted, our findings were documented, analyzed, and addressed accordingly.
Our second test was done with the same prototype, but with non customers using the third party service UserTesting. Our findings during the card sorting exercise were confirmed; labels of the main menu needed more clarity, and placement of certain content needed to be rethought. However, overall feedback was again positive. Together with the previous test results, the team and stakeholders felt confident in the direction we were going. This input, together with the previous test results, gave the team and stakeholders confidence in the direction we were going.
Data from usability testing.
Detailed Design
Turning ideas into reality
This project’s scale was too large to wait until framework definition ended before beginning detailed design. There was just too much to document, review, test, and review again. To make sure we met our deadline, I began thinking about detailed design fairly early. But before that, a brand re-fresh was needed.
Setting the mood
The branding of OUC’s existing site was dated. I needed to breath new life into it, but maintain the existing corporate identity. This task was executed within the framework phase. This allowed me time to explore and establish an improved visual language and gain buy-in before serious work on detailed design was needed.
In creating the look and feel, I wanted to juxtapose organic and natural with geometric and tech. The company was going through a technological renaissance, but at it’s core was sustainable use of energy and water resources. To help accomplish this, I used photography with a focus on nature and incorporated subtle geometric accents. I chose a dominant use of white and crisp lines to give a modern feel. Incorporation of darker, neutral tones provided contrast and depth. The vibrant color palette, unchanged from what was already established, represented the company’s energetic nature.
Moodboard.
The Dashboard
One of the most mission-critical pieces of this project was the account summary dashboard. It needed to successfully meet many requirements–and expectations. Top priorities included clear summary of a customer’s billing and account information, easy access to make a payment, and simple, intuitive navigation. Consumption information was originally viewed as a “nice to have”, but later became an integral part of the overall initiative.
Evolution of the Account Summary dashboard. The final concept was unfortunately unable to accommodate certain details in the previous iteration due to technical restraints, such as within the consumption graph area.
The Homepage
The homepage needed to support business initiatives while also supporting user needs. This required careful collaboration with the client to make sure both these needs were properly defined and met. I gained consensus on a direction that was simple, focused, and invited customers to dive deeper.
The before and after designs for the OUC.com homepage.
Design delivery approach
A chunked approach to design delivery was taken. I would deliver sections to the engineering team and go on to work on the next design topic, while the engineers worked on what was given to them. This started far enough down the project life cycle that the engineers had a decent backlog of design documentation to work from that was unlikely to be revised.
Design documentation including type and screen specs.
OUC.com
The final design
OUC’s consumer facing website provides residential and commercial customers a resource for service rates and costs, account management, energy saving tips and tools, and self-service options such as reporting an outage or starting service.
Signposting category pages
Image-rich category pages allow visitors to get a quick overview of content before diving deeper. Prominent hero areas illustrate the selected category and enforce the brand.
Understanding your bill
To help customers understand how to interpret their monthly bill, they can view what each area on their statement means through an interactive example bill.
Making Registration Easy
A new registration process helps guide users as they create their account, set up security questions, and connect to a personalized dashboard.
myOUC Dashboard
The account summary dashboard allows customers to monitor their monthly water and energy usage, pay their monthly bill, update account information, and access self-service options. With the addition of both digital electric and water meters to OUC’s tech arsenal, customers can view their consumption and make usage decisions accordingly.
Painfree Payment
Customers are given a variety of ways to pay their bill, including online with a check, or an automatic recurring payment through OUC’s AutoPay system.
Automating utility services
Customers can request to start, stop, or move their service by submitting an online form. Service request activity can later be monitored on the Service Request Status page.
The Outcome
Project impact
154%
Increase in myOUC online profiles
90%
Increase in AutoPay customers
91%
Increase in paperless billing customers
The technology improvements of this initiative allowed OUC to greatly streamline and improve their customer experience. At launch, they became one of only three utilities in the country to fully automate customer service offerings on both the website and phone. They also entered into the top 7% of utility providers to offer a responsive web experience.
Source: OUC 2012 annual report.