Visual
Interface
Design.

De Boekenzoeker

Stained Glass Stories Wireframes

Assignment Description.

The city of Amsterdam aims to make it easy for high school students to find reading books in the library. To achieve this, the library has introduced a kiosk setop to help with this task. I was tasked with designing an interface for this kiosk, which should be largely inspired by the city's branding, but could be adapted to the needs of the target group and specific context.

My part.

The "Boekenzoeker" (Book Finder) is an individual project of eight weeks, so I had full responsibility for the entire workflow, starting from designing wireframes to the creation of the high-fidelity design flow, the UX and UI, but also the protoyping process. I had some feedback from teachers helping me further too.

Stained Glass Stories Wireframes

Creating the interface foundation with wireframes.

In the initial phase of this project, I began . My primary focus was on designing the screen layout. Since the kiosk is located at the entrance of the library, where people are constantly walking by, I found it essential to consider the time and environmental context of the users. As a result, I used clear color contrast and a "one primary action per screen” approach, ensuring that the interface is easily operable in such a specific situation, thus enhancing usability. I drew inspiration for the design from physical bookshelves, with the four vertical blocks symbolizing how books are arranged in a shelf.

Visual interface design.
Visual interface design.

Designing a modern and bold identity.

I started by experimenting with different design styles to explore which one would resonate best with the target audience while aligning with the city of Amsterdam's branding. During my style research for this target group, I discovered that "modern" is currently a key trend, especially when looking at design styles of brands like Apple. Another trend I noticed among the audience was the preference for bold, eye-catching designs, which are often seen in concert and festival posters.

Applying design style and refining user experience.

After merging the design styles, I began applying the style across all pages of the app to create a consistent experience. During this phase, I also focused on enhancing the user experience because, through testing, I identified areas for improvement. I wanted to keep the design simple and not overwhelm the user with too many steps or filters, aiming to reduce cognitive load.

Visual interface design.

Prototyping and adding micro-animations

With the design style applied to all the app screens, it was time to make the prototype interactive. I connected all the pages and ensured that every interactive element was clickable with corresponding states. Additionally, a personal learning goal for me was to incorporate micro-animations into the app, with the intention of positively influencing the user experience. I made extensive use of these animations in the design. They support the user's actions and contribute to a pleasant, engaging experience.

Visual interface design.

Final result:

The "Boekenzoeker" (Book Finder) is an interactive experience that actively helps high school students find a suitable reading book. The modern and bold design fits well with the age group and engages the students in the search process. Smooth micro-animations assist in making choices and keep the target group engaged. The "Boekenzoeker" is a comprehensive visual solution that takes into account the time and environmental context of high school students, offering the city of Amsterdam a way to inspire students to become excited about reading books.

Visual interface design.