< Back to Homepage

Choose EnergyRedesign & Cart Flow

Tools:
Sketch, Photoshop, Illustrator

In 2017 while working for Red Ventures, I was tasked with redesigning the online consumer choice energy business, ChooseEnergy.com. The website redesign included designing a new logo, creating a design library to rebuild the 80+ unique SEO templates, a new cart flow, incorporating Red Venture's proprietary chat platform, and coming up with a new icon library.

Logo Design

The logo mark is both the C and the E in Choose Energy. The center arm which is detached from the C and colored orange represents both the ability for the consumer to switch from one energy provider to another and the modernity of the Choose Energy platform in visually resembling a UI toggle element.

Bringing The Site Into 2017

The old Choose Energy site was a sort of Frankenstein site made up of SEO widgets indiscriminately scattered about. The kind of site that forms overtime when project managers and SEO analysts start thinking, "You know, I took one semester of graphic design in college..." No offense to the PMs or analysts but you know what you did.

Anyway, the old site color palette was all over the place. CTAs were different colors for seemingly no reason or thought behind the visual language of them. There was little consistency in stock imagery quality or tone. Content blocks were stacked without thinking about authority or relevance to one another.

I wanted the redesign to fix all those problems. I wanted the site to first and foremost feel like it was a fresh breath of air -- easy to look at and easy to use. There would be no confusion about what the primary CTAs were. Imagery throughout the site would feel like a connected series. Content would feel like it flowed together.

Redesigned Homepage

One of the biggest goals I had with the redesign is I wanted every section, block, and element to work together instead of against one another. I wanted the sections to visually respect one another and not have everything competing for the user's attention. Most of the SEO pages have one goal and that is to drive the user into filling out their Zip code, which in turn gets them into the shopping experience.

To create this cohesive experience, I built out a design library in Sketch and within that library was an array of expandable block elements (thanks to the Anima Sketch plugin.) With this library, content blocks could easily be iterated on while still maintaining consistency in spacing, alignment, layout, and CTAs.

One of the challenges in pulling this off  was the restriction placed on me to not delete any redundant content from the SEO department. While the content could be re-arranged and even hidden potentially in expanding content blocks or carousels, it had to exist on the page in some form. This made it challenging and a stretch at times to keep pages a respectable length.

SEO Page Design Samples

Chat Integration

Have you heard of chatbots lately? They're kind of a big deal. It seemed like in 2016- 2017 ProductHunt was swarmed with chatbot startups and every web marketing blog was shouting from the rooftops "THE FUTURE IS CHATBOTS!"

Choose Energy was also feeling the chatbot wave and as part of the redesign I was tasked with integrating Red Ventures' proprietary chat software into the site with a fresh coat of Choose Energy rebrand paint.

Cart Flow

Choose Energy's cart flow is the crown jewel of the product team. Within the cart, consumers can shop around and compare energy plans. For the redesign we wanted to put more emphasis on recommended energy plans, give the users more robust sorting tools, and simplify the account sign-up / switching process.

Energy Plans Shop Page

The old cart flow took 7 steps to complete. With the new cart flow we shaved off two extra steps which, in my humble opinion, made the process of switching energy plans a whole lot less intimidating. Check out the entire flow below.

Iconography

The old SEO pages on Choose Energy had a library of icons sprinkled about. I didn't want to be beholden to them with the redesign so I took the opportunity to update the existing icons and introduce some new ones as well. Below are the new icons I created for the redesign.

The rebrand site was launched successfully and now serves as the control experience for the site. You can find both the desktop and mobile version of it at https://shop.chooseenergy.com

Disclaimer: I no longer work for Red Ventures so the link above may reflect a hybridization of design work done by me and whomever continued to work on the site once I left the company. All design work posted in this case study however was designed solely by me and is a true reflection of the initial site that was launched with the redesign.

Back To Portfolio
Next: Heroes In Cinema Design