top of page
madrid abroad
the challenge
International students face major hurdles when adjusting to a new city—navigating transit, dealing with formalities, and handling everyday tasks like shopping. Our challenge was to create a digital solution that makes this transition easier and more intuitive.
the
IDEA
We designed “Madrid Abroad”—a user-friendly web app that supports international students by simplifying transportation, explaining official procedures, and helping them find and buy everyday items. The solution was developed collaboratively as part of a university project.
the
Process
Our process began with surveys and interviews to understand student pain points. We identified three priority areas and mapped out workflows. Based on user input, we created wireframes and tested prototypes, iterating to improve usability and flow.
Discovery phase
Through interviews and observations, we uncovered key challenges international students face when settling in Madrid. Using personas, card sorting, and task models, we explored how they approach daily tasks and structured the app to match their mental models. We also considered the physical, technological, and social context to ensure the design fits real-world use.
User profile
Based on interviews with international students in Madrid, the profile highlights common needs like finding housing, using transport, and handling local formalities. Most users were independent, experienced students adjusting to a new city and system.
Personas
Three personas were developed to reflect different types of international students, each with unique motivations, behaviors, and challenges. These helped guide design decisions by keeping diverse user needs at the center of the process.
Card sorting technique
We used card sorting to group tasks mentioned during interviews — such as renting a flat, getting a SIM card, and using public transport. This informed the content structure by aligning with how students naturally categorize their priorities.
Task Organization model
The Task Organization Model outlines the key steps students go through when settling into Madrid. It helped define the app’s navigation and flow by mapping real user routines and decision points.
Design phase
In the design phase, we turned our insights into real interfaces. We used navigation maps to define flows, then designed clean layouts prioritizing clarity. Feedback loops with users helped us refine the prototypes. Every screen was crafted to reduce stress and support independence.
Navigation map
We structured the content based on user tasks to create an intuitive navigation. Each section flows from the homepage to core features like transport, accommodation, and purchases, ensuring easy access and logical grouping of actions.
Layouts
We created layout wireframes that emphasized clarity and user priorities. Key sections and filters are prominently displayed to reduce confusion and help users complete tasks efficiently.
Lo-Fi prototypes
Initial low-fidelity wireframes helped us test basic interactions and structure early on. These sketches ensured that core functionalities aligned with user needs before refining visual design.
Hi-Fi prototypes
High-fidelity prototypes brought the final design to life, combining real content, color, and typography. These mockups were tested with users for usability, allowing us to fine-tune interface elements and interactions.
Design decisions
We followed Material Design principles and drew visual inspiration from the city of Madrid. A red, black, and white palette reflects local identity. We used Underground NF for a classic feel and Roboto for modern clarity. Layouts were kept clean and intuitive, with flat icons and ample white space to reduce visual noise.
bottom of page