Digital wireframing, low and high-fidelity prototyping
Team:
Kawe Ebadi, Lena Bühn, Benedikt Breuer, Lorenzo Bolognini, Alexey Raber, Franziska Fritz, Maria Hoffmann, Franziska Krug, Jakob Neubauer, Alina Stöcker, Nadine Whyler
01 Overview
SAM is a digital platform that enables non-profit organizations to efficiently exchange, request, and manage relief supplies. The platform centralizes listings, requests, communication, and logistics coordination, helping aid organizations collaborate more effectively across locations and teams.
Keeps requests, items, and conversations clearly connected
Supports collaboration between multiple organizations
Reduces cognitive load in high-pressure situations
The interface must prioritize clarity, structure, and trust over visual complexity.
03 Research Insights
Research included stakeholder interviews with aid coordinators, workflow analysis, and internal discussions to understand how requests, listings, and communication currently interact.
Users need to immediately understand which request belongs to which item
Chat communication must always retain clear context
Users require visibility into request status and responsibilities
Overly flexible systems create confusion instead of efficiency
Key takeaway
It is very important that humanitarian coordination tools have a clear structure and predictable ways of working, because misunderstandings can directly affect how well they work and how quickly they can respond.
The information architecture was designed to keep navigation predictable and reduce cognitive load.
Key flows such as listings, requests, chats, and saved items were restructured to ensure users always know
Where a request originated
Which items are involved
What actions are available at each step
Calm & Minimal UI
Multiple communication models were explored and tested conceptually to identify the most scalable and understandable structure for SAM’s request system
05 UI Design
The UI design focuses on clarity and functional hierarchy.
Key design decisions include:
Clear separation between listings, requests, and chats
Persistent contextual information in conversations
Structured layouts optimized for scanning and decision-making
Wireframes were iteratively refined and later translated into high-fidelity web designs aligned with the platform’s overall design system.
06 Design System & Components
A consistent design system was established to ensure usability, scalability, and clarity across the web platform.
A clear color hierarchy for status and actions
Accessible typography optimized for dense information
A comprehensive icon set for navigation and actions
This consistency enables users to orient themselves quickly, even within complex and multi-layered workflows
07 Challenges & Learnings
This project involved a lot of different people, different tasks happening at the same time, and requirements changing over time. This meant that we had to keep checking and deciding what was most important.
Key learnings
More features do not equal better usability
Early focus on core workflows prevents later complexity
Clear ownership and structure are crucial in multi-team environments
The platform was reduced to its fundamental workflows, which resulted in enhanced clarity, efficiency, and overall usability
08Outcome & Impact
Clear and traceable request-to-item relationships
Improved coordination and transparency between organizations
Reduced communication overhead through contextual workflows
SAM enables aid organizations to focus on delivering aid efficiently instead of spending time navigating complex coordination tools.
Thanks for Reading
want to see more projects or discuss this case study