Yuki an accounting software company based in the Netherlands (HQ), Belgium and Spain that offers accounting tools and services through a self learning, full automatic software available on both desktop and mobile. I joined Yuki together with a couple of UX designers during an ambitious code migration project. Our mission was to bring the UI and UX to the next level and, while doing so, create a design system from ground up using an atomic design approach.
As the UI designer in the team, I was mainly responsible for the visual aspects of the design (i.e. core styles, component designs and layout templates) including the structure and documentation of these libraries. Initially, my role was to design a new UI concept from scratch – from moodboarding to high-fi prototyping – taking into consideration business goals, existing brand, user needs, operating systems, and technical innovations and limitations. This work meant a redesign of every component in the platform, merging and cleaning out styles and clutter, defining new colors, introducing new typefaces, iconography and UI illustrations with focus on clarity, consistency and accessibility. Moving forward, I was responsible for the maintenance of the core libraries, the quality of the visuals and the creation of new components and assets as well as improvement of existing ones.
Deliverables included a Styleguide (global), UI component libraries (desktop and mobile), screen templates and responsive page designs, continuously improved and iterated along with stakeholder input and user feedback. The work was performed in close collaboration with UX and UI designers, product owners, developers and managers.
The showcase below highlights components made for desktop, touching down at some of the key komponents that make up the majority of the platform, and where I was directly involved.
Company: Visma | Yuki, Rotterdam Netherlands
My role: UI designer
Deliverables: UI concept, styleguide, UI component library, screen templates and page design for desktop and mobile.
In collaboration with: Merve Orhan, Brianna Cohens, Wei Lun Chen, Marian Vijverberg and Kim Strigl.Assisting: Product owners and development team.
Audit
Inventory of existing components, brand elements, styles and assets in order to outline the project and to understand the scope.
Understanding the user
Embracing the brand
Sketching
Design system
Styleguide
Typography
Font styles
Colors
Brand surfaces
Used as fill in icons and other graphic elements to emphasise the brand.
Document type icons
Navigation
Data list tables