Digital Experience Design:

Direct Energy (DE)

The objective

Increase conversion, customer onboarding and retention with a focus on delivering value to customers through excellent customer service, innovative plans, products and competitive pricing.

My role

Lead UX: Bounce Energy Mobile Interface Pricing Grid Redesign: Redesign the product offering and onboarding flow in the mobile experience by optimizing the interface interaction touch points to increase conversion.

Develop and design customer facing pages to improve online order flows in the mobile and desktop environments.

 

Services Provided

  • UX Research
  • UI Design
  • UI Development

Problem Statement

The legacy Bounce Energy customer conversion experience on mobile underperformed in relation to the other more recently deployed enterprise sites. 

Lack of an applied responsive design that is both navigable to users on smaller screens and empowers visitors to shop across numerous product choices by the most essential factor to them, price, is the most prolific blocking point.

Optimization of the conversion funnel at the product offering portal on mobile is paramount to achieve revenue goals.

Research Methodology

Analysis of existing design for performance against KPI's of time on page, page bounce, recursive navigation patterns and task abandonment metrics within the the acquisition flow.

The usage data compared against stats on adjacent enterprise sites.

Competitive Heuristics Inquiry

I reviewed eight of the most prominent directly competing retailers as well as out of domain best practices in the Texas market on desktop and mobile experience.

Many products at first glance appear to have equal value and appeal, issues quickly became evident of regular practices employing asymmetrical dominance and unintended product overlap and homogenization.
I weighed numerous aspects of the energy shopping experience ranging from search ranking and SEO performance, branding and identity, product list design and product filtering.

Design Process

Early sketch of product card filtering ideation
I began creating models that refactored the information architecture of the product delivery and discoverability while also addressing the navigation considerations inherent on the touch screen.

sketch early, sketch often

The legacy design essentially compressed a large sortable table from the desktop version of the site into a smaller table on mobile.

The product offering area is proposed to be data dense.

There are many challenges to balancing comprehensive content within the inherent screen size constraints.

loose prototype of gesture interaction
parsing sorting options and data density issues

exploring navigation options on mobile

Product display variations leveraging familar gesture patterns

Illustrating touch points in flat low fidelity prototype

design direction and iterative prototyping

I created a carded product target featuring a unique new interaction design. The product offerings would serve as a navigational hyperlink to each offering.

Design Considerations

On desktop, tabs served as dynamic view indices shifting the tables contents without a page refresh. As a navigational construct the tabs could not effectively be translated to the mobile experience to viewport size. The cognitive load of so many products hampered the user from being able to make a discerning purchasing decision on the small display.

User Research within an Iterative Design process

The flat design comps were printed as individual cards laid atop mobile phones and presented to users to validate the design goals and assess if the solution was in line with their mental model.

Highlights, breaking points and observational feedback were collected and integrated into a storyboard for a team report.

Executives and designers reviewed the findings and recommendations with me to iterate the design forward as a functional, coded model in the preproduction development environment for live data modeling.

In Browser High Fidelity Pre Production Enviroment Prototype

I leveraged the strengths of the mobile experience.
  • Hand to surface contact, motion and a narrowed visual focal point combined with the familiarity of swiping behavior
  • The cards became representative of the product with the prices immediately associable to the plan features
  • The product cards faciliated as a entry points for conversion execution as well
I produced a coded functional interface using CSS, HTML, JavaScript & PHP connected to the live pricing and CMS systems to reduce the time to production launch and to test for full functionality.

Takeaway

I learned a ton about leveraging the accumulated expertise I have developed to take risks with the design process. Negotiating design decisions and defending them has come more naturally as my ability to recognize where in the process correcting for end users expectations can be addressed with targeted, testable solutions.
  • The redesigned Bounce Energy Primary Grid Mobile Interface showed a 7% increase in conversion on the consumer facing brand specific mobile platform month over month.
  • Early indications with the metrics reports on the conversion flow showed as much as 10-12% increases for mobile specific acquisitions over the previous year for the target quarter.