Genasys Unify (SaaS)
UI/UX Design: Product Development
Project overview
Genasys is a modular, cloud-based insurance solution for insurers, MGAs and brokers, with the features and flexibility to run and grow a modern business. This project included moving over existing Bootstrap mvc platform over to Angular ng framework, also pulling in functionality from the legacy desktop software.
My role
My role was UX/UI Designer. This included improving usability, developing and implementing a tokenised Design System that allowed for client theming, investigating and adhering to WCAG guidelines. The product was moving over from a Bootstrap framework to an Angular dev environment, also pulling in functionality from a legacy Delphi desktop product.
Design process
I performed the following tasks:
1. Design and development of Design System
2. Low and High fidelity wireframe and design
3. Prototyping with Figma to supply design to development teams
Design & development toolkit
In the rapidly evolving landscape of SaaS development, staying ahead of the curve requires continuous adaptation and innovation. This project involved transitioning an existing product from a Bootstrap MVC framework to an Angular-based development environment. The primary goal was to leverage Angular’s robust features to enhance user experience, improve performance, and streamline the development process.
Before
The largest part of functionality still existed in legacy desktop software.
After
Moving to Angular, aiming to create a more dynamic, and scalable modular SaaS application. Angular’s component-based architecture and powerful data binding capabilities enabled us to build a more maintainable codebase and deliver a superior user interface.
Design and Development of Design System
Moving from no formalised UI identity over to a fully detailed Design System including Digital Corporate Identity, re-usable components as well as best practice documentation.
Typography – Text styles ensuring consistency and clarity across the interface.
Colour – Sets of system colour styles.
Buttons – Complete sets of buttons including styles of interaction states.
Design – Low Fidelity
Using low fidelity wireframes to liaise with Architecture and Developers to build and document user flows and functionality.
Design – High Fidelity
Using high fidelity wireframes to hand over user flows and clickable prototypes to developers.
Implementation & evaluation
Genasys Unify is a modular, scalable system and continues to be in development and refinement.