My Role
I was the principal user experience designer. I was responsible for leading the project, coordinating user experience design activities, reorganizing the navigation, managing external vendors, and working with internal stakeholders.
Tools used:
Slickplan, Optimal Workshop
The Problem
I was brought into rearchitect the navigation on pge.com in preparation for a redesign.
The old pge.com website had over 4,000 pages, many of which were outdated, had not been updated in a long time, or were no longer relevant to customers. The information architecture had been reorganized several times over the years, but was usually organized with the business, executives or marketing in mind. The customer experience was ignored. Industry jargon was used throughout the content, it was difficult for customers to navigate and find content, and the website was not accessible or responsive.
I'm going to illustrate the process rather than showing the end result. We used user centered design techniques in the process, including card sorts and tree tests to help organize the navigation. We made extensive use of online tools such as Slickplan and Optimal Workshop.
Goal
The goal with the upcoming redesign was to narrow down the number of pages to under 1000, design and develop a responsive and accessible website, and rearchitect the information architecture to meet the customer's needs.
A user centered design process diagram from Usability.gov.
User Centered Design Process
I wanted to utilize a user centered design process and incorporate user feedback into the process. We ended up using card sorts and tree tests as a way of bringing customer feedback into the process.
Process
The process I followed
Business Stakeholders
Business stakeholders provided requirements during the discovery phase.
They provided feedback on the cart sort test plan, tree test plan, business requirements, participated in ideation, brainstorming and organization of the navigation, and provided feedback on the redesigned information architecture.
Customer Stakeholders
Customer stakeholders included residential customers, small business customers, and medium to large sized business customers. Customer stakeholders provided insights, requirements and feeback throughout the process. They provided key feedback during the card sort and tree test.
Competitive Analysis
A competitive analysis was conducted by myself, looking at the top 10 residential energy utilities and the top 10 business energy utilities. Additionally, I looked top and innovative energy utilities outside the US to analyze their website. I also looked at top and innovative corporate websites. Results were presented to stakeholders.
Card Sort
A card sort was conducted using optimal workshop. Working with Customer Insights and an outside research firm we did card sorts with 83 business customers and 300 residential customers. We used an online tool called Optimal Workshop to do remote card sorts.
Organize the Information Architecture
Working with IT, Digital Strategy and Customer Insights, we brainstormed and organized the navigation based on the inputs from the discovery, the competitive analysis, and the card sort.
I then iterated on the information architecture. Instead of using a desktop tool like Omnigraffle or Visio to create the information architecture, I used a tool called Slickplan to create the IA. Slickplan allowed the creation process to be collaborative, and share the IA with stakeholders in different locations.
It allowed us to track versions, collect feedback, and work real time on organizing the information architecture for pge.com.
Slickplan allowed me to do an initial scan and get a sense of the original information architecture of the website. The information architecture hierarchy was very broad and wide and very deep.
We went through many of versions of organizing the information architecture for pge.com. This is an earlier version of the site map.
This is a later version of the site map. The draft reorganization put the focus on the primary customer experience. Things that were most important to residential customers were put first, like My Account, Customer Service, Outages, Residential, Business and Safety as the top level categories (Orange). We wanted to have people find relevant information quickly. The proposed navigation went through many iterations based on the inputs from the card sort and feedback from the key stakeholders.
Tree Test
A tree test was then conducted on the proposed navigation using the Optimal Workshop Treejack product.
The tree test was performed by 300 residential customers and 100 business customers.
A report was provided to PG&E by the outside research firm. Overall the feedback was good. We took the results and incorporated the results into the information architecture. I iterated on several versions of the information architecture with the team.
Final Proposed Navigation
The final proposed navigation ended up looking like this. The feedback from the tree test was that customers wanted to have the information architecture focused on key tasks such as paying their bill, viewing and reporting outages, and getting help with customer service issues online.
The final proposed level one ended up looking like this.
