LAST MINUTE GEAR

Customer Flow and Visual Experience Redesign

Role: User Research, UX Design, Wireframing, Prototyping, Usability Test, Hi-Fi UI Responsive Design.
Length: 3 weeks


Background

“Into the forest I go, to lose my mind and find my soul.”

– John Muir


The great outdoors beckons to us all year round in the SF/Bay Area. However, San Francisco ranks 5th smallest nationwide, with average living space at 486 sq. ft per person. So for the city dwellers to follow the great John Muir venturing into the wilds, their caravans can only be outfitted with rental gears!

The #1 search result for rental shops in San Francisco did not go to one of the franchise chain stores in the suburbs, but to a little known store called Last Minute Gears, an intimate, local business, who reliably supplies its customers in the center of the metropolis.

The Problem at Hand

Inconsistent to the business’ expertise and its great service ethics, their E-commerce website has not yet lived up to its potential. For example, the owners procured a library of thorough and knowledgeable gear guides, one long document per gear. Their dedications are heart-felt, but the customers may not have the time to digest these text-heavy documents while completing their rental process. Other noticeable issues were:

Purchasing page is a Google sheet

Used item sales page is not well-supported, rather it is a complicated Google sheet, and their products are listed via KnockKnock.

Navigation issues

New tabs of products and guides multiply and fill up the browser bar. Rental page’s nav and sub-nav show no distinctions. Product descriptions are separated from the product pages.

Information Organization

Starting at home page and onward through the rental or purchasing process, textual information crowds every pages and popups. Some organization and consolidations ought to be considered.

Design Strategy

Instead of directly fixing the noticeable issues above, I chose to focus on researching and redesigning Last Minute Gear’s core task flows. Once the “spine” is straightened, other supportive features and informational and navigational systems can also be calibrated. This core flow is the gear rental experience.

Discovery & Analysis

Empathize

The first step I took in research and discovery phase is to observe and understand the habits and mentalities of the actual users. I used surveys and conducted behavioral interviews to gain insights on user habits using this and other similar websites. What were they looking for? Were they in a hurry? What did they think or seek at various junctures?

I synthesized the findings into a few noticeable themes, which in turn can be summarized into two personas.

Personas

The researches and findings gave me the insights to focus on the services and experiences with two types of users:
– Travis, an avid outdoor explorer, who routinely rents and purchases in bulk for his family and friends.
– Stephanie, a first-time snowboarder, who needs adequate assistance navigating through the technical options.

TRAVIS GUO

“This site is a lifeline, where I love to get my things. But I definitely don’t want to waste unnecessary time here either.”

Pain Points

  • Repetitively gathering bulk items into cart.
  • Making multiple checkouts for purchase batch and rental batch.

Goals

  • Discounts and reliable descriptions.
  • Efficiency in bulk-rental process.
  • Efficient when buying and renting together

Stephanie Willis

“So I was told that jeans and sunglasses won’t survive in snowboarding, and I need a helmet. What else do I need? Help.”

Pain Points

  • Too many items to put into cart.
  • Not sure which items she really needs.

Goals

  • Digestible instructions available to make decisions.
  • Feel supported in this new experience.

User Experience Journey Maps

Converting the findings on journey maps, we can clearly pinpoint the various aspects to improve our users’ experiences. And I was delighted to see that these finding overlapped with some of my earlier assumptions.

Travis, the expert wanderer and explorer, visits LastMinuteGear.com as frequently as his recurrent monthly trips into the nature. His hobby made him a collector of gears. And he often need to rent a large order of gears for his friends and family. Working with LastMinuteGear.com is a bitter-sweet experience. He wants to get in and get out, so he may focus more on the other logistics. But the websites delays him in the tedious rental and multiple check out processes.

Stephanie, like all adventurer, would always have the first-time gear-shopping experience, realizing that they need more than the mere sense of fashion to make the right choice. Without the appropriate a deeper knowledge, a guessed choice can make or break the success of the trip.

At time like this she seeks assistance, someone to inform her swiftly as to make the rental experience fluid and comfortable.


How might we address their needs?

The two personas problems can be summed up as such:

  • How might we streamline the checkout process for purchasing and rentals?
  • How might we simplify bulk rental routines for new and returning users?
  • How might we effectively assist our first time users with necessary knowledges to make decisions?
  • How might we adjust info and navigation architecture to increase user adaptability?

These “how might we” questions will be the central topics to redesign the core user flow. I believe the solutions may also address the earlier problems and assumptions as well.

Effective Card Sorting

Next, I conducted card sorting to determining 2 quandaries regarding information and navigation architectures:

  • (Left side) How should I sort the products?
  • (Right side) What is the right sequence for the rental process?

