Background

This is a story about how to overhaul a brand’s public-facing identity and usability in about a month’s time.

I longed to improve RidePal’s homepage and sign up flow, but it wasn’t our top priority in Product. But as I worked on other projects, I would sit down with people unfamiliar with RidePal show them the homepage. Two questions usually arose: “What is RidePal?”, and once they understood the service, “How do I sign up?”. This project focused on brand clarity and usability, with the goal of increasing sign ups and allowing current riders to easily find their schedules.

Project Initiation

heuristic eval2

I investigated our analytics. Individuals were spending a surprisingly long amount of time on the homepage, and then once they had signed up, on the post-sign up page.

I wanted to understand what was in play here. I ran short usability tests on the current site looking for,specifically, how well people understood the company’s offering, and then how they would sign up for the service. I formed the hypotheses that a minimalist approach focused on drawing attention to large and clear copy to describe the service as available to all, and use an image of a bus to emphasize the offering would allow us to meet our key metric.

I did a heuristic evaluation on the current RidePal site, and was specifically drawn to the number of steps involved to enter a purchase flow on RidePal–22 steps in all–and compared it to services in similar domains.

Based on this analysis, I decided to focus on reducing steps to purchase:

hero path 1

 

Design Patterns

I looked to design patterns that would both be familiar to the individual and support the paradigm of searching for a regular commute option, with an emphasis on large copy and few steps to getting to the point of purchase.

 

Iteration

Do users understand the service? Do users know how to make a selection? Rapid usability tests on these interaction designs informed me that I had to iterate on the homepage copy for brand understanding, and I had to introduce some visual aspect to communicate the brand. Usability-wise, I learned that I needed to iterate on the copy and color of the buttons to allow users to progress, specifically between the phases of viewing available commutes and signing up for the service.

Art Direction

At this point, about three weeks into the project, engineering resources had freed up, and this project became a top priority. We had to submit final visual designs to Engineering in about a week’s time.

Through a search of Getty, I had found a placeholder image that would reflect travel and using the roads, but would not communicate an understanding of the service.

I decided that we would commission photography. I created an RFP to allow a photographer to have enough constraints so that they had a good idea of expectations and could meet a deadline, but enough freedom, I hoped to encourage artistry.

The coordination between myself and two photographers, Paul and Eli, became a study in team cohesion, creativity, and iteration. While Eli scouted and shot landscapes, Paul shot pictures of buses around San Francisco. Through remarkable post-processing, Paul combined the landscape and buses, producing creatives that I would test with different people.

Our final image tested well.

ridepalhomepage3

 

Final Visual Design & Engineering Requirements

With a tested image and copy in hand, I went on to create final visual design comps and write the spec for engineering.

 

My contributions

Analytics
Capturing Business Requirements
Usability Testing
Design Hypotheses
Wireframing
Art Direction
Visual Design
Requirements

Team

Nathalie Criou / CEO
Paul Chan / Photography & Post Processing
Eli Zaturanski / Photography
Tibo Kistler / Development