About Quin
Quin
Objective
Our mission was to re-design the application into a scalable, intuitive, and visually engaging app that makes financial management fun and easy.
In-house at: Quin, Amsterdam, The Netherlands
My role: Product Designer
Deliverables: Design System: Goals & vision definitions, token system, styleguide, component and pattern libraries for web and mobile
In collaboration with: My great colleagues, designers and developers at Quin.
Initial audit
What’s going on here?
Why
When I joned, we were facing some common challenges as a team that were slowing us down and causing inconsistencies across our products. Without a unified design system, our UI often became a mix of mismatched elements, with each team building things slightly differently. This lack of consistency made scaling a real headache, especially as the team grew and new features were added. We needed a design system to provide a set of reusable components that kept everything cohesive. For example, our brand identity often felt inconsistent, with different teams using various templates. The goal of the design system was to fix that by locking in our core elements—colors, fonts, layouts—so everything felt cohesive and on-brand.
Accessibility, which sometimes got overlooked, became a priority with built-in standards to ensure everyone could use our products. Prototyping also got faster with a library of ready-to-use assets, making experimentation easier.
Beyond design, the system also helped create a common language, smoothing out collaboration between designers, developers, and product teams—no more constant back-and-forth miscommunications. It also helped to reduce tech debt by keeping our codebase organized.
UI Sketching
After completing the style guide and initial groundwork, a significant part of the process involved UI sketching. During this phase, we explored various approaches to address our interface challenges.
Deliverables
In a collaborative fashion, we enhanced the user interface, ensuring users could easily access data, upload receipts, and keep records up-to-date. We revamped data visualization and navigation structures, making it easier for users to understand the numbers and gain insights quickly, providing the user with efficiency, clarity, and control.
Perhaps the toughest part in setting the visual tone, was blending Yuki’s bright and playful brand vibe with the serious nature of an accounting tool. The bold colours felt a bit out of place for something so professional. We had to make sure these lively touches added to the app’s credibility rather than taking away from it.
Through much exploration, we figured out how to apply the vibrant colors frugally by using them to highlight key features, graphic elements, and navigation items, creating a clean and professional interface while incorporating the brand’s colourful identity.
One major challenges was optimizing data-heavy content for small screens. The task involved balancing the need to display complex financial information with maintaining a clean, user-friendly interface. To achieve this, we focused on prioritizing essential data, and incorporating responsive design principles and sense-making flows. This allowed users to access detailed insights without overwhelming them, ensuring the app remained intuitive and efficient on mobile devices.
Financial overview
Another big challenge was making financial graphs and sheets that looked good and made sense on a mobile screen. We had to think hard about how to show data clearly on smaller screens. The goal was to simplify the graphs and avoid information overload without losing important info, so they were easy to read at a glance. This took a lot of trial and error and feedback from users to get it just right.
Finally, to support the user in finding the right document fast, the UX was enhanced with features that allowed the user to quickly find invoices and related documents using search or date filters. Additionally, we integrated a upload flow, enabling users to easily upload invoices and receipts by either taking a photo with their phone or selecting files from their device, ensuring that all documents are securely stored and easily accessible.
Take-away
Working on the re-design of the Yuki accounting platform was a wild ride—both fun and tricky. We wanted to build an app that’s scalable, super easy to use, and nice to look at, making financial management simple. The tricky part here was blending Yuki’s bright and playful vibe with the serious nature of an accounting tool. Those bold colors felt a bit out of place for something so professional. We had to make sure these lively touches added to the app’s credibility rather than taking away from it. After loads of testing, we figured out how to use the vibrant colors to highlight key features and guide users, making the interface friendly and inviting.
Another significant challenge was designing financial graphs that were both accurate and readable on a mobile phone. It required careful consideration of how data is displayed on smaller screens. We focused on simplifying the graphs without losing essential information, ensuring they remained clear and informative at a glance. This process involved multiple iterations and user feedback to achieve the right balance between detail and readability.
This project taught me a lot about balancing a brand’s identity with practical functionality. It was really satisfying to see how thoughtful design can turn financial management from a boring task into a fun experience. In the end, our re-design made Yuki a powerful yet enjoyable tool for its users. But most importantly, I also learned just how crucial a solid design system is when working with an enterprise product. Crafting a set of unified design principles made everything smoother and kept the app looking sharp. Juggling multiple teams at once taught me the importance of clear communication and staying organized. This experience really showed me how to balance different priorities and perspectives to create a cohesive and effective product.
