Customer Flow and Visual Experience Design
Timeline: 3 weeks
Platform: Desktop, Mobile/Responsive Versions
Roles: User Research, UX Design, Wireframe, Prototype, Usability Test, Visuals.
Into the forest I go, to lose my mind and find my soul.
Living in the SF/Bay Area, we are blessed with the world-class nature getaways. However, San Franciscans ranks 5th smallest nationwide, having an 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 will mostly be outfitted with rental gears!
The #1 search result for gear 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, Union Square.
This is a case study of a speculative redesign of their rental website.
In opposition to the business’ expertise and its great service ethics, their E-commerce website has not yet lived up to its potential. For example, the customers learns about each gear by reading pages of dense gear guides. Here are a few more noticeable issues:
Used item sales page is not well-supported, rather it is a complicated Google sheet, and their products are listed via KnockKnock.
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.
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.
Rather than addressing the above issues, I began by making general business researches and focused on redesigning Last Minute Gear’s core task flows. By straightening the core flow, the “spine”, the various features and issues in questions may also be calibrated accordingly. This core flow is the gear rental experience.
First step was to explore the outdoor gears vendors and the online rental businesses. Through feature inventory and user testing exercises, I came a way with some understandings such as…
The first steps I took in research and discovery phase were 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 can in turn be summarized into two personas. My core user flow will provide service and memorable experiences these two personas.
Next I plotted user emotions as Journey Maps through the lenses of our user personas. With these I can visualize high and low points of their user experiences and areas to improve upon.
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 enjoyed finding new gears to buy or rent. But he is discouraged first when he needs to make a purchase-only checkout. Then reach a lower point spending time collecting rental gears and go through a second checkout for rentals
Stephanie, as with all adventurers, may in her first time gear-shopping experience, realizing that she needs know a lot of things in a hurry to choose the right gears. Without the appropriate knowledge, the uninformed choices can make or break the success of the trip.
At time like this she seeks assistance, a way to inform her fluidly and comfortably throughout the rental process. Without help, she is at risk leaving the website for Youtube help or for bigger stores.
The two personas’ problems can be summed up as such:
Next, I conducted card sorting to determining 2 quandaries regarding information and navigation architectures:
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.
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.
Based on the evidence gathered, I came up with the following design ideas:
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.
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 experienced users browse by activities (camping, snowsport, climbing), the inexperienced users browse in department store mentalities (men, women, kids). The solution here was: Why not both? Moving these categories to the top tier nav.
According to the research, new users want information to help them choose the correct gears, and they want it in a digestible format in the shortest time possible so they don’t leave the site. My new design features short movies that are placed vertically on the PLP page, similar to the appealing and familiar TikTok viewing approach. The video will play silently when hovered, or with sound when clicked upon.
The videos will be relevant to the products nearby. For example, a video explaining sleeping pad types is placed in the rows of the sleeping pad products. (The current gear guides are still resourceful and should remain as further 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
In task analysis, both seasoned or new users reacted very well with multiple gears packaged as a single product. This saves time from 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.
Combining rental and purchasing checkout is already a common practice. By designing text fields for several scenarios in the checkout flow, any user case can be covered whether if they are renting via courier or pick-up, purchasing-only, or both.
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.
LastMinuteGear.com does not have a coherent color scheme nor an adequate logo yet. These two matters are essential elements for successful branding. In the small window of time, I experimented with several unconventional color brands. My hope was to create a lasting impression with a distinct identity, not staying in the norm of another sporting good website.
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 offers a relaxed, supportive experience. The deep purple and pink combo boldly stands apart from the competitors, as there is no color scheme quite like this. The pink stirs excitement, the purple lingers in memory.
The resulting user journey maps should now be improved as such…
The usability tests helped affirming that the new and improved core user flow, a combination of new design features, UI upgrades, and color experiments, addressed the synthesized personas’ problems and uplifted their experience using the website. I hope the redesign would elevate LastMinuteGear to have a reliable online presence as they scale up in the future.
Some lightbulbs and takeaways from this project were…
If more time is are available, more feature details can be hashed out, more test and interview data can be acquired, more visual design can be iterated. The possibilities goes on. A few immediate steps to strengthen the redesign:
