Case Study: OUC

Customers needed a clear, convenient way to pay bills, manage their accounts, and find utility information online. Confusing navigation and difficulty signing in make self-service harder for customers.

OUC wanted to improve that experience while encouraging more use of its online services, reducing customer interaction costs, and supporting customer satisfaction.

I led UX strategy, interaction design, art direction, and visual design for the consumer website and account management application, producing all major design deliverables in these areas throughout the project.

I worked closely with the 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 with OUC’s internal teams and external vendors to align customer needs, business priorities, and technical constraints.

My work included frameworks and prototypes, user flows, mood boards, UI kits, wireframes, and detailed design specifications. I presented recommendations to stakeholders, built agreement around design decisions, and guided junior team members.

The first phase of this large-scale project involved making sure expectations matched time and budget. To help with this, an extensive project plan was delivered to senior client stakeholders and aligned everyone on scope, responsibilities, and technical constraints.

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.

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, with customers being the primary user. This guided our approach to the new information architecture.
• Making a bank account payment was the most important service to customers in online account management. This would directly inform the design of the dashboard.
• Most customers preferred accessing their account from their home computer as opposed to their smartphone (at the time of the research).
• Logging into accounts was difficult for many customers. The customer service department reported many customer complaints of trouble remembering answers to security questions or their login information. The UX for recovering passwords and log in information would need to be carefully analyzed.
• The site’s information was disorganized. Restructuring information and providing clearer guidance through self-service tasks needed to be provided to users.

Several large-scale, on-site workshops with different cross-functional teams took place as we defined 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, which spanned hundreds of pages of documentation, were supplied to us by OUC and were used closely during framework definition.

Building off of findings from a content audit and research, the team conducted two separate card sorting exercises to develop a better information architecture for the site. We first conducted an internal sort, followed by an on-site session with employees from across OUC.

Employee feedback informed us 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. The architecture was updated and we were able to address the issue and give more clarity to the site’s navigation before designs were finalized.

I began laying the foundation for interaction design by creating annotated wireframes driven by our research data, covering navigation, account management, and self-service flows. Across more than 300 unique wireframes and multiple iterations, these documents defined interactions and communicated detailed behavior to the project team, including stakeholders, engineers, and subject-matter experts. The wireframes also served as a basis for validating designs through prototyping and user testing.

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.

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.

Concept A was chosen for its secondary navigation placement and pattern along the left side of the page, which provided both easy scannability and future scalability. Further refinement and evolution of the design took place, including simplification in the consumption graph’s visual styling due to technical constraints. The intended styling and gradients in the bars of the graph couldn’t be easily accommodated by the engineering team, so solid color and basic rectangle shapes were used instead.

Prior to moving into the detailed design phase, we tested the framework with two separate usability tests.

Usability test #1

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 learned the biggest pain points centered around labels and what kind of content users associated with them (their “information scent”). Participants also needed more help knowing where to go to change their billing preferences.

Usability test #2

Our second test was done with the same prototype, but with noncustomers using the third-party service “UserTesting”. Our findings during the card sorting exercise were echoed during this test; labels of the main menu needed more clarity, and placement of certain content needed to be rethought. This input, together with the previous research, gave the team and stakeholders confidence in the direction we were going, as overall feedback was positive, and the design changes needed were relatively minor. Our findings were documented, analyzed, and the appropriate design changes were made, including adding better wayfinding cues to help customers find where to go to change billing preferences and refining navigation labels.

The branding of OUC’s existing site was dated. It needed a fresh take while maintaining the existing corporate identity. This task was executed within the framework phase, which allowed time to explore and establish an improved visual language and gain buy-in before serious work on detailed design was needed.

The new visual language paired organic and nature imagery with geometric accents. This reflected the core culture of the company and its focus on sustainable use of energy and water resources, while still embracing advancements in technology. The dominant use of white and crisp lines lent a modern feel, while still preserving the established color palette. Neutral tones provided contrast and depth.

A chunked approach to design delivery was taken. I would deliver finalized design sections to the engineering team and then work on the next design topic. Design mockups were annotated with specifications and components were standardized using a UI kit. Regular meetings with the engineers to review progress helped keep implementation aligned with the designs.

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 website and phone. They also entered into the top 7% of utility providers to offer a responsive web experience.