Responsive Mobile Design:

Direct Energy (DE)

Achieved  increase in conversion on consumer facing mobile platform by 7%

Role

  • UX Designer

Year

  • 2016

Deliverables

  • Design Requirements

  • UX Research

  • Workshops

  • Wireframes

  • Prototypes

  • Coded Implementation

The Bounce Energy mobile conversion experience on mobile under-performs in relation to the other enterprise sites.

I will redesign the Bounce Energy Mobile Interface Pricing Grid product offering and on-boarding flow on mobile experience.

I apply Conversion-Centered Design (CCD) principles to optimize the UI and increase conversion.

Goals

Deployed a responsive design which:
  • continues to support desktop experience.
  • is future proof durable.
  • is navigable to users on smaller screens.
  • empowers visitors to shop across numerous product choices by the most essential factor to them, price.
Improve order flow:

Optimize the conversion funnel at the product offering portal on mobile to achieve revenue goals.

Increase:
  • conversion
  • on-boarding
  • retention
Emphasize branding :

Delivering value to customers through excellent customer service, innovative plans, products and competitive pricing.

Benchmark existing design KPI’s

  • time on page
  • page bounce
  • impact of recursive navigation patterns
  • task abandonment within acquisition flow

Analyzing existing mobile experience

  • Not a ‘mobile 1st’ approach.
  • ‘Tabs’ serve as dynamic view indices on desktop.
  • ‘Tabs’ fails as navigation construct because they are not coded for mobile display.
  • The density of product options overloads a customer from making a purchasing. decisions on mobile.
  • The legacy design compresses a large sort-able table from desktop into a small non-responsive table on mobile.
  • The product offering area is data dense.
  • It is very difficult to read the content because text is not formatted for a small view port.

 

Competitive Analysis

Focus:

Heuristics 
Task Flows

Analyzed 8 direct competitors in the Texas market and 5 out of domain players for best practices:

  • search ranking
  • SEO performance
  • branding and identity
  • product list filtering

Many products appear to have equal value & appeal.

Digging deeper, we discover patterns that employ:

  • asymmetrical dominance 
  • unintended product overlap
  • homogenization

Paper Prototyping

product card filtering ideation

I have researched the problem space and have a good sense of our current experience deficiencies.

I have developed some ideas I want to explore for the design.

Constraint:
We currently lack advanced filtering capabilities

How do we enable a shopper to assess numerous products and prices?

gesture interaction

sketch early, sketch often

Sketch and paper prototyping with discoverability and touch screen considerations at the forefront.

parsing sorting options and data density issues

exploring navigation options on mobile

Product display variations leveraging familiar gesture patterns

Carded product target:

The product offerings serve as a navigational hyperlink to each offering.

User Research within an Iterative Design process

Printed design as individual cards and asked users to pick a product based on a given budget.

Analyzed their interactions for friction and opportunities to improve.

Further adjustments and iterations based on the feedback.

I received acceptance to finalize the designs and deliver a functional MVP.

In browser, coded prototype

I leveraged the strengths of the mobile experience.

  • Hand to surface contact.

  • Cards display key product identifiers.

  • Product cards act as entry point to conversion flow.

  • Narrowed visual focal point combined with the familiarity of swiping behavior.

I produced a coded, functional interface:

  • CSS, HTML, JavaScript & PHP
  • connected to live pricing and CMS systems
  • accelerated production deployment
  • pre-production environment to test for full functionality

< lazy load >

Takeaway

Achieved a 7% increase on conversion in this specific brand channel month over month.

Metrics on the conversion flow showed as much as 10-12% increases for mobile specific acquisitions over the previous year for the target quarter.

I took risks with this design process, I never designed for a mobile first application.

I feel more comfortable negotiating with partners and  defending design decisions.

I am really proud to see a big impact from my work.