Website Re-design
California Energy Commission
Providing access to key resources on clean energy policies in California
The California Energy Commission (CEC) needed a re-design for their public website to meet the web accessibility standards (WCAG 2.0) along with an improved information architecture and updated visual design. The website re-design improved the usability and organization of content of the website, along with being updated visually to align with CEC’s style guide and branding standards.
ROLE
UI Designer
CLIENT
California Energy Commission
AGENCY
SymSoft Solutions
YEAR
2018
BEFORE
AFTER
Overview
As the lead UI Designer of the project, my role consisted of being involved in preliminary user research, user interviews, website analytics, information architecture, wireframing, visual design mockups, interactive prototyping, style guide documentation, frontend development and quality assurance testing.
The California Energy Commission website was used by to communicate information about energy planning and policies in California. They needed a major design overhaul and content re-organization. In addition, the website was not optimized for accessibility or responsive for mobile. The need for an accessible website was crucial in order to comply with ADA requirements and standards.
PHASE ONE
Research & Discovery
Content Audit & Google Analytics
Since this website needed a major content re-structure, we conducted a full content audit by analyzing the website’s Google Analytics. This gave us insight on the pages that generated the most traffic, which we found were the most important pages to users. We also identified the pages that received less traffic.
User & Stakeholder Interviews
One of the first steps of the research process was to conduct user and stakeholder interviews. We asked questions around how they currently use the website, what problems they’re facing, and discussed areas where they would like to see improvement. The results of these interviews were analyzed and recorded in the spreadsheet below. I took each request and identified which requests were the most commonly asked.
PHASE TWO
Information Architecture
Re-thinking the content structure
Based on our content audit discovery, we proposed that the information architecture and navigation of the website should be topic based rather than departmental based. Our findings show that organizing pages by department is not very intuitive to audiences who are not employed by the commission, making it difficult for users to navigate the website and find what they are looking for.
PHASE THREE
Design Sprints
Exploring design ideas
During the initial phase of the project, we conducted design sprints with the primary stakeholders of the website, along with users who access the website frequently. We identified the pain points, possible improvements and additional things that were needed for the website. As a result, we collaboratively created the initial wireframe sketch for the homepage. The wireframe sketch was then digitally produced for interactive prototyping.
Once we had the homepage layout in place, we identified additional page layouts that were needed for the website. These additional page layouts included a landing page and a detail page.
PHASE FOUR
Visual Design
Final User-Interface Design Mockups
After collaborating with stakeholders, internal team members, and potential users of the new website, we landed on the final user-interface design mockups that would move forward with development. We designed page templates for a home page, landing page, department page, and article page.
PHASE FIVE
Design Documentation
Visual & Functional Design Specifications
As part of the development handoff process, I produced documentation on functional and visual design specifications to ensure that the designed are developed as proposed. These specifications included each UI element with their functionality description, along with their rules and limitations.
