Event booking on Mobile web browsers
Enabling users to book tickets to their favorite events on the go
About Sympla.
Sympla is Brazil’s Top event management and online platform that connects people with unique experiences. As market leader it holds the biggest events number of Brazil, featuring all types of events for every type of person.
Client
Sympla
Year
2014
Deliverables
- HTML Markup
- CSS Files
- Prototypes
The challenge
The ever-increasing mobile device adoption changed the way consumers buy online. At the time (back in 2014) Sympla didn’t own a mobile app nor they had at least a responsive website that could allow users to navigate the website and still search for and book event tickets.
My Role
I was assigned with the task of designing a fully responsive website that works on every major mobile phone.
Main Tasks
- Web Design
- Mobile-First
- CSS Code
- User Interface Design
The Design Process
- Desk Research and Google Analytics Audience Analysis
- Mobile-First CSS Code Writing
Design and Research Toolkit
The tools and artifacts chosen for the task at hand.
Sketch
Illustrator
Balsamiq Mockups
Dreamweaver
Desk Research
Contextual Enquiry
Desk Research
By analizing and tracking Google Analytics key metrics we were able to confirm our initial hypothesis of larger numbers of traffic via mobile devices, and we needed to capitalize on this increasing trend.
Mobile-First CSS Code Writing
Coding for larger screens is often more complicated than coding for smaller screens. This is why coding using a mobile first approach helped us simplify our code and extend the same functionality across devices, without compromising the already existing user experience.
Screen Design
Designing and coding with a Mobile-First approach in mind let us adapt the existing user flows to multiple viewports and devices, without compromising the already existing and functioning experience on desktop or larger screens.
Final result
Searching, booking and paying for tickets was possible on every major screen.
01
Searching events
Filtering and narrowing down events based on personal preferences is convenient and works using mobile interaction patterns.
02
Ticket selection
Adding or removing as many tickets as needed is easily done.
03
Ticket Payment
All the fields required to make a payment fit nicely on the mobile layout.
Simplified Event Searching
The desktop event searching counterpart is extended on wider screens.
Simplified Online Payment
The same holds true for ticket payment. The user experience is even enhanced on wider screens as a new responsive layout replaced the previous desktop first design approach.
The impact
32%
of gross ticket sales came from mobile devices
63
Traffic increase on Mobile Devices