Project Profile 💼

Introduction & Background 📖

Webconnex, a white-label ticketing Software as a Service (SaaS) app company, was responsible for powering four verticals: TicketSpice, RegFox, RedPodium, and GivingFuel. As the user base grew rapidly beyond the Minimum Viable Product (MVP) stage, it became evident that the entire application, including the user dashboard and form builder, required a comprehensive overhaul. The existing infrastructure, relying on legacy PHP code and the relatively unstable MyISAM storage engine, was no longer sufficient to meet the evolving demands.

The decision was made to release a new version that had been in development for nearly two years. This project aimed to rebuild the application using Angular and Golang, adopting a modern tech stack to enhance performance, scalability, and stability. The key objectives were to introduce a brand-new user interface and substantially improve the overall user experience.

While progress had been made in defining the new UI/UX, the mockups provided by an off-shore agency had limitations, and the team recognized the need to take the lead in designing and refining the user interface. Despite this challenge, the team worked collaboratively and efficiently, ultimately delivering a beta version of the new application within a few months’ time.

This feat was achieved by operating as a partially distributed team, effectively collaborating despite physical distance. The dedicated efforts of the design and development teams resulted in a successful beta rollout, showcasing the advancements made in design, user experience, and technology.

The Dashboard 📍

Webconnex’s revenue model revolves around charging customers for each ticket sold through its platform. However, the core of its business lies in the functionalities that operate behind those payment walls. Central to this model is the user dashboard, which serves as the command center for users, facilitating critical interactions and providing essential features.

The user dashboard houses the form builder, a tool that empowers customers to create frontend customer registration forms. This form builder enables seamless and customizable form creation, catering to specific event requirements and branding needs.

On the backend, the user dashboard also offers a suite of features for data visualization and financial reporting related to ticket sales. These analytical capabilities provide valuable insights and feedback to users, allowing them to monitor the performance of their events, assess revenue generation, and make informed decisions to enhance their event strategies.

The combination of the frontend form builder and the backend data visualizations and financial reports constitutes the core value proposition of Webconnex’s platform. This holistic approach provides customers with a comprehensive solution, enabling them to not only manage ticket sales but also gain actionable insights and drive success for their events.

The existing application, while serving its purpose, faced limitations in its potential for growth and competitiveness compared to industry leaders like EventBrite or TicketLeap. These limitations were primarily due to the technical debt and constraints associated with its PHP code, accumulated over a span of three years. As a result, power users were eagerly awaiting an upgraded release that could elevate the platform to new heights.

To address these challenges and create a cutting-edge, engaging, and user-friendly version of the application, a new team was assembled. This team was tasked with ushering in a complete transformation, reimagining the platform’s capabilities and user experience. As part of this initiative, I was appointed as the ninth member of this team, entrusted with contributing to the success of the ambitious project.

The goal of this new team was to build a sleek, modern, and intuitive application that would not only cater to the existing user base but also compete effectively in the market against industry giants. The emphasis was on creating a more scalable, feature-rich, and responsive platform to meet the diverse needs of users and event organizers.

Simplifying the User Experience 🪄

The revamped version of the application introduced a significant improvement in the user experience related to form creation. Unlike the previous approach, where form creation and preview were separate and disjointed, the new version allowed users to seamlessly view and edit the form live on the same page.

In the old version, users had to navigate between two separate pages: one dedicated to laying out form items, and another serving as the form preview page. This fragmented process made it cumbersome and less intuitive for users to design and visualize the form’s appearance and layout effectively.

In contrast, the new approach provided a more cohesive and user-friendly experience. Users could now design, customize, and preview the form in real-time, all within the same page. This live editing capability enabled them to make immediate adjustments and see the results instantly, eliminating the need for back-and-forth navigation between different pages.

By streamlining form creation and preview on a single page, the new version enhanced the efficiency and intuitiveness of the form-building process. This seamless integration empowered users to create visually appealing and functional forms more effectively, contributing to an overall improved user experience.

Moreover, in the new version of the application, the representation of transactional data underwent a significant transformation. Instead of relying on plain, row-based data similar to Microsoft Excel, the team introduced the use of data cards along with the interactive AM Charts library to visualize how users’ registration forms performed.

The adoption of data cards provided a more visually engaging and informative way to present transactional data. These data cards offered a concise and focused view of essential data points, making it easier for users to interpret and analyze the information at a glance.

To further enhance the data visualization capabilities, the interactive AM Charts library was integrated into the platform. This modern and sophisticated library allowed for dynamic and interactive charts and graphs, enabling users to explore the data visually and gain valuable insights. The dated visualization library used in the previous version was replaced with this robust and versatile solution, providing a more immersive and engaging data visualization experience.

By leveraging data cards and the AM Charts library, the new version of the application empowered users to better understand and analyze the performance of their registration forms. The combination of these cutting-edge data presentation tools offered a significant improvement over the previous row-based data representation, elevating the data visualization capabilities of the platform and enhancing the overall user experience.

In the enhanced version of the application, a new feature was introduced to empower users with greater control over their transactional data. Users now had the capability to assign form tags, providing them with a powerful tool to filter and drill down into specific data subsets. This feature was a significant addition that did not exist in the previous version, enhancing the platform’s data management and analysis capabilities.

