UX/UI CASE STUDY & WORDPRESS DIVI IMPLEMENTATION
Primera Plus:
Homepage Redesign
A modern homepage redesign built with WordPress and Divi, focused on helping travelers find essential schedule information and seamlessly begin their ticket booking journey.
BACKGROUND & OVERVIEW
Connecting Millions Across Mexico
Primera Plus is a nationally recognized intercity bus brand in Mexico and a major operator on routes connecting Mexico City with prominent commercial and tourist destinations across the country.
Its homepage is a critical entry point for travelers looking to check schedules, purchase tickets, explore onboard services, and find customer support answers before their journey. This project focused on rethinking that entry point to reflect the brand’s established presence, make essential trip information intuitive to find, and effortlessly guide visitors toward booking their next trip.
How could the homepage help travelers instantly identify their next step while keeping Primera Plus services and promotions easy to discover?The Core Challenge
THE CHALLENGE
Balancing Speed with Discovery
The previous homepage suffered from visual clutter where seasonal banners and customer support notifications competed directly with the ticket search module.
Ticket Search CompetitionPromotional banners pushed the critical schedule lookup box below the viewport on laptops.
Secondary Task FrictionTravelers checking luggage policies, invoice billing (facturación), or terminal addresses were stranded.
WordPress / Divi ScalabilityThe design needed to be maintainable by the internal content marketing team without code breakdowns.
STRATEGY & GOALS
Design Objectives
Four foundational pillars established to steer both UI design and WordPress technical implementation.
Prioritize Trip Search
Place the booking selector at the immediate visual entry point, enabling passengers to set Origin, Destination, and Dates with zero friction.
PRIMARY FLOWDesign Objectives
Leverage AI-assisted ideation using Stitch and Claude to explore and refine design concepts.
INFORMATION CLARITYCohesive Brand Identity
Elevate Primera Plus’s established reputation with refined typography, accessible contrast tokens, and sleek component modularity.
BRAND TRUSTMulti-Device Fluidity
Optimize Divi breakpoints to ensure tap-friendly selectors on mobile while delivering full panoramic efficiency on desktop screens.
RESPONSIVENESSCURRENT STATE ANALYSIS
The Current Home Is Hurting the Business
Despite a loyal user base and solid operations, the current experience is limiting conversion and retention.
of traffic arrives on mobile.
The current layout is not optimized for small screens, creating friction at the most critical touchpoint.needed in the Hero — everything else competes for attention.
Promotions, routes, services, and legal links are all given equal visual weight, making the primary CTA invisible.KEY FRICTION POINTS
- Seasonal banners and promotions overpower the booking search inputs.
- Information architecture is scattered across promotions, routes, services, terms, and contact links.
- Mobile loading is sluggish on low-connectivity bands, directly impacting conversion on the go.
DIVI & NATIVE WORDPRESS
Native, Reusable WordPress with Divi
Using Divi’s native WordPress blocks, the design was translated into responsive pages without custom code. The system keeps content flexible, consistent, and easy for teams to maintain.
- Import & Export: Components move between environments as reusable Divi Library assets.
- Global Components: Shared modules update consistently across pages from a single source.
- No-Code Responsive: Native Divi controls adapt layouts across breakpoints without custom CSS or JavaScript.
OUTCOMES & GROWTH
Measurable Impact
Quantitative results observed within 60 days following the WordPress production deployment.
