eCommerce

Instashop
Responsive Web Design

Problem

How Can A Brick & Mortar GroceryGain Back Market Share?
Instashop's customer service ratings have remained constant, but they've lost 8% market share year over year, causing the business to explore how they can earn it back.

  • Their initial research showed market share decline was due to an increase in online grocery ordering and delivery competition.
  • They want to create a pilot program in New York & San Francisco to initiate an online concept.

Objective 

Create Online Presence
My role was to supply a responsive website design, created with a user-centered approach, based on research.  This independent project plan covered the full UX process:

  • User Research
  • Competitive Analysis & UX Strategy
  • Information Architecture
  • Interaction Design
  • Brand Development
  • User Interface Design

User Research

Discovery
Research started by talking to potential users in seven major metropolitan areas about their current grocery shopping experiences.

Persona Development

My research indicated that while single customers liked online ordering, they often didn't need enough to place an online order. Adding this persona in after the pilot program would be a great expansion.

In every interview I conducted, the female did the majority of the shopping in the relationship.

  • Sarah Quinn: Busy Working Professional. "I'm trying to make dinner for myself and my husband, but just don't have the time."
  • Kate Alexander: Busy Working Mom. "My husband and I only use organic produce and meat for our family. Going store to store to find everything we need takes too much time."

Storyboard
Thinking through Sarah's current grocery experience, what her biggest frustrations are, and how a new online grocery could make life easier helped identify with her. It also started to give ideas about ways to delight her in the process.

Competitive Analysis & UX Strategy

Feature Matrix

  • FoodKick: only delivers to Sarah in Brooklyn, also delivers from her local bakery
  • Fairway: only delivers to Kate in Manhattan, can shop in-store and have groceries delivered if needed

Refining The Strategy: Aligning Business And User Needs

Information Architecture

Sitemap

  • Sarah wants to be inspired to cook new dishes
  • Kate wants exclusively organic produce and meats
  • A card sorting gave ideas for categories, including specialty elements
  • Instashop requested a rewards program to help establish customer loyalty
  • Seamless delivery is key

Organizing actions based on these goals and the priorities in features, provided an initial sitemap layout.

User Flow Scenario
Thinking through how Sarah might buy items, set up an account and checkout verified elements required to complete all those steps had been accounted for.

Interaction Design

Mobile Patterns

  • What would make setting up an account faster and easier?
  • What is the best navigation for a quick re-order of common items?
  • How can inspiration for meals be highlighted, without getting in the way?

Research for eCommerce solutions to these questions helped understand how the responsive elements worked on mobile, but also gave great ideas for web.

Initial Wireframes

  • What goes above the fold?
  • Navigation: keeping it consistent across all formats
  • Scrolling options: how are they different from web to mobile?

Usability Testing
Going back to Sarah’s user flow scenario, I created a prototype with InVision and asked users to navigate through the Instashop mobile site to complete a series of tasks. These were specifically requested to find out:

  1. Can the user find what they are shopping for?
  2. Is the navigation intuitive?
  3. Is the slide function on mobile the right action to edit the cart?
  4. Do the form tabs to create an account save time and frustration?
  5. What's missing from the checkout process?

Test Findings
By watching participants engage with the prototype, I was able to record responses and actions during the process.

  • Surprisingly, every single user went to search first, not realizing the menu was for categories
  • The navigation was unclear for everyone, 4 people said they thought it was only for "additional info"
  • The swipe function to edit cart was not intuitive for 2 users. One suggested word prompt or instructions at the top
  • 3 users asked if they could check out as guest, then I reminded them their groceries needed to be delivered to their personal location, and they seemed OK with creating account
  • The create an account folder design pattern was a success, and users liked the fact it wasn't all on one long page

Brand Development

Logo Design

  • Option 1: elevated concept, since organic food is more expensive, positioning the brand at the top of the pricing tier. Curiously, none of my user interviews mentioned sales or flyers influencing their purchases, only quality.
  • Option 2: organic concept, a little softer, with branding a little less clean. Focus on a position of farmer's market and organic food quality, which every user is asking for.

A/B testing showed users preferred the second, more organic concept.

User Interface Design

Style Tile

  • Testing of web landing pages for search bar and category navigation confirmed proportions needed for quick user location
  • Mobile navigation options tested, with results leading to adding the word "shop" for categories
  • Search bar removed from mobile, leaving magnifying glass at top navigation
  • The best of web and mobile findings combined to translate to tablet format

Thinking Back, Looking Forward

  1. It would have been great to have done more ethnographic research, to see how users organize their shopping lists, and how they approach in-store vs. online shopping (client users)

‍

  1. Since it's a responsive site, testing both website and mobile devices for usability will be important for accurate problem solving going forward (client users)

‍

  1. eCommerce has a lot of info to sort through and continually updated. How do I make it easier to complete updates for Instashop? (business users)

‍

  1. With a pilot program in two cities, setting up a feedback loop from the day of the launch will provide needed user info as the program grows (client & business users)
Back to Top
2017 Arin Clement