When my group was tasked with redesigning our website earlier this year, I started having flashbacks. I was at E Source for our last site rebuild, which was successful but stressful. There was a lot to fix and it needed to be done quickly; I spent many months in a constant state of panic, worrying that we wouldn’t get it all done. Since my job is all about the front end—the way the site looks and how users interact with it—there was a lot of pressure to create something extraordinary.

Going into this rebuild, we still wanted to create something extraordinary, and we had some lofty front-end goals for the site: (1) Make it 40 percent cooler, (2) create a better user experience, and (3) make it responsive for mobile devices. Although our site looks pretty simple, it has a lot of content, and with that comes complexities.

Make It 40 Percent Cooler

This is a given. Every company wants a good-looking site, right? But I’ve been a designer for many years, and I’ve learned that “good-looking” means different things to different people. Since we deliver content and that is our product, creating a site that lets the content shine is our number-one goal. One way that we did this is by displaying image previews of our content in various areas on the site. For example, if you’ve logged in to the new site, you’ll notice that thumbnails show up next to each piece of content.

We start any new design by sketching out a rough wireframe to help solidify the direction we want to go

A hand-drawn mockup of the new member portal

Create a Better User Experience

On our old site, we had a lot of questions about the Member Portal. Our users didn’t know what that was and we were always scratching our heads wondering why. We think we figured it out. The Member Portal was hard to get to on the old site, buried a couple of clicks into a menu. We also asked ourselves, Does the name “Member Portal” even mean anything to our users? Maybe we needed to bring our content front and center. So on the new site, we made our logged-in home page into a true member portal. Now, all of our users can see an aggregate of all the stuff they have access to right when they log in.

Make It Responsive

Our old site was mobile-friendly, but it was “adaptive,” not “responsive.” That means that we tailored the experience to a few screen sizes, and anything in between those sizes might not display properly. Responsive web design creates a fluid grid so that our site will display properly at all screen sizes. There are so many devices these days with different screen sizes that it’s hard to just pinpoint a few and design for them. To help with that, we built our site on a framework called Bootstrap. Bootstrap has a built-in grid system that allows us to easily call different layout configurations based on screen size.

We’re really excited about all of the changes we’ve made to our new site. You can check out our beta site by clicking through the orange button on the top of any page. Please take a look and let us know what you think!