work /

Yuki Software

UI design concept, design system, component library

Yuki | Software

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

visual-language-moodboard.jpg
 

 

Design system

design-system-structure.png

 

Styleguide

empty.png

Typography

typography-typeface.png
 
pages-output.jpg

Font styles

font-mobile.png
font-desktop.png
 
font-spacing.png

Colors

color.png
color-signal.png

Brand surfaces

Used as fill in icons and other graphic elements to emphasise the brand.

color-texture-main.png
 
 
color-texture.png
icons.png
 

Document type icons

 
 
 
label-custom icons.png
empty.png
component-library.png
empty.png

Navigation

navigation-components.jpg

 

empty.png

Data list tables

 
 
 

 

input fields.png
 
 
 
chart bars.png
 
Next
Next

Yuki Assistant