Zoek een boek! - Gemeente Amsterdam

A visual interface for helping young readers discover books

Year2022
RoleUI/UX Design · Visual Interface Design
StackAdobe XD · Adobe Creative Cloud ·
ClientAmsterdam University of Applied Sciences
Duration4-6 weeks
Live—

06 2022

MOBILE APPLICATION — VISUALS

Zoek een boek! - Gemeente AmsterdamMobile applicationAmsterdam University of Applied SciencesUI/UX Design + Visual Interface DesignA note to self2022

Introduction

This project challenged me to design a tablet application for the Municipality of Amsterdam that helps secondary school students discover books in Amsterdam’s public libraries. My focus wasn’t just on creating polished screens, but on understanding how visual interface design influences the overall user experience. I started by learning the fundamentals of interface design, then gradually worked from wireframes to a complete visual system that made searching, saving and sharing books feel clear and approachable.

01 /Principles

Before opening Adobe XD, I spent time learning the principles behind good interface design. Throughout the course I created sketch notes on topics like visual hierarchy, typography, progressive disclosure and keeping users in control. Rather than treating them as theory, I used them as a checklist while designing the application. This part of the project helped me understand that good interfaces aren’t just visually appealing. Every design decision should help users understand where they are, what they can do next and how to complete their goal.

02 /Wireframes

The interface started as a series of low-fidelity wireframes focused on the overall layout, navigation and user flow. Before moving into visual design, I annotated each screen to explain my design decisions and evaluate the hierarchy, spacing and interactions. Once the flow felt right, I started refining how information was presented on each screen. I first focused on creating a clear visual hierarchy that naturally guides users through the interface, instead of jumping straight into colours and styling. The filter panel is a example of this. By using typography, spacing and grouping, I created a layout that’s easy to scan and makes it clear where to start, which options belong together and how to complete the task. Small changes like these helped make the interface feel more intuitive before moving into the final visual design.

Example of the filter wireframes from beginning to end

03 /Visual Identity

With the structure in place, I started building the visual identity of the application. I created a colour palette, selected typography, designed reusable components and experimented with different UI elements that could be used consistently throughout the interface. Since the target audience was secondary school students, I wanted the design to feel modern, playful and approachable while still keeping the focus on the books. I also paid attention to spacing, contrast and consistency to make the interface feel cohesive across every screen.

04 /Iterations

In this stage I experimented with different visual styles before choosing a final direction. I created several alternative concepts, including different colour palettes and both light and dark themes, to see how each version changed the overall feeling of the application. This helped me understand that the same interface can communicate a completely different personality depending on the visual choices. Comparing multiple directions also made it easier to decide which style best suited the target audience.

Alternating styles that vary between light and dark mode

05 /Final interface

The final design brings everything together from the previous iterations into a clean and consistent tablet experience. After answering a few simple questions, users receive a personalised selection of books that matches their interests and reading level. From there, they can browse detailed book information, save titles to a personal reading list and manage that list before either printing it or sending it to their email. This allows students to easily find their selected books when visiting one of Amsterdam’s public libraries. Throughout the interface, the focus stays on maintaining a consistent visual language with reusable components, clear typography and thoughtful spacing, making the experience feel approachable and easy to navigate from start to finish.

Walkthrough of the final prototype

Conclusion

This project helped me develop a good understanding of visual interface design. By starting with design principles, refining the user flow through wireframes and gradually building a complete design system, I learned that strong interfaces are the result of many small design decisions working together. This project also reinforced the importance of creating interfaces that are clear, consistent and easy to navigate. These are principles I try still apply in every project I work on today.

Keep poking aroundSee everything ↗

← PREVIOUS

05 · Responsive multi device app

Salut

2022