HTML Builder

Background Story

InterTicket is Hungary's first globally significant online ticketing provider. They tasked us with a very important project. The client already had an online graphic editor, which digitized seating plans for ticket sales. They initially asked us to redesign this tool. Following this, they planned to introduce a new online editor to offer more convenient features for their partners. The final and most complex stage of our project series was to develop the HTML editor presented here. It offers the most versatile features. It allows for the creation of virtually any HTML content, whether it be email templates or landing pages.

Goals

The main goal was to create a modern HTML editor that meets the expectations of a contemporary online graphic editor, ensuring intuitive and easy usability for less experienced users. Additionally, it needed to include essential features such as creating and editing template components, inserting variables to display real data, and various preview functions.

Challenges

The biggest challenge was managing the editing permissions of templates and components across different hierarchical levels. This ensured that users with lower permissions could use templates and components from higher-level users but could only modify them after creating their own copy. It was also crucial to keep the editor interface simple and user-friendly.

Outcome

Our client was able to expand their ticketing platform with an editor interface that offers much greater flexibility to their partners. This solution simplifies the design and management of emails, allowing partners to create unique and high-quality HTML-based content and customize it according to their needs without developer assistance or technical expertise.

Process

Domain Learning and UX Research: Our approach included comprehensive domain learning and UX research to gather inspiration and define user interactions. We thoroughly examined the needs and habits of the target audience to ensure the designed interface truly meets expectations.

Specification Writing: The next step involved grouping functions and preparing a detailed specification outlining the project's requirements and technical details. Each function and requirement was precisely defined to ensure a smooth development process.

Wireframing and UI Design: During the graphic design phase, we first created wireframes to visually represent the basic structure of the interface. Building on these, we developed detailed UI designs, ensuring the interface was user-friendly and visually appealing.

Prototyping and User Testing: We created prototypes for processes containing critical user interactions, which were tested with real users. Based on the test results, we further refined the interface to meet user needs and expectations.

Development: In the development phase, we efficiently implemented everything detailed in the specification. The features came to life based on the detailed planning from the previous months, including those that were only on paper before. Throughout the development process, we closely collaborated with the UX and UI teams to ensure the final product met all expectations.

QA and UAT: Throughout the development process, we integrated thorough Quality Assurance (QA) and User Acceptance Testing (UAT) phases. These were conducted in a dedicated test environment to ensure flawless functionality and compliance with the specifications.

Release and QA: The project concluded with a rigorous quality-assured release phase. Our DevOps team ensured the system's smooth and reliable operation in the live environment with their usual professionalism.

Support: After the release, we continued to provide support to our client to ensure maximum satisfaction among their partners. Even after the project was completed, we promptly addressed any requests and quickly fixed the few minor issues that inevitably arose despite stringent quality assurance.

Summary

As a result of the project, we provided our client with a solution that improved communication and simplified their workflows, saving them time and costs. The features we implemented significantly contributed to enhancing the efficiency of their system.Some of the key features include:Populating templates with dynamic dataReusing previously created components in new email templatesDisplaying or hiding certain components in the template based on real dataVarious preview modes and sending test emailsManaging component editing permissionsThe new feature was very well received by the ticketing partners, leading to increased satisfaction and a stronger commitment to InterTicket's services.

This project is a great example of how we provide innovative and user-friendly solutions that optimize workflows and improve communication efficiency, thereby giving our clients a competitive edge.