Azion Console

Edge platform to build, secure, and scale applications anywhere

What is Azion Console?

Azion's Edge Computing Platform enables developers to write and deploy serverless applications, create zero trust security architectures, improve their content delivery experience, and build innovative IoT use cases.  

Azion’s Edge Computing Platform allows both developers and service providers to improve performance and security while saving more than 70% compared to legacy solutions.

My Role

Product and UI Designer
1

Definition and Evaluation of Design Stack

2

Prototype all Azion API Features in the UI

3

Iterate and refine user flows with internal and external clients

4

Integrate Design with Delivery Process

5

Create and Build libraries with Figma for Azion

Challenges

In the world of edge computing, Azion is leading the way, innovating and facing challenges with determination. We understand that in order to maintain this leadership, it is essential to continually evolve, especially in relation to the user interface (UI) of our products. They are innovative by nature, but we recognize the opportunity to improve our interface, making it more unified, easier to develop and use, which reflects our commitment to excellence and usability.

Through innovation, we’ve taken our challenges as an opportunity to streamline our development process. Challenges like extended software cycles and interface inconsistencies have fueled our commitment to enhancing efficiency and ensuring seamless user experiences..

1

Establish clear usage definitions for interface elements.

2

Achieve a uniform user interface and experience across the platform.

3

Minimize the learning curve for understanding our products.

4

Expedite interface delivery timelines.

5

Streamline validation efforts for deliverables.

6

Facilitate direct and replicable test processes.

Team Structure

CEO
Design Director
Developer Experience Director
Design Manager
Software Engineering Manager
Product Designers
Writers
Research
Software Engineers

Final Outcome

Figma, PrimeVue, and Tailwind CSS combined to create the most productive Design-to-Code workflow.

We decided to abandon the existing design system, recognizing its limitations in supporting an already established interface. Then, we opted to adopt a popular component library from the market. We sought an open-source library that was easy to use, with clear documentation and community support. It had to fit well with our brand and be something that both software developers and business partners would appreciate.

During our exploration phase, we tried out technologies like React and even delved into AI and Low-Code tools to speed up our development process. Alongside using open-source libraries like PrimeVue, Flowbite, Primer, and Carbon Design System, we assessed how AI could fit into our workflow.

So, we bring to our design stack the assets from Tailwind CSS and PrimeVue and apply deep customization using SASS and Figma Variables. With this approach, it was possible to mirror the code in our Design Tool and create a bundle that meets the company's expectations.

The adoption of our UI Kit has already showcased several positive outcomes:

Consistent interface and experience between products.

As we progressed, we carefully outlined how our products would be used, with designers and software developers working closely to match the interface with what our stakeholders envisioned. Through weekly meetings, we realized that having a set of basic building blocks would be helpful for our teams going forward, as it would promote uniformity across our platform.

New and modern Dark Mode for all Azion products

Throughout the entire process of mirroring the Code to Design stack, we made significant enhancements to the licensing of the PrimeVue Figma document, including the replication of all available tokens into a variable scheme within our Design tool.

You can learn more about this topic by accessing the official GitHub repository of the themes available for PrimeVue. In the project, we built the Azion Theme in two modes for our users.

New interactions and features

With these changes, we've unlocked new possibilities for the platform, including a global search for resources and documentation. Additionally, we've effectively reduced the development cost of assembling real product features by no longer focusing on developing primitive components. Instead, we're consolidating them into larger blocks of reusable code across the platform.

An Open Initiative

The Azion Console Kit is a front-end software development toolkit we’ve developed to make using the Azion Edge Computing Platform easier and better for our users.

At the heart of the Azion Console is the Azion public API, or Application Programming Interface. This kit follows modern software practices and a headless architecture. It’s all about being open source and working seamlessly with the Azion REST API, which has its own API specification and can also connect with other remote APIs. We’re sharing the source code of the new Azion Console as part of our effort to help our business partners strengthen their connection with Azion.

Conclusion

Azion embarked on a journey to revamp its interface, making strategic decisions and adopting a fresh approach to our technology.

By creating our own UI blocks and sharing the Azion Console Kit with the community, we’re not only tackling present software development challenges but also laying the groundwork for a more collaborative and efficient future in Edge Computing.

In essence, Azion’s interface overhaul wasn’t just a project: it was a bold move to redefine the future of our product development and user experience.

Thanks for visiting

This project lasted approximately 7 months and is currently being continued by Azion.