Mobile Website
Project start: March 2019
Timeline: 8 months
Services: UX, UI, User Research and Data Analytics
Platform: Responsive Website
About the project.
The Ingresso.com mobile website stood as the most prominent touchpoint, contributing significantly to our access numbers. However, in March 2019, our Business Intelligence team unearthed a noteworthy insight. Despite the considerable page views on our website, there was a correspondingly elevated rate of rejections. A substantial portion of our users were leveraging the mobile breakpoint to ascertain the showtimes for the movies they intended to watch. Interestingly, a considerable proportion of these users were transitioning to desktop devices to actually procure their movie tickets after discovering the showtimes on the mobile platform.
Mobile website
Page Views
High
Conversion rate
Low
Desktop website
Page Views
Medium
Conversion rate
High
Research.
In order to comprehend the reasons behind this phenomenon, the UX team initiated an extensive discovery process. We employed 18 distinct methodologies to aid in the identification of issues within the mobile website.
List of methods used in the discovery process
Prints of some of the documents generated
Through this comprehensive research, a wealth of user data was amassed. This encompassed details such as users' ages, residential states, preferred payment methods, habitual moviegoing days of the week, favored breakpoints for access, preferred movie theaters, average quantity of movie tickets purchased in a single transaction, companions for movie outings, frequency of monthly cinema visits, most commonly purchased ticket type, and various other pieces of information.
Moreover, an exhaustive evaluation of the mobile website's usability was conducted. This evaluation encompassed the identification of its principal issues, the absence of critical features, the significance of the mobile breakpoint for users, and a myriad of other pivotal insights.
Our findings revealed that our mobile website suffered from significant shortcomings. It exhibited confusing navigation, lacked vital features, suffered from visual clutter, exhibited poor performance, functioned inadequately on certain outdated devices, and was plagued by excessive advertising.
Photos and a print screen of the personas and empathy maps
Photos of some of our design process meetings
Challenge.
A decision was made to develop the mobile website independently from the desktop version. To facilitate this, we harnessed PWA (Progressive Web App) technology for constructing the new mobile platform. PWAs represent a contemporary class of web technologies rooted in JavaScript. Fundamentally, PWAs function as web applications grounded in standard web technologies, yet fortified with JavaScript enhancements that imbue them with the look and feel of native Android or iOS apps. Notably, a PWA website has the capacity to operate even in offline mode and can be seamlessly integrated into a user's phone home screen akin to a native application.
The outcome materialized as a lightweight website, adorned with a multitude of mobile-native components, providing a distinct user experience focused on the mobile users needs.
The ingresso.com mobile PWA website added at the phone home screen
My role.
I worked as a Product Designer, working closely with a Product Design team, a Product Manager, Developers and Executive Stakeholders. I worked on the discovery process, data analysis, research, sketches, prototypes, usability testing and final screens.
Design tools.
Sketch
Clicktale
Google Analytics
Zeplin App
Maze
Invision
Lucidchart
(Old but gold) Pen and paper
Information Architeture.
To redesign the entire mobile website, we needed to completely redo the information architecture. This was done to better organize every feature with which the user could interact, creating a more intuitive flow for users to accomplish their tasks. Despite having the desktop website as a reference, we seized this opportunity to enhance our sitemap and incorporate new pages and desirable features.
Photos of some of the sketches made to redesign the information architecture
Photo and prints of some of the sitemaps and flows
