Back to projects

Smart Makers Delft

UX Design · 2021

Smart Makers Delft platform mockup on a laptop, with logo and Gemeente Delft branding
Context
Group Project
Institution
The Hague University of Applied Sciences
Client
Gemeente Delft
Project Type
UX Design · Website Design
Project Year
2021

Project Overview

Smart Makers Delft is a platform designed to connect, inspire, and empower the community of makers in Delft – from skilled craftspeople to digital innovators.

Developed as part of an interaction design course at the Hague University, the project was commissioned by Gemeente Delft and aimed to design a digital platform, where makers of all ages and backgrounds can learn, collaborate, and grow together. The initiative seeks to bridge social divides between different educational and professional backgrounds – celebrating the value of hands-on craftsmanship alongside academic and digital expertise.

Over the course of 14 weeks, our team worked in an agile, Scrum-based process – ideating, iterating, and prototyping a solution that embodies inclusivity, collaboration, and community identity. The final outcomes included a design direction, low- and high-fidelity prototypes, and user journeys and stories that together visualize how the Smart Makers community could connect and grow.

View Prototype

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.

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. 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

1

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.

Design direction slide outlining the Digital Platform, Creative Environment, and Playfulness pillars

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".

2

Competitor Analysis

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.

3

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.

Vision board outlining the project's vision, target group, product, needs, and business goals

Ideation

1

Personas & User Journeys

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
2

Concept Creation

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.

Sketch concepts for avatar making, achievement badges, and a mouse cursor add-on gamification feature
3

Main Features

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

1

Low-Fidelity Wireframes

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.

Low-fidelity wireframes for the discovery grid, project detail page, and upload form
2

Style Guide & Style Demo

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.

Smart Makers Delft style guide showing the color palette, typography, and blob entity illustrations Style demo page applying the Smart Makers Delft brand colors, typography, and blob illustrations to sample content
3

Master Components

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.

Master component sheet covering icons, buttons, tags, toggles, chat fields, and the filter system
4

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.

High-fidelity Smart Makers Delft screens including onboarding, login, sign up, home feed, profile, and workshop content

Try it yourself!

View Prototype