Peapod Online Grocery

Gateway Page

• Role: UI/UX Designer
• Company: Peapod
• Methodology: Agile Scrum
• Tools: Usertesting.com, Axure, JIRA, Confluence
• Deliverables: High-fi Interactive Prototype

Problem Space

As part of the redesign effort I had to redesign the old gateway page into a new responsive page which allows users to easily sign in or enter their zip code to shop their specific product mix for their region. 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 and to minimize bounce rate which sat at 80%.

Goals

• Decrease bounce rate.
• Increase the amount of users shopping the site.

Constraints

• 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

For the redesign of this feature there were several phases. First I conducted a competitive analysis of competitors websites, researched best practice design patterns, and compared that with Peapod's existing gateway page. Next I conducted a heuristic evaluation of Peapod's existing gateway page to find usability issues which may negatively impact user behavior. 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. From the leanings I gathered I was able to sketch out a rough drawing and rapidly iterate through ideas. Finally I prototyped a high fidelity interactive prototype for developers to implement.

Research

Using Nielsen Norman Group's Ten Usability Heuristics as a guide, I evaluated the existing gateway page.

Key Findings:

• Page had many entry points with different lables.
• Overall there was redundant competing information.
• There were multiple value propositions which confuses the message.

Next I used Usertesting.com to run a usability test on the existing gateway page.

Key Findings:

• Users were confused by hero image.
• Users could not identify what the main value proposition of the site was.
• Users were confused by the carousel of images which did not have a function.

Ideate

From the leanings I gathered I was able to sketch out a rough drawing and rapidly iterate through ideas.

Prototype

Finally I prototyped a high fidelity interactive prototype of a new gateway page for developers to implement.

View High-fi Interactive Prototype (Axure)

Results

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

Help Section

• Role: UI/UX Designer
• Company: Peapod
• Methodology: Agile Scrum
• Tools: Optimal Sort, Axure, JIRA, Confluence
• Deliverables: High-fi Interactive Prototype

Problem Space

Along with the redesign of the gateway page there was a need for redoing the existing Help section which had outdated and redundant articles, lacked a clear heirachy, and did not give users the ability to search articles. This meant that users were more likely to call Customer Service instead of resolving issues on their own, because they could not easily access information.

Goals

• Design a Help section that is more functional for users.
• Implement a more logical information architecture.

Constraints

• New Help section must support search functionality.
• New Help section must support mobile, mini-tablet, tablet & desktop.
• New Help section must comply with WCAG 2.0 AA standards

Process

For the Help section redesign first I conducted a competitive analysis to analyze how competitors such as Instacart & FreshDirect designed their Help sections. Next I listed out existing articles so I could consolidate redundant articles and eliminate oudated ones. I then conducted an open card sort to define categories. From there I sketched and rapidly iterated through design ideas. Finally I prototyped a high fidelity interactive prototype for develoment.

Research

I conducted an open card sort with 13 participants using Optimal Sort. The participants were asked to group the help topics, and name their groupings.

Ideate

Next I sketched out ideas for the layout for mobile, tablet, and desktop.

Prototype

Finally I prototyped mobile and tablet versions for development.

View Mobile High-fi Interactive Prototype (Axure)

View Tablet High-fi Interactive Prototype (Axure)

Results

• Users are able to search and browse help articles.
• New Help section has a hierarchy of information that is more logical to users.
• New Help section's fluid layout supports mobile, mini-tablet, tablet & desktop.