← All work
Earlier work · 6 weeks · 2020Web DesignConversionFront-End

Indoor Buddy Website

Rebuilding our startup's site to sell Meal Tab to store owners and lift demo conversions.

Indoor Buddy Website: cover

Project Overview

Outcomes

  • 400% increase in info-request emails
  • +24% demo-request conversion
  • Inbound interest from Around the World Market and Gristedes

Timeline

6 weeks · 2020

The Problem

Our site had almost no traffic and didn't convert grocery-store owners into demo requests, the buy-in we needed to test Meal Tab in real stores.

The Solution

A rebuilt marketing site that makes the value obvious, backs it with real user-interest metrics, and makes requesting a demo effortless. I designed and built it.

My Role

UX Designer & Front-End

Team

  • 3-person team

I Personally Owned

  • UX audit
  • Content strategy
  • Information hierarchy
  • Wireframes & visual design
  • Build (HTML, CSS, JS, Bootstrap)

My Process

01

The Goals

GoalDecide what the site actually needed to do

To improve the product we needed store owners to let us demo it in their stores. I talked with Brandon, a manager at Brooklyn Fare, to understand what owners worry about with a product like this on their floor. Three needs came out of it.

  • Show how Meal Tab can drive revenue, fast and obviously.
  • Prove shoppers would actually use it if they saw it in store.
  • Say what the product is, as clearly and briefly as possible.
02

UX Audit

GoalJudge the current site against those goals

I started by auditing the existing site against our goals and basic UX best practices, flagging exactly where it lost a store owner's attention or failed to make the case.

UX Audit: screenshot
03

Proof It Would Work

GoalGive owners evidence, not just claims

An owner making an investment wants proof of demand. We'd tested Meal Tab with many users online, so I put the strongest numbers right on the site. I also produced a short demo video, after Brandon said seeing a shopper actually use it would help, that frames the problem and shows the solution.

0%

would be likely to explore the interface in a store

0%

would switch supermarkets for the experience

04

Information Hierarchy

GoalLead with what store owners care about

With the content gathered, I mapped a layout around the owner's concerns and gave each its own section.

  • Function: what the product does, findable in seconds.
  • Revenue: about 44% of shoppers look for promotions digitally, so guided shoppers buy more.
  • Product mechanism: how the system works and how it attaches to a cart.
Information Hierarchy: screenshot
05

From Wireframe to a Built Site

GoalShip a responsive site in six weeks

With six weeks, I started from wireframes over the existing structure, then iterated to high fidelity with the team. Instead of a catch-all "Contact Us," I designed a clear demo-request CTA we could actually measure. I built it responsive with Bootstrap, wrote JavaScript to play and pause the demo video as it scrolls into view, and used AOS to animate elements on scroll.

From Wireframe to a Built Site: visual 1From Wireframe to a Built Site: visual 2

My Impact

The new site did its job: a real jump in inbound interest and demo requests, including Around the World Market (one of the largest grocers in the NC tri-state area) reaching out, plus a scheduled demo with Gristedes.

0%

more emails requesting information

+0%

conversion to demo requests

What I'd do differently

Sell the outcome, not the feature

Store owners didn't care about the app's cleverness. They cared about revenue and proof. Leading with their outcome, backed by real numbers, did more than any amount of polish.

Next project

First Steps