GeerGarage: A peer-to-peer gear rental service
I redesigned the GeerGarage homepage to reflect the e-commerce journey while educating various stakeholders and building user trust.
Overview
Client
GeerGarage
Timeline
2 Weeks
Responsibilities
UX Designer
Skills
UX Design
UI Design
Content Design
Visual Design
Design Guidelines
The Challenge
GeerGarage, a peer-to-peer rental service startup, aimed to simplify its homepage experience to cater to first-time visitors and repeat users alike. My task was to redesign the homepage to clarify its offerings, improve usability, and establish a scalable design framework.
The existing homepage struggled to:
Clearly define the service for first-time visitors.
Provide quick access to key actions for returning users.
Inspire trust among a diverse user base.
Results
I approached the redesign with a dual focus:
Drive Action – Simplified navigation and actionable CTAs for repeat users.
Build Trust – Streamlined messaging and visuals to clearly communicate the brand’s value and services.
Key improvements included:
Enhanced Usability: Organized the layout to prioritize user tasks.
Clear Messaging: Refined copy to succinctly explain the platform’s value.
Visual Consistency: Developed a cohesive design system to ensure scalability and ease of implementation.
Final Deliverable
Final Hi-Fidelity Redesigned Webpage
Research
Initial analysis of the homepage led to a number of discoveries that drove design decisions.
Analyzing the existing design - Creating Patterns. Inspiring Trust. Prompting Action.
To kickstart the redesign process, I conducted a quick design audit and heuristic evaluation of the existing homepage. This helped me uncover key usability challenges and opportunities related to navigation, user segmentation, and the clarity of GeerGarage’s brand offerings.
Through my research, I identified five critical features that the homepage needed to address:
Educate First-Time Visitors - Clearly communicate what GeerGarage offers and how users benefit from the service.
Enable Quick Actions for All User Groups - Cater to the specific needs of:
First-Time Visitors: Easy onboarding and exploration.
Repeat Users: Streamlined access to key actions, like searching or renting.
Rental Businesses: Tools to manage their listings efficiently.
Build Trust - Establish credibility through testimonials, secure payment systems, and a clear value proposition to convert new users.
Inspire Lenders to Join the Community - Highlight the benefits of renting products to attract more lenders and grow the platform.
Set Consistent Content Guidelines - Develop a cohesive content strategy to maintain clarity and drive user actions across the platform.
Lo-Fi Design
Final Hi-Fidelity Redesigned Webpage
Lo-fi:Rethinking Content and Design Components
The initial redesign centered on establishing a cohesive strategy for content and design by focusing on key deliverables and repeatable components. These components were crafted to:
Help users instinctively understand the offerings through familiar, repeatable patterns.
Align with e-commerce best practices while adapting to the unique requirements of a peer-to-peer gear rental platform.
Design Approach
I leveraged familiar e-commerce patterns, carefully adapted to reflect the workings of a rental service. This approach ensured that:
Users could navigate the platform with ease and confidence, relying on instinctive interactions.
The content and copy provided conscious, focused insights into the platform’s offerings, building both understanding and trust.
Content Strategy
The content design focused on minimalistic, action-oriented copy to:
Guide Users Toward Action: Key CTAs and microcopy encouraged seamless progression through the site.
Reveal Information Incrementally: Structured a scroll-based information flow to reduce cognitive load, revealing details progressively as users explored the homepage.
Mid-Fi Design
Color contrast for buttons made and other smaller concerns needed to be considered as I took on the redesign of the project.
I designed a set of guidelines around the use of icons, buttons and other elements to ease future scaling and design.
Mid-fi - Rethinking Content and Design Components
As I progressed to mid-fidelity designs, I identified critical design challenges, particularly around color and branding, which lacked accessibility and cohesion. To address these, I established foundational design standards and guidelines—a rudimentary design system to support future scalability and expansion.
Redefining Colors and Branding
The new color palette was inspired by the brand’s core values of nature and exploration, aligning with the adventurous spirit of its users. Drawing from the activities GeerGarage supports—hiking, surfing, and trekking—I crafted a color guide that:
Enhanced Accessibility: Ensured the colors met WCAG standards for contrast and usability.
Reflected the Brand’s Essence: Captured the vibrancy and energy of outdoor adventures while maintaining a professional, trustworthy aesthetic.
A Foundation for Scalability
This initial design system established:
• Consistent UI Elements: Buttons, typography, and icons that harmonized with the new color scheme.
• Scalable Guidelines: A flexible framework that could adapt to future design needs without losing the brand’s identity.
This step not only improved the visual identity but also laid the groundwork for a cohesive and accessible user experience, ensuring the design could grow with the platform.
Content Design
I established content guidelines defining key words and phrases that need to be added to aid users in differentiating their experience from conventional e-commerce platforms.
I designed guidelines around the use of buttons and complex components like item cards highlighting incentives, RTBs, quick actions, and other details that users might seek.
Content and Design Refinement for Outdoor Rental Commerce
To position GeerGarage as a leading outdoor rental service, I ensured that e-commerce patterns were seamlessly integrated into the homepage while tailoring them to the unique needs of the rental industry.
Defining the Brand Voice
A key focus was establishing a distinct and relatable brand voice. By owning specific keywords like “Adventurers,” the brand connected with its target audience while reinforcing its identity as a platform for exploration and discovery.
Reimagining Rental Cards
Traditional e-commerce cards were adapted to suit the rental service’s requirements, resulting in a card design that was both familiar and unique. Key features included:
• Action-Oriented CTAs: Introduced a unique call-to-action, “Request Rental,” to align with the rental process.
• Item-Focused Design: Shifted from SKU-based cards to item-specific cards that highlight the gear itself.
• Brand RTBs: Incorporated Reasons to Believe (RTBs) that built trust and showcased the platform’s credibility.
• User-Centric Elements: Simplified visuals and clear information for quick decision-making.
Balancing Familiarity and Innovation
This approach retained the usability of proven e-commerce patterns while tailoring them to GeerGarage’s unique service model. The refined content and design ensured a cohesive and intuitive experience, driving action while strengthening the brand’s connection with its adventurous audience.
I understood the rental process and focused on creating a way we could drive quick action amongst the users. This focus was to ensure that there were multiple ways to drive action amongst the users and get them started on the rental process. Later steps would then be elaborated as the user went through the rental process.
I integrated an action bar to initiate the gear rental search process from the get go. This ensures that users find the rental pattern similar to renting or booking an airbnb or a hotel room. This pattern helps users familiarize themselves with the booking process right from the homepage.
Simplifying the Journey with "Gear Search"
A key challenge that needed to be highlighted from the beginning was the rental process on GeerGarage. Instead of purchasing and confirming one's rental, the service raises a rental request, checks its availability, and then provides the necessary details.
These steps needed to be reflected in a way that wasn't cumbersome or layered. It also needed to be established from the start. That's why I changed how the main action button from “Add to Card” to “Request Rental”. These changes make the actions a lot clearer for the user and reduce the confusion and cognitive confusion that might occur.
Final Design
The Final Design: A Revamped, User-Centric Homepage
The final design was a comprehensive overhaul, building on successful existing features while resolving key pain points. The new layout was strategically divided into sections, each addressing specific challenges and enhancing the user experience:
Sliding Banner Carousel
Dynamic Carousel Banner
• Showcases new features, product additions, and campaign highlights.
• Captures user attention with personalized and engaging visuals.
Quick Action Bar
• Invites users to input prerequisite information, kickstarting the rental search journey effortlessly.
Adventure Based Item Carousel
Adventure-Based Item Carousel
• Designed for first-time visitors to explore products aligned with their interests.
• Enables repeat users to quickly access items they frequently rent.
Service Bio and RTB
Service Bio Section
• Clearly communicates what GeerGarage offers.
• Includes strong Reasons to Believe (RTBs) to instill user confidence.
Partnerships and Top Rentals
Partners Carousel
• Highlights partnerships with trusted third-party brands, reinforcing credibility and reliability.
Top-Rented Items Carousel
• Features popular items frequently rented by past users, encouraging exploration and action.
Testimonials
Testimonial Carousel
• Showcases authentic user experiences to build trust and brand authenticity.
Partnerships
Dedicated Space for Lenders
• Tailored for lender users to start their journey, learn about the service, and explore opportunities.
Recent Rentals, Action Bar, Footer
Reflections
Bridging Two UX Realms: A Reflection on Cohesion and Scalability
This project pushed me to think critically about integrating design patterns from two distinct domains to create a seamless and cohesive user journey. It required balancing the familiarity of e-commerce patterns with the unique workflows of a peer-to-peer rental service.
1. Blending Design Systems and User Journeys
• I learned the importance of adopting a design system-first approach to ensure consistency across the platform.
• This approach not only maintained design coherence but also optimized timelines for future updates and scalability.
2. Designing for Diverse User Needs
• The project underscored the importance of understanding and addressing the needs of various user groups—first-time visitors, repeat users, and lenders.
• Crafting tailored action points for each group was crucial in driving engagement and satisfaction.
3. Strategic Problem-Solving
• This experience highlighted the value of marrying creative design thinking with strategic functionality to deliver a refined, user-centric platform.
Scaling Design Systems: Refining Components for Future Growt
1. Standardizing for Responsiveness
• Adapt the design to ensure a seamless experience across devices, from desktop to mobile.
• Optimize layout, navigation, and interactions for various screen sizes while maintaining design consistency.
2. Crafting the Complete Rental Journey
• Build a comprehensive user flow covering every stage of the rental process:
• Discovery: Easy exploration of available gear.
• Confirmation: Streamlined steps for requesting and confirming rentals.
• Return: Intuitive workflows for returning rented items.
• Focus on ensuring clarity and ease of use at each step to enhance user satisfaction.
3. Refining and Scaling the Design System
• Audit existing design system assets to align with future project requirements.
• Expand the system to accommodate scalability, ensuring all new features and updates integrate seamlessly.
• Incorporate feedback loops to continuously improve and refine the design system.
Next Case
