When I was dating my wife, we lived an hour apart and would constantly look for places to meet up about halfway between us. So I made a web app to make our lives easier.

July 14, 2017  ·   Case Studies

Project Goals

As a major pain point in my life, I wanted to create a quick and simple app that would split the distance between two locations and suggest great places to hangout around that area. After asking around a bit and getting a lot of interest, I decided to open it up a bit into a full fledged web app.

Getting Started

First, I made sure that nothing like this existed. There are similar tools out there, but none of them had the simplicity and speed that I considered essential to the project.

Next, I started iterating on the interface. After a few iterations on design, I realized that I should probably figure out how to make this all work before getting too far down that road. Wielding jQuery and Google Maps API, which I learned while making this, I cobbled together a working prototype and refined the UI from there.

What's MeetMidway?

I built MeetMidway from start to finish. It's a fun little app that helps you find great places to hangout that are midway between you and your friend. It's a web app, so you can use it on any device you've got and it will look and feel great.

Starting with the branding, the app was designed to feel light and fun. Following an iterative approach, the UI includes a bunch of flourishes and details that help improve the ease of use and reliability of the app.

You can check it out live

The Nitty Gritty

A Quick Intro

Rather than inundating users with a huge marketing page, a short modal introduction is used to introduce new users to the app and quickly sends them on their way. It only shows up the first time, as to not annoy returning users.

Based on surveys, a few of the most common searches are available at the click of a button. This not only removes room for user error, but speeds the input process.

Simple Results

Results are displayed very simply. The venue's name and address is shown, as well as if it's currently open and if it's well rated. From there, users can click to be sent to Google Maps for more details and directions.

Marketing Page

A simple marketing page is available for those users who want a little more information. I went a little overboard with the visuals here, but had fun with it. I even included some SVG animation.

The Results

When released, there was a largely favorable initial response and great feedback. Many suggested the addition of mass transit routes for city dwellers or the ability to add more friends for groups.

Overwhelmingly, users wanted a native app. Although the web app was functional and well-received, it wasn't sticky. Porting this to a native mobile app would resolve that issue.

What I Learned

I designed this as a learning experience. As I've been getting rusty in my front-end development skills, I pushed myself to learn a shocking amount about jQuery, Google Maps API, and SVG animation to get this up and running. Starting with a functional prototype and a limited understanding of development, I challenged myself to design within the constraints of what was technically feasible.