Home
Work
Studio
Services
Blog
Contact
Design

Revamping Znuny: How we redesigned an Open Source platform to scale (Part 1)

Several circles around two arrows pointing outwards in different directions.

Ten years in the game is a big deal, no doubt. But let's face it, in the ever-changing tech world, even the coolest platforms need a facelift now and then. Znuny, recognized as an open-source ticketing platform of distinction, approached our design studio with a strategic initiative. The goal was to make it more user-friendly, add a touch of modern flair, adapting the code to fit the new style and structure. Challenge accepted.

Who is Znuny?

In the year 2020, Martin Edenhofer's creation, Znuny, assumed responsibility for the discontinued OTRS Project. Supported by open-source contributors and the backing of Znuny GmbH, it became the go-to ticket management solution across diverse sectors (such as Helpdesk, Product Support and IT Service)

Unveiling the Challenge

Revamping an old platform it’s about preserving essential elements while introducing contemporary nuances. Znuny needed a makeover, but we had to tread lightly. Our goal was to bring it into the now without giving its loyal users a shock.

Crafting the Solution - Our Strategy

We kicked off with some extensive workshops with the Znuny team. This helped us define the project scope, set our priorities, and establish the desired UI look. We began by identifying the users pain points and frustrations by gathering user feedback and doing research. This informed us about which screens to focus on, that would have a bigger impact for the user experience.

Discovery

We kicked off with some extensive workshops with the Znuny team. This helped us define the project scope, set our priorities, and establish the desired UI look. We began by identifying the users pain points and frustrations by gathering user feedback and doing research. This informed us about which screens to focus on, that would have a bigger impact for the user experience.


Define

We mapped out the main screens in order to be more efficient and work on areas that really matter and broke down the platform into bite-sized milestones,

These selected screens had a bit impact on UX, so we collaborated with the Znuny team every step of the way to better understand the need to improve some of the flows to enhance the user experience and solve the structural problems.


Design

Starting off with some top level screens, we worked on the UI, creating the first visual approach to the new version of the platform. This quickly grew in number, and so did the small design system that became an important asset for the redesign and structure of the design files.

“Quality is not negotiable"


Delivery

Redefining the user experience for an old platform is a task on its own. Tackling the code to mold into the new style had the same, if not bigger, weight on this project. The development team gathered all the technical requirements, understood the current structure of the code and infrastructure and set a clear goal.

A close collaboration with the Front-end and Backend team was critical to ensure the maximum quality and efficiency of our output.

The Transformative Results

Fast forward, and what do you get? A platform that not only boasts a refreshed visual identity but also operates seamlessly. By putting users at the forefront of our redesign strategy, together with the optimization of the code for future scalability and design system, we went above and beyond Znuny's expectations.

Pedro says “Every time I work on a project I think, am I building a bucket to bring water or am I building a pipeline?”. With Znuny, it was obvious from the get go that we would need the latter and a process to accommodate all the design and coding needs.

Evolving Beyond Project Completion

It’s always a wise decision to invest on the future, specially when you own a product.

During our collaborative journey with Znuny, it extended beyond delivering a refined platform. We instilled a mindset — a commitment to continuous improvement, adaptability, and sustained scalability. So a crucial piece of the puzzle was the connection between the design files, the design system and code, building an ecosystem to prepare Znuny for the future.

We set up a system that made updating repeated components in our product a walk in the park. Since they are all connected, once we nailed the main screens of the app, 80% of the rest of the screens were already solved. The design system was the engine of this transformation. Hours creating a detailed and solid atomic system, was an investment that paid off handsomely. It simplified the process and we got compounding results from the efforts.


Design Optimizing the Code

This design system smoothly blended with our code, creating a seamless flow for continuous improvements. It's like we built a superhighway for enhancements, making everything run efficiently.

With our fresh approach, the final hurdle was upgrading the code. However, the new design introduced some conflicts that made changing it a bit tricky. Instead of refracturing the entire codebase, we created an infrastructure for CSS utilizing Variables (SASS). We incorporated Flexbox while simultaneously cleaning up the old code, and coding the new components.

Lessons Learned

The Znuny project wasn't just a job; it unfolded as a transformative journey. Merging design expertise with strategic development produced a platform that not only underwent a face-lift but also set a new standard for tackling major projects. Znuny stands as more than a redesign; it's our story of evolution, teamwork, and a relentless pursuit of excellence.

“You do not rise to the level of your goals; you fall to the level of your systems."

— James Clear

Our journey with Znuny ingrained a fundamental principle: believe in the process and invest in building solid systems that go beyond the project delivery.  It's about laying a sturdy foundation, fostering a healthy and sustainable growth path. This philosophy drove our approach as we envisioned becoming the trusted copilot for our clients.

We aim to be right there beside our clients, not just during the project but beyond. Our mission is to assist clients in steering their product journey. We want them to feel like they have the wheel, in control and ready to shift gears. We position ourselves on the right side, navigating through the process, offering guidance, and empowering them to make the most informed decisions possible.

This mindset extends beyond mere project success; it's about building lasting partnerships grounded in collaboration, transparency, and ensuring our clients feel like the true captains of their ship.

Read NExt
Elevating User Experience: How we redesigned an Open Source platform to scale (Part 2)
Development
Elevating User Experience: How we redesigned an Open Source platform to scale (Part 2)
UX as the secret for better AI Product Integration Success
Technology
UX as the secret for better AI Product Integration Success
Design and Development Studio

Founders mindset

Our secret to success is to work on each project as if we were the founders.

Impactful and inspiring work

Good is not enough for us, we work to create a design that makes a difference.

Scalable foundation

Our approach is simple, it needs to be scalable to help you grow in the future.
Know us
Black and white picture of design studio interior with Forwwward's Co-founders sitting by a desk.
Black arrow pointing to the right.
Enter