Sempra is an energy infrastructure company based in San Diego, California focused on producing electricity and natural gas and own utility companies around the world.
Release date
7.15.2017
Project Span
10 Mos.
Role
UX Lead

Project Scope

Project Scope

Project Scope

The Sempra website redesign spanned almost a year. I was responsible for all UX deliverables. I collaborated with the art director to refine visuals and interactions then with the development team to communicate site functionality.

Outline browser displaying a screenshot of the old Sempra homepage

Assignment

  • Competitive analysis.
  • Create a new site structure.
  • Build an interactive map to feature all energy plants.
  • Create a robust newsroom.
  • Represent the company as an innovator.
Browser outline with a screenshot of the 2016 website redesign homepage

Contributions & Deliverables

  • Competitive Analysis (direct and indirect)
  • Sitemapping
  • Wireframes
  • Collaborate with the senior art director and content strategist
  • Stakeholder Interviews

A New Likeness To Lead A Vision

The site redesign was to reflect Sempra’s forward-thinking, stewardship for the environment, clearly communicate to investors financial information, represent their employee community involvement, and be responsive.

At first, I felt like this was going to be another company brochure site that called for no interactions. But while auditing the site, I saw the possibilities to add interactions to make the content more engaging on a low-interest site. Luckily, the client was open to exploration and new design patterns. I cleaned up the content and gave the site architecture a better taxonomy to display information cohesively.

The homepage no longer had to be above the fold, and the user was now allowed to scroll and explore content. I was able to create about 15 templates for the site and an option of a generic page template that would permit Sempra to add content with different layout possibilities, allowing variation of content within templates made for specific layouts. These changes gave Sempra the opportunity and flexibility to create different types of pages with one template when needed.

Mobile screenshots of a map and sustainability category landing pageTwo outlines of iPhone 10s with a screenshot of the interactive map and sustainability list options
Mobile screenshots of internal Sempra.com pagesMobile screenshot of investing for communities page

The homepage no longer had to be above the fold, and the user was now allowed to scroll and explore content. I was able to create about 15 templates for the site and an option of a generic page template that would permit Sempra to add content with different layout possibilities, allowing variation of content within templates made for specific layouts. These changes gave Sempra the opportunity and flexibility to create different types of pages with one template when needed.

I created an updated version of an existing map module that had many disjointed triggers and interactions. The new map allowed users to read and view types of energy sources and locations of Sempra companies. This map included different kinds of icons to make the interactions look more engaging. In addition, I built a clean, easy-to-use newsroom that functioned as an easy-to-update dynamic landing page and fed third party content.

At the site's launch, the client and shareholders were more than pleased. I was able to create interactions on a site whose sole purpose was due diligence for investors and bring that to life by bridging who they are with the innovations they are proud personified through the new site.

Winner of the

2018 Internet Advertising Competition Award,
Best Energy Website

Wireframes

This interactive map displayed Sempra’s companies, resources, and locations worldwide. It was leaps and bounds from what they had. However, this map was something the client decided to remove from their site long after we delivered the final product. These things happen. Here are some screens from the original comps.

AltaMed (Redesign)

The client had one important  KPI to be tackled. Too many service center calls due to broken features.

View Case Study >>

AltaMed (Redesign)

The client had one important  KPI to be tackled. Too many service center calls due to broken features.

View Case Study >>

AltaMed (Redesign)

The client had one important  KPI to be tackled. Too many service center calls due to broken features.

View Case Study >>

AltaMed (Redesign)

The client had one important  KPI to be tackled. Too many service center calls due to broken features.

View Case Study >>

AltaMed (Redesign)

The client had one important  KPI to be tackled. Too many service center calls due to broken features.

View Case Study >>

AltaMed (Redesign)

The client had one important  KPI to be tackled. Too many service center calls due to broken features.

View Case Study >>