top of page

Crocbikes.co.nz

Website design and development

Profile.png

The Enormous Crocodile company was founded in 1997 and has become an iconic attraction for the Wellington waterfront. In 2015 the inception of Shake was created and its over-the-top crocshakes have become synonymous with hiring a crocbike on a sunny day.

Client

Aston Christie

Role

Web development & Experience designer

Location

Wellington and Remote

Brief

Redesigning the existing website and implementing a booking system

Painpoints

  • There is no website to showcase the business

  • No place for customers to check starting time and pricing of the bikes

  • No interaction medium to contact the admin for help or provide feedback.

Proposed Solutions

  • A website with basic information about the business

    • About page to provide information about the business and opening hours
    • Contact page to check the location of the business
    • Shakes Menu for checking out what they offer in their cafe
    • Booking & Gift card for customers

Research

Findings

My initial research focused on the competitive landscape within the bike rental industry, aiming to gain insights into how other companies are tackling similar challenges. Conducting a comprehensive analysis of more than 100 user survey responses was instrumental in quantifying customers' preferences, shedding light on what aspects they value in a bike rental service and the specific issues they aim to address. Additionally, engaging in one-on-one interviews proved invaluable in comprehending users' individual journeys and uncovering specific challenges that our bike rental company, CrocBikes, would need to address in order to enhance the overall user experience.

  • In the bike rental industry, while there's no direct competition in subscription management, users engage with an average of 5 services/month, expressing frustration with transparency. Concerns range from a lack of understanding to a desire for better optimization. Finding the right bike is a shared challenge, with reasons varying.
     

  • Wix's booking system is favored for its user-friendliness. Additionally, there's a strong demand for gift cards, highlighting the need for convenient and flexible options in bike rental services.

Getting Closer to User-Centered Design

Defining Key Differences in Motivations Through Personas

  • Examining user motivations for CrocBikes, two key personas emerged:

  • Family Explorer:

  • Motivations: Values family time, scenic exploration, and budget-friendly options.

  • App Interaction: Prefers route suggestions and budget filters.

  • Vacationing Duo:

  • Motivations: Seeks romantic exploration, convenient transportation, and flexibility.

  • App Interaction: Relies on browse, search, and filter functions, and considers user ratings.

  • These personas highlight the diverse needs in CrocBikes' user base, guiding the development of functions to cater to both family-oriented explorers and couples on romantic getaways.

Persona.png
Persona 2.png

Creating Structure

  • Shaped by user surveys and interviews, CrocBikes' website site map emphasizes three key task streams in its high-fidelity prototype:

  • About Us: Introduces CrocBikes' background, mission, and values.

  • Booking Rental: Facilitates a seamless process for bike selection and reservation.

  • Menu: Navigational hub for bike categories, pricing, and additional services.

  • Additionally, future-proofing is considered through sections like: 4. Membership: Outlines future options anticipating evolving user needs.

  • Discounts: Showcases promotions and rewards to enhance user engagement.

  • Sign Up/Sign In: Provides clear options for user registration and login.

  • This user-centric site map guides design decisions, ensuring a streamlined and intuitive experience based on collected insights.

Sitemap.png

Visualizing a User-Centric Experience

Rapid sketching allowed me to explore design patterns common among apps in the competitive landscape, helping me understand which needed to carry over into crocbikes to ensure familiarity.

Crocbikes-HomePage.png
Crocbikes-About.png
Crocbikes-Booking.png
Crocbikes-Menu.png
CITA-Contact.png

an overview screen layout serves multiple purposes, including results from searches and filter refinements

Establishing Visual Design

Crafting CrocBikes' brand involved establishing a foundational design system, incorporating the primary color green to symbolize vitality and eco-friendliness. This system ensures a consistent visual language across product and marketing, reinforcing the brand's core mission: Enhancing biking experiences for users.

Colours.png

Testing design and launching

Prior to launch, the CrocBikes website undergoes comprehensive testing, ensuring seamless functionality, security, and compatibility. Special attention is given to dark mode implementation, subscription modes, and merchandise shop integration. A strategic launch plan, including marketing campaigns, sets the stage for an exciting introduction. Post-launch, continuous monitoring and user feedback channels enable real-time optimizations for an enhanced biking experience.

final design.png

Have a look into the current website crocbikes.co.nz

How Usability Might Be Improved

  • Advanced Filtering: Refine bike choices with sophisticated filters based on preferences, terrain, and features.

  • Subscription Modes: Tailor models for regular and seasonal users, ensuring flexibility and cost-effectiveness.

  • Merchandise Shop: Diversify revenue with a branded shop, enhancing loyalty and engagement.

  • Dark Mode: Offer improved visibility and a personalized visual experience.

  • Enhanced Analytics: Analyze subscriptions for usage patterns, preferred models, and user feedback.

  • Data Visualization: Visualize biking habits and routes for informed decision-making.

  • User Engagement: Prompt feedback and ratings for continuous improvement.

  • Recommendation Algorithms: Personalize recommendations based on individual preferences.

  • Clear Confirmations: Ensure transparent subscription profiles and cost messages, building user trust.

Lesson Learned

Initially, I approached the CrocBikes project with the assumption that the app's primary function would revolve around basic bike rental management, allowing users to initiate and pause subscriptions. However, a swift realization unfolded as users expressed the need for more information to inform their decisions. The apprehension around sharing sensitive details, coupled with skepticism regarding cost reduction promises, underscored the importance of addressing user concerns through thoughtful copy on crucial screens. The inclusion of detailed explanations and accessible support channels became imperative.

Much like users' diverse preferences in content discovery, bikers seek different ways to explore and choose bikes. Acknowledging this, the app's filtering options must provide a variety of variables, offering users a plethora of choices rather than limiting their options.

Originally conceiving "usage reports" with a neutral stance, presenting data as is, I discovered that users desired more proactive guidance. While they found the reports intriguing, there was a clear preference for actionable insights. For instance, when facing potential cost inefficiencies, users wanted the app to guide them on maximizing their biking experience or suggest actions to save money. This user feedback emphasized the importance of providing not just information but actionable recommendations to enhance the overall CrocBikes experience.

bottom of page
"use client"; import React from "react"; import { Boxes } from "../ui/background-boxes"; import { cn } from "@/lib/utils"; export function BackgroundBoxesDemo() { return (

Tailwind is Awesome

Framer motion is the best animation library ngl

); }