EasyHop: Driving Growth Through UX and Design Systems
Timeline: January - July 2024
Client:
EasyHop is a Costa Rican mobility company catering to small towns, offering transportation solutions including shuttles, guided tours, car rentals, and access to popular tourist attractions.
Challenge:
Designing a comprehensive system to unify EasyHop’s expanding range of services, creating intuitive user flows for new offerings and developing a cohesive design system for their app.
🚩
The problem:
EasyHop originally focused on providing shuttle services but rapidly expanded to include additional offerings like guided tours, car rentals, and access to popular tourist attractions. However, the app lacked a clear structure to accommodate these new services, creating a fragmented user experience and inconsistent visual design.
🎯
Objective:
Develop a unified design system and intuitive user flows that seamlessly integrate all of EasyHop’s services, ensuring users can easily discover, book, and manage their transportation and experiences.
🎭
My role:
Led the creation of the design system, developed new user flows for the app’s expanded services, and designed wireframes and high-fidelity prototypes to ensure a cohesive and user-friendly experience.
Research
Business Needs.
Persona.
Business Needs
🚐
Improve the Shuttle Reservation Flow
The app originally included this flow, but it lacked consistency and cohesion, having been developed incrementally to address isolated issues. The goal was to refine and streamline the entire flow, creating a polished and intuitive experience from start to finish.
🚀
Include More Services
Expand the platform to seamlessly integrate new offerings like guided tours, car rentals, and attraction tickets, creating a one-stop travel solution.
🎨
Create a Consistent Design Style
Develop a cohesive design system that ensures visual and functional consistency across all services, enhancing brand recognition and improving the overall user experience.
📍
A New Location
The shuttle service was initially limited to Santa Teresa, but with the addition of new services, it expanded to include the La Fortuna area. Each location offered different services, requiring tailored user flows to accommodate the unique needs of each region.
Persona
Sarah Gardener: Tech-Savvy Explorer Seeking Safe and Seamless Travel
Sarah, a 35-year-old store manager, is tech-savvy and primarily uses mobile devices for her needs. She’s an independent traveler, passionate about exploring exciting destinations while ensuring her safety. Sarah’s ideal travel experience includes convenient mobility options that require minimal effort on her part.
😡 Main Frustration: Sarah feels frustrated when services are unclear—whether it’s confusing terms, last-minute changes, or unclear communication channels. Trust is essential for her, especially when she’s traveling solo.
User Flows.
La Fortuna User Flow.
Santa Teresa User Flow.
Other Services User Flow.
La Fortuna User Flow
The user flow for La Fortuna was complex, with multiple sub-flows tailored to each service. Depending on the user’s choices, certain services could merge with other sub-flows for a more streamlined experience. The image highlights part of the extensive flow for this location.
Santa Teresa User Flow
Santa Teresa had fewer services available compared to La Fortuna, resulting in a slightly less complex user flow. However, it still maintained essential sub-flows to ensure smooth navigation and service selection.
Other services User Flow
For the remaining services, an extra flow was designed to connect with EasyHop’s partner alliances, providing users with an extended range of mobility solutions seamlessly integrated into the app.
Task Flows with App Screens.
Main Menu.
Shuttle services: 2 days ticket.
Combos (day aventure).
Rent a car.
Main Menu
Both Locations
The menu was divided by locations and service categories, ensuring users could access the same options from various points in the app, depending on their preferred way of searching.
Alliances in Mobility
Under the "Other Services" section, we added options that redirect users to partner websites, allowing EasyHop to earn a commission on referral sales.
Manage My Bookings
Users have a dedicated section within the app to view, manage, and track all their current and past ticket purchases.
Interactive Location Map
An interactive map displays all shuttle stops and available services across the country, helping users plan their trips more effectively.
Shuttle services: 2 days ticket
Multiple Rides
A new feature that allows users to purchase multiple tickets, including round-trip journeys or tickets to different locations with flexible schedules.
GPS Location Search
Users can now input a location on the map, and the app will automatically suggest the nearest shuttle stop, making route planning easier and more convenient.
QR Code Tickets
Passengers can now present a QR code as their ticket, enhancing safety and improving organization for both drivers and passengers.
Add-On: Tourist Attraction Tickets
Before completing payment, users are prompted to purchase entrance tickets to tourist attractions where the shuttles take them, enhancing convenience and the overall experience.
Combos (day aventure)
Combos are itineraries that mix various services such as shuttles and entrance tickets to tourist attractions. The idea is take yourself on an adventure without having to worry about every thing by separate, and have a better experience overall.
Rent a car
Local People Car Rentals
The Rent-A-Car service focused on allowing locals to rent out their cars for extra income. Each car listed underwent a thorough quality and condition check to ensure it met service standards.
Driver Information Form
To streamline the booking and verification process, the driver information form was designed with input masking to only accept valid, legally required data, such as license information and other key details.
Design Systems.
Atoms.
Molecules.
Organisms.
Atoms
Molecules
Organisms
For the Future.
Impact.
Lessons Learned.
Impact
"Building from a well-structured design system significantly boosts business efficiency and strengthens brand consistency. Additionally, the improved UX flows enhanced the user experience and helped reduce operational costs, including the need for extensive client support manpower."
—Jose María Calvo, Founder of EasyHop
Lessons Learned
🚀
The Importance of Scalability with Design Systems
A well-built design system not only creates consistency across services but also allows for easier scalability when introducing new features or expanding to different locations.
📍
Tailoring Solutions to Regional Needs
Each location (Santa Teresa, La Fortuna, etc.) had different user needs and available services, highlighting the importance of designing user flows that adapt to varying contexts without creating complexity.
🔄
Simplifying Complex Flows Improves Usability
Breaking down and optimizing complex user flows (like shuttle bookings) demonstrated that even small improvements can have a significant impact on reducing friction and improving user satisfaction.