The introduction of form tags allowed users to organize their transactional data efficiently and apply relevant labels or categories to specific form entries. With this functionality, users could effortlessly filter and focus on specific subsets of data, streamlining their data exploration and analysis process. This feature provided a more streamlined and targeted approach to data visualization, enabling users to gain deeper insights into their registration forms’ performance.

Furthermore, the financial reporting aspect of the application was significantly improved through the integration of the DataTables library. This integration brought a more interactive and user-friendly data presentation experience, enabling users to interact with their financial data more effectively. The DataTables library facilitated seamless data sorting, making it easier for users to organize and analyze financial information based on various criteria.

The integration of DataTables also enhanced the data export process, offering faster and more efficient user exports. Users could now extract the desired financial data in a structured and organized format, allowing for better data sharing and collaboration with stakeholders.

In the upgraded version of the application, users were offered a substantial improvement in form design flexibility. The new version introduced the capability to use new, mobile-friendly themes for all forms, a significant upgrade from the initial offering, which lacked responsiveness.

With the introduction of mobile-friendly themes, users gained the ability to create and customize forms that adapt seamlessly to various screen sizes, including desktops, tablets, and mobile devices. This responsiveness ensured that the forms displayed optimally on any device, enhancing the user experience and accessibility for both form creators and respondents.

The previous version of the application lacked this crucial responsiveness, potentially leading to a suboptimal experience for users accessing forms on mobile devices. However, the new mobile-friendly themes provided a modern and versatile design approach, accommodating the evolving preferences of users who increasingly access digital content through mobile platforms.

By incorporating mobile-friendly themes, the application significantly enhanced its form design capabilities, empowering users to create visually appealing and user-friendly forms across all devices. This upgrade represented a substantial step forward in form design, aligning the platform with modern industry standards and catering to the diverse needs of users in an increasingly mobile-driven landscape.

A significant improvement was achieved by consolidating the various menu areas into a single, stacked menu, resulting in a more intuitive and user-friendly interface.

The stacked menu featured a primary menu bar, dedicated to campaign and reporting information, offering quick access to essential functionalities related to campaign management and performance analysis. Additionally, a secondary menu bar was introduced, specifically focused on form-related menu items, providing users with convenient access to form-specific features and settings.

This consolidation represented a notable reduction from the previous version’s complex menu structure, which comprised three separate menu bars, in addition to two floating menu items. The previous arrangement resulted in a total of five menu areas, leading to cognitive overload and confusion for users.

By implementing the stacked menu approach, the new version simplified the user interface, minimizing distractions and unnecessary complexities. This cleaner and more organized navigation system enabled users to access all relevant information more efficiently and with greater ease. The reduction in menu areas significantly improved the overall user experience, facilitating faster and more intuitive navigation throughout the application.

Design, Development & Collaboration 💻

Approaching this behemoth of a project within a relatively short time frame was no easy task, so after everything was scoped out, these were my responsibilities:

• Find/use a suitable CSS framework (Foundation vs. Bootstrap) for the app
• Use an agency’s mockup as a springboard for designing the user interface
• Create SASS partials for the various shared backend components
• Design several form themes and choose appropriate font pairings
• Theme the AM Charts library to make it look more native to the SaaS app
• Create a custom font/icon library to replace the dated famfamfam image library
• Design new marketing websites to accompany the highly-anticipated app version
• Design any and all marketing-related assets to promote the new version of the app

As a partly distributed team, all aspects of communication and collaboration were handled through Slack chats, Google Hangout calls, on-site meetings and screen pairing sessions, while Asana kept us on track to hit all milestones. Any blockers were immediately reported to the lead developer to stick to the development deadline. 

Results 🎯

The results of the upgraded version of the application were exceptional, receiving overwhelmingly positive feedback from the initial testing pool. This resounding success led to the full production release of the new version, which had previously undergone a year-long beta mode.

During the beta phase, the application’s user response was highly favorable, validating the effectiveness of the enhancements and improvements. While specific user data is no longer accessible, the success of the upgraded version was evident through Webconnex’s impressive performance metrics.

Notably, Webconnex’s Annual Recurring Revenue (ARR) significantly increased, reaching an impressive $1.2 million. Moreover, the platform processed nearly $2 billion in ticketing fees, at the time, demonstrating the substantial impact of the upgraded version on revenue generation and business growth.

In an impressive milestone, Webconnex crossed the remarkable threshold of processing over $4 billion in ticketing fees to date, further affirming the platform’s widespread adoption and success in the market. Additionally, the successful beta launch led to considerable expansion, with the team size more than doubling to accommodate the growing demand and ensure continuous improvements and support for users.

In summary, the results of the upgraded version were resoundingly positive, as indicated by the overwhelming user response during the beta phase. The full production release was driven by the success of the platform, reflected in Webconnex’s increased ARR, processing of billions in ticketing fees, and considerable business growth. The team’s remarkable achievements and expansion post-beta launch attest to the platform’s widespread adoption and continued success in meeting the needs of users and event organizers.