Schweitzer Engineering Laboratories

A website redesign focused on improved navigation, product clarity, streamlined search, and clear calls to action.

Cover image for Schweitzer Engineering Laboratories
Client
SEL
Tags
#redesign
#CSS Grid
#CMS
#Angular

Product Pages

Schweitzer Engineering Laboratories (SEL), has a myriad of digital relays and devices that monitor and protect electric power. Often the feature sets of these products are incredibly dense and text-heavy and our team wanted a way to highlight specific core features in a visual and delightful way that had been previously relegated to downloaded PDFs and text lists. The result was an interactive informative product carousel I designed that allows the user to explore the font and the back of each product to get clarity on features of their choosing before continuing to do a deeper dive into tech specs which are compiled underneath.

SEL product example

Events

SEL's event pages are all hosted on a subdomain and managed by a third-party integration software called CVENT. CVENT offers CMS-esque capabilities so I designed templates for the seminar and event coordinators to use so that our design team could continue to automate other aspects of the company and be as hands off as possible.

Example of an SEL event using CVENT

Card Components

When tackling card components we wanted to create a better visual hierarchy with less reliance on unformatted text. When the old cards were listed together the amount of text on screen often lended to an overwhelming user experience. Just increasing white and neutral space was a rewarding design improvement.

Card component comparison
Redesigned card component (left) vs old site (right)
Project Process
User Research
User Research
Ascertain issues and problems by talking to users. Learn navigational habits, frustrations, and expectations by watching users.
Design and Developer Brainstorming
Design and Developer Brainstorming
Formulate user stories based on UX research then brainstorm ideas and solutions with teammates.
Hi-fi designs and Codepen.io Testing
Hi-fi designs and Codepen.io Testing
A fun step outside the norm, the team designed new components and then coded them in Codepen for others teammates to access, modify, and peer review.
Develop in Codebase
Develop in Codebase
Work alongside Developers in updating CMS schema, creating new Angular components, and migrating the site styling to a combination of updated Bootstrap and CSS grid.
Communicate to Customers
Communicate to Customers
A redesign is a big change, we communicated these upcoming changes early to set customer expectation and reduce user confusion.
Release, Iterate, and Improve
Release, Iterate, and Improve
More user research to verify solving of users problems.