Challenge
How might we create a platform that connects Delft’s diverse maker community – from craftspeople to digital innovators – while promoting equal recognition for every form of skill and expertise?
The Gemeente Delft sought a solution that goes beyond connection: a design that fosters mutual respect, encourages collaboration, and learning across generations and educational backgrounds. Our challenge was to translate this social ambition into a cohesive digital experience and visual identity that embodies inclusivity and pride in making.
Role
In this project, I contributed primarily to the wireframes and the high-fidelity prototype, taking responsibility for translating the team’s collective ideas into clear, visually consistent designs. I naturally gravitated toward visual precision, ensuring alignment, spacing, and detail were refined – a role my teammates often referred to as the group’s “pixel perfectionist.”
Having worked with Scrum before, I adapted quickly to the workflow and occasionally stepped in to coordinate stand-ups and team meetings when structure was needed. While I don’t naturally seek leadership roles, this experience highlighted the importance of defined responsibilities and communication within collaborative design processes. It also reaffirmed that I perform best when I can focus deeply on design execution and craft, contributing through clarity and attention to detail.
Process
The project followed an 14-week, agile, Scrum-based approach, moving from strategic planning to final prototyping in iterative cycles of research, ideation, and design. Here is a quick overview of the key stages behind the Smart Makers Delft design process.
Research
Project Planning & Alignment
We began with a project planning and alignment phase, conducting a strategic intake with product owners from Gemeente Delft to clarify the project’s scope, goals, and constraints. Through these discussions, we aligned on what defines a “Smart Maker” and identified key design considerations such as inclusivity, playfulness, and addressing social and gender stigmas. This alignment established a clear foundation for our research focus and guided the direction of the project.
The image below shows our initial design direction derived from the stakeholder alignment.
Definition: Smart Maker
A Smart Maker is someone who actively makes projects – by creating, experimenting, learning, sharing and collaborating with others. It can be anything from physical to digital. The goal of the Gemeente Delft is to encourage Smart Making to push the image of Delft as a "Smart City".
We explored educational offerings at schools and universities in Delft to better understand what being a “Smart Maker” entails in practice. We examined education paths and job types relevant to making and creating, then synthesized this information into a set of core categories. These categories informed the platform’s filtering and matching system, helping users connect based on shared skills, interests, and learning goals.
In parallel, we conducted a competitor analysis to understand how existing platforms support learning, motivation, and community building. Platforms such as diy.org, Skillshare, and Codecademy were analyzed for their use of gamification, challenges, project sharing, and learning content. Additional inspiration was drawn from networking and inspiration platforms like LinkedIn, Facebook, Pinterest, and ArtStation to explore how users connect, showcase work, and discover ideas. Insights from this analysis informed features such as project-based challenges, learning resources, and gamified elements to support an engaging maker ecosystem.
Vision & Design Direction
Based on insights from stakeholder alignment and competitor research, we synthesized our findings into a clear product vision and design direction. This ensured a shared understanding of the platform’s purpose, target users, and goals before moving into ideation.
Ideation
Personas and user journeys were created to translate research insights into concrete user perspectives and guide design decisions. They helped align the team around user needs, expectations, and key moments in the experience. A detailed overview is available in the linked Miro board for further exploration.
View Miro Board
Concept creation focused on translating ideas into tangible solutions through sketching. By visualizing features and interactions early, we were able to iterate quickly, explore alternatives, and communicate design intent clearly. These sketches also reflect a consistent way of working that is present across my other projects.
Based on the defined personas, user journeys, and concept exploration, we identified the platform’s core features needed to support Smart Makers throughout their journey. These features are designed to enable discovery, connection, and collaboration, and form the foundation for the subsequent prototyping phase.
Key Features:
- Profile Creation and Discovery
- Connecting with other Smart Makers
- Event Creation
- Community Aspect
- In-App Chat and Notifications
Prototype
Low-fidelity wireframes were created to explore the overall structure, key user flows, and feature placement early in the design process. At this stage, the focus was on functionality and usability rather than visual details, allowing for quick iteration and validation of core ideas. The wireframes shown here represent a selection of the larger set created during this phase.
Based on the defined vision and design direction, we created a style guide to establish a cohesive visual language for Smart Makers Delft. The accompanying style demo illustrates how colors, typography, and UI components come together to support a playful and engaging user experience.
To support consistency and scalability across the interface, we developed a master component sheet defining reusable UI elements and their key states. This system enabled efficient design iteration and ensured visual and functional coherence throughout the high-fidelity prototype.
The high-fidelity prototype presents a polished representation of the Smart Makers Delft platform, demonstrating how users can create profiles, connect with others and learning more skills.
The screens below showcase some of the final screens, while the full prototype can be explored via the link below.
Try it yourself!
View Prototype
.png)
.png)