Product Location Findings:
The outcome was unexpected. I learned that seasoned renters browse products by activities, while new users browse products as if in a department store, that is, picking apart clothes, gears, and toiletries.

Rental Sequence Findings:
This too was a surprise. The users chose Rental Dates first before Selecting Gears. Doing so to assure the availability of the gears in that time frame.

DESIGN

A New User Flow:

Based on the evidence gathered, I came up with the following design ideas:

  • Place the first rental action, the reservation date, on home page.
  • Upgrade single-page filter PLP with navigation menu based on card sorting.
  • Embed short educational videos in strategical location to assist the users.
  • Offer gear rental bundles as products to speed up the shopping process.
  • Combine purchasing and rental checkouts as one process.

Design 1: Speed up Rental Action

The main service of LastMinuteGear.com is gear rental, yet the landing page lacks a strong call-to-action design. Only a small, ambiguous “Start” button is available. I shifted the first step of the rental process to the beginning in order to create a more efficient user experience and reduce bounce rate. This adjustment is intuitively in line with what users have experienced on other booking services such as Airbnb, U-Haul, Kayak, and many others.

Before

Wireframe

Hi-Fi

Design 2: Single-Page Filter PLP & New Navigation Structure

Adopting a single-page filter PLP is an easy decision. Not only this can scale with the inventory, this also align the browsing experience with the purchasing flow as well, and ultimately pave the way to combine the rental and purchasing checkout into a single trip.

At this point, I also applied the analysis from card sorting. While the veterans browse by activities (camping, snowsport, climbing), the inexperienced users browse in department store mentalities (men, women, kids). The solution here was: Why not both?

Before

After

Design 3: Education in Motion

The researches shows that new users needs knowledge to select the right gears, and they need to do so through a digestible manner in the shortest time, so to not leave the site. My new design is to provide short videos listed vertically on the PLP page, similar to a TikTok viewing format, which users are attracted to. The videos can either play silently on hover, or with sound when clicked.

The videos will be relevant to the products nearby. For example, a succinct explanation of choosing sleeping pads is placed in the row of sleeping pad products. (The current gear guides are still resourceful and should remain as in-depth readings.)

Additionally, these videos can also be utilized as marketing channels.

Another innovating idea is to include some side by side detail captioning when customers scroll through the item gallery

Design 4: Quick-in, Quick-out, Gears in Bundles

In task analysis, both seasoned or new users reacted very well with multiple gears packaged as a single product. This saves time for learning or searching. It also can increase upsell for business on less recognizable items.

The package bundles can differentiate by types or themes, such as car-camping, backpacking, snow apparels with or without skis, families gears, youth outfit ensemble, couples camp bundle, etc.

Customers can then customize each one the gear in size and functions at the PDP using accordion forms.

Design 5: No More Checking Out Twice!

Combining rental and purchasing checkout is already a common practice. By designing forms for several scenarios at the delivery info page in the checkout flow, any user case is covered whether if they are renting via courier or pick-up, purchasing-only, or both.


Usability Test & Iterations

The usability test yielded a positive feedback. Almost every design components were intuitive to users. They understood clearly what to do and where to go. The user comments that require changes occurred in the checkout phase. They asked for consistency on words like “courier”, “delivery”, “shipping”, “pick up”, and “return”. Once the terminology was aligned, the flow became fluid.

Color Experiments

LastMinuteGear.com does not have a coherent color scheme nor an adequate logo yet. These two matters are essential elements for successful branding. Typically, E-commerce websites for outdoor gears uses simplistic black and white backdrops. Sometimes earth tone like green, brown, yellow are added. For this redesign, I experimented with several unconventional color brands. The goal was to create lasting impressions and identities, and separate this business apart from the other competitors.

The variations below show a variety of options. The green and yellow combo is more common, whereas the other two are unique. The tinted turquoise combo puts customer’s mood at ease, producing a relaxed, supportive expectation. The deep purple and pink combo boldly set it apart from the competitors, as there is no color scheme quite like this. While the pink ease the mood, the purple will linger in memories.


Every design features, UI upgrades, and color experiments culminates into a new and improved core user flow, which in turn addressed the synthesized persona’s problems and elevated their experience using the website. I hope the redesign would propel LastMinuteGear to stand apart as a reliable service in future expansions.

Next Steps

If more time is at disposal, more feature details can be hashed out, more test and interview data can be acquired, more visual design can be iterated. The list goes on. Among them, this is a short list of crucial next steps to ensure the redesign’s success.

  • If there were more time, I would really hope to conduct stakeholder interviews to get more insights from the business point of view.
  • The gear guides here are more comprehensive and thorough than any other E-commerce website. I wish to spend some time organizing the gear guides. Design the best way to organize and made accessible for the users.
  • Continue to iterate on UI design.
%d bloggers like this: