Image of my heuristic evaluation

Heuristic Evaluation

Conducted a heuristic evaluation on the existing gateway page.

  • Enlarge
Screenshot of a remote user testing session

Remote User Testing

Conducted remote user testing to find usability issues.

  • Enlarge
Screenshot of Peapod Gateway on mobile

Mobile

Screenshot of Peapod Gateway on mobile

  • Enlarge
Screenshot of Peapod Gateway page on desktop

Desktop

Screenshot of Peapod Gateway page on desktop

  • Enlarge
Image of Peapod Gateway page on a mobile device.

Peapod Mobile

Peapod Gateway page on a mobile device.

  • Enlarge
Image of Peapod Gateway page on a tablet.

Peapod Tablet

Peapod gateway page on a tablet.

  • Enlarge

Problem Space

Peapod, founded in 1989, was one of the first eCommerce shopping sites. Their website had not been update for many years and the time had come to upgrade and conform to modern web standards. Part of this effort was the task of redesigning the gateway page, which required users to either log in or input their zip code because different parts of the country had different product mixes. Peapod had a user base of 30,000 users and 1,700 active sessions at a given time. My job was to design a gateway page which allowed users to pass through as effortlessly as possible to minimize bounce rate and increase the amount of users shopping the site.

Main constraints to consider:

  • Existing gateway page had a high bounce rate of 80%
  • New gateway page must get visitors into the site with minimal resistance
  • New gateway page must support mobile, mini-tablet, tablet & desktop
  • New gateway page must support dynamic promotional content
  • Must comply with WCAG 2.0 AA standards

Process

Research

First I conducted a competitive analysis of competitors websites, researched best practices design patterns, and compared that with Peapod's existing gateway page.

Evaluate

Next I conducted a heuristic evaluation of Peapod's existing gateway page to find usability issues which may negatively impact user behavior.

Test

Then I designed and administered a usability test on the existing gateway page, to see how users think about and interact with the existing gateway page.

Design

From the leanings I gathered I was able to sketch out a rough drawing and rapidly iterate through ideas, then design and prototype a high fidelity interactive prototype of a new gateway page for developers to implement.

Methods

Competitive Analysis

I analyzed competitor websites such as Instacart & FreshDirect.

Heuristic Evaluation

I documented instances of standard usability issues.

User Testing

I designed & administered a remote un-moderated usability test using Usertesting.com.

Sketching

I sketched and rapidly iterated design ideas.

Wireframing

I wireframed the general layout of the gateway page.

Prototyping

I designed and prototyped a high fidelity interactive prototype.

Deliverables

  • Hi-fi Interactive Prototype (Axure)

Results

  • Bounce rate was reduced by 30%
  • Cognitive friction reduced due to implementation of standard design pattern for login screens
  • New gatewate page's fluid layout supports mobile, mini-tablet, tablet & desktop

Get in Touch

Please note only a subset of my work can be displayed online due to NDA's. Feel free to reach out to me regarding work opportunities. You may also find me on LinkedIn.