Optimizing Design For Mobile Web

The Problem

Emilia Naberezny
Mar 7, 2018 · 6 min read

After analyzing our conversion data it was clear that our responsive mobile web experience was leading to a larger number of drop offs in our acquisition booking flow. By stripping down the booking flow and specifically designing for mobile we were able to improve the experience and speed that it takes users to book a MakeSpace appointment.

What We Did

We started by deconstructing our existing responsive design to see which components were necessary for completing the flow. In conjunction with pairing down our design elements we decided to take those final design components and build a UI library. The library could then be used within our new layout engine where we could easily generate new tests based on data collected. We successfully launched 4 tests during Q4 of 2017. With each test we were able to gain insights from the previous test and modify the design.

Atomic Design & The New UI Library

We utilized the system to build our UI library. Elements (Atoms), Modules (Molecules) and Components (Organisms) make up our design system. We’ve defined our system as:

  • More that one Element = Module
  • More than one Modules = Component

For instance, an element could be an icon or a button container. Modules could be an input field or button and components could be a complete form or group of card in a carousel.

Here is a visual of how we constructed our storage plan cards:

Image for post
Image for post
How the storage plan cards are constructed using elements, modules to make components.

Introduction of The Layout Engine

With the introduction of the UI Library our engineering team built a new layout engine which parsed a file to determine the order and variation of the components from our UI library. This helped us switch out components and launch new experiments effortlessly because engineers had all of the specifications of our library defined. The new structure reduced the amount of code needed and helped the team keep things organized.

Below is an example of how the .YAML file brings in the components from the UI library to build the design on the right.

Image for post
Image for post

The Control

When the project began we had been directing all traffic to an acquisition lead capture form. This served as our control throughout the project. The form had a decent performance rate due to its simplicity but the only problem was that it didn’t provide users with a quote nor did it allow them to booking their appointment themselves. It generated a lead which was then followed up by a sales representative. It was time to challenge this design to see if we could create a better more concise booking flow experience.

The Evolution of the Booking Flow

Storage Step

This step is one of our biggest drop off points. This is because users have a hard time knowing what plan to choose to meet their storage needs. We noticed many users were leaving the booking flow and visiting the FAQ page. In V3 we added a FAQ modal so users could seek the answers to their questions while never leaving in the flow.

Image for post
Image for post
Progression of the storage step in the booking flow.
Image for post
Image for post
Introduction of the FAQ component helps users answer their questions without leaving the flow.

Services Step

On the services step we collect information about the appointment for our crew so they can anticipate the type of appointment and services the customer will need. For the user this step was unnecessarily long on mobile. To minimize scroll and interaction we created a horizontal carousel which automatically advances once the user answers the question.

Image for post
Image for post
Progression of the service step in the booking flow.

Separating the Address and Appointment Step

The main reason for separating these two steps was to reduce the amount of actions taken on each step. We were given a piece of feedback from our customer support team where customers were having trouble adjusting their selected appointment date. It was unclear to them how to get back to the calendar. This encouraged us to remove the date bar (the grey bar with arrows in V1 where users could tap to see the calendar). We decided to land the user directly on the calendar allowing them to select the date, once the date was selected the time cards populate allowing them to choose a convenient time slot. If they have to adjust the date tapping back in the browser will bring them back to the calendar. This simple yet intuitive decision makes it easier for users to edit their date.

Image for post
Image for post
Progression of the appointment address, date and time step in the booking flow. The original design incorporated both address and appointment which created many decisions on one screen. Breaking these two steps a part helped users focus on a single action.

New Billing Requirements

Long forms prove to be an obstacle for users on mobile. The billing step is important because it is the point where the user is committing to the service. We wanted to make the form as easy to use as possible so we utilized a Stripe component to condense the required fields for the credit card number, expiration, security code and zip code. This was important because we were adding the billing address fields to the form which greatly increased the length. By allowing the user to select “Same as appointment address.” we were able to condense the form to two fields.

Image for post
Image for post
Progression of the billing step in the booking flow.

Breaking up the Profile and Review Step

The purpose of the booking flow is to give users a calculated monthly total for their storage plan and any initial pickup services. We found that our original design pushed the total price down on the screen which made it hard for users to see. By separating profile creation and review we decreased the amount of content on each step which in return helped the user focus on the necessary actions on each step. The profile step is unrelated to review. The purpose of the review step is to summarize all information for the user’s plan and upcoming appointment. By surfacing the total cost at the top the design is clear and concise, so the user has all the information they need to confirm their appointment.

Image for post
Image for post
Progression of the profile and review step in the booking flow shows how the joint step was broken in two in order to create a clear and concise booking experience.

In Conclusion

After Q4 was done and all of our tests were run, we made great progress in optimizing our mobile web booking flow. We hit our goal to reduce the content on each step in order to minimize scrolling. We now have a layout engine that supports quick iterations and a strong UI library. Lastly we’ve been able to build upon the library to create components for desktop.

The most important thing I learned from this project was the power of the library when implementing quick iterations. Being able to put together a page in a matter of minutes helped streamline my design process. The library makes it easier for me and my team to collaborate while making sure that design is consistent across all platforms.

Humans in Space

Design, Product, Engineering & Marketing exploration from…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store