GasolinaToday: Mit mehr Sicherheit durch die Treibstoffknappheit GasolinaToday: Navigating Fuel Shortages with Greater Confidence
GasolinaToday ist ein App-Konzept, das Autofahrern in Venezuela hilft, verfügbaren Treibstoff zu finden, die Lage in den Warteschlangen einzuschätzen und ihre Fahrten mit mehr Sicherheit zu planen.
GasolinaToday is a mobile app concept designed to help drivers in Venezuela locate available fuel, assess queue conditions and plan their journeys with greater confidence.
In einem zweiwöchigen Ironhack-Projekt hat unser Team lokale Research in ein getestetes mobiles Erlebnis übersetzt, das GPS-basierte Tankstellensuche mit Echtzeit-Updates aus der Community verbindet.
During a two-week Ironhack project, our team translated local research into a tested mobile experience combining GPS-based station discovery with community-provided real-time updates.
- RolleRole
- UX/UI-DesignerinUX/UI Designer
- Team
- 2 UX/UI Designer · 2 Projektinitiatoren aus Venezuela2 UX/UI Designers · 2 Venezuelan Project Initiators
- ZeitraumDuration
- 2 Wochen2 Weeks
- FokusFocus
- Research-Synthese · Informationsarchitektur · Prototyping · Usability-Tests · Visual DesignResearch Synthesis · Information Architecture · Prototyping · Usability Testing · Visual Design
Die HerausforderungThe challenge
Unsicherheit vor und während der Fahrt verringernReducing uncertainty before and during the journey
Treibstoffknappheit und unvorhersehbare Warteschlangen können den alltäglichen Weg zur Tankstelle stressig und zeitraubend machen. Autofahrer kommen womöglich an, ohne zu wissen, ob es Treibstoff gibt, wie lang die Schlange ist oder ob sie ihren nächsten Termin noch pünktlich erreichen.
Fuel shortages and unpredictable queues can turn an everyday trip to a gas station into a stressful and time-consuming experience. Drivers may arrive without knowing whether fuel is available, how long the queue will be or whether they will reach their next appointment on time.
Die beiden venezolanischen Projektinitiatoren brachten die ursprüngliche Idee und Wissen aus erster Hand über den lokalen Kontext mit. Unsere Aufgabe war, diesen Kontext in ein mobiles Konzept zu übersetzen, das Autofahrern hilft, vor dem Losfahren fundiertere Entscheidungen zu treffen.
Two Venezuelan project initiators brought the initial idea and first-hand knowledge of the local context. Our challenge was to translate this context into a mobile concept that could help drivers make more informed decisions before setting out.
Ziel war nicht einfach, Wartezeiten zu verkürzen, sondern Unsicherheit zu verringern, indem relevante Informationen zu Tankstellen und Warteschlangen leichter zugänglich werden.
The goal was not simply to shorten waiting times, but to reduce uncertainty by making relevant station and queue information easier to access.
Inhaltcontent
Mein BeitragMy contribution
Die Fragen für die Umfrage habe ich mitentwickelt, rund 100 Antworten ausgewertet und die User Interviews zusammen mit dem zweiten Mitglied unseres UX/UI-Teams geführt. Persona, Journey Map, Prototypen und Usability-Tests haben wir gemeinsam erarbeitet.
I co-developed the survey questions, synthesized around 100 responses and conducted user interviews together with my UX/UI design partner. We jointly created the persona, journey map, prototypes and usability tests.
Die Informationsarchitektur habe ich eigenständig entwickelt und das Visual Design sowie das Designsystem verantwortet. Ideenfindung und Priorisierung der Features hat das gesamte Team gemeinsam übernommen.
I independently developed the information architecture and led the visual design and design system. Ideation and feature prioritization were carried out collaboratively by the full team.
Research
Die Unsicherheit hinter der Warteschlange verstehenUnderstanding the uncertainty behind the queue
Die venezolanischen Projektinitiatoren hatten schon vor Projektbeginn erste Vorarbeit geleistet. Darauf aufbauend haben wir die Fragen für die Umfrage gemeinsam entwickelt, und die Initiatoren haben die Umfrage über ihr Netzwerk in Venezuela verbreitet.
The Venezuelan project initiators had already completed initial groundwork before the project began. Building on this, we developed the survey questions collaboratively, and they distributed the survey through their network in Venezuela.
Rund 100 Menschen, die in Venezuela leben, haben teilgenommen. Im UX/UI-Team haben wir die Antworten ausgewertet, drei User Interviews geführt und ein erstes Stakeholder-Interview gehalten, gefolgt von regelmäßigem Austausch während des gesamten Projekts.
Around 100 people living in Venezuela participated. My UX/UI design partner and I synthesized the responses, conducted three user interviews and held an initial stakeholder interview followed by regular exchanges throughout the project.
Diese Kombination lieferte uns quantitative Hinweise auf wiederkehrende Herausforderungen und qualitative Einblicke, wie die Treibstoffknappheit Alltag, Entscheidungen und Stresslevel der Menschen beeinflusste.
This combination gave us quantitative indications of recurring challenges and qualitative insight into how fuel shortages affected people’s routines, decisions and stress levels.
Wichtigste Research-GrundlagenKey research inputs
- ~100
- rund 100 Antworten aus der Umfrage unter Menschen in VenezuelaSurvey responses from people living in Venezuela
- 3
- User Interviews
- 1
- erstes Stakeholder-Interview plus laufender AustauschInitial stakeholder interview plus ongoing exchanges
Was die Research gezeigt hat
What emerged from the research
- Autofahrer mussten wissen, ob eine Tankstelle geöffnet ist und Treibstoff hat, bevor sie hinfahren.
- Unvorhersehbare Warteschlangen sorgten für Frust und machten die Tagesplanung schwierig.
- Informationen zu Wartezeiten und zur Lage an den Tankstellen mussten aktuell und leicht verständlich sein.
- Informationen aus der Community konnten nützlich sein – entscheidend wären aber Vertrauen, Datenschutz und verlässliche Daten.
- Das Erlebnis sollte schnelle Entscheidungen unterstützen, ohne zusätzliche Hürden zu schaffen.
- Drivers needed to know whether a station was open and had fuel before travelling there.
- Unpredictable queues caused frustration and made everyday schedules difficult to plan.
- Information about waiting times and station conditions needed to be current and easy to understand.
- Community-generated information could be useful, but trust, privacy and data reliability would be essential.
- The experience needed to support quick decisions without creating additional friction.
Das Problem definierenDefining the problem
Research in eine klare Produktrichtung übersetzenTurning research into a focused product direction
Wir haben die Erkenntnisse in einer Persona verdichtet, die die in der Research erkannten Verhaltensweisen, Bedürfnisse und Einschränkungen abbildet. Die Persona half uns, das Konzept im Alltag der von Treibstoffknappheit betroffenen Autofahrer zu verankern.
We consolidated the findings into a persona representing the behaviours, needs and constraints identified during the research. The persona helped us keep the concept grounded in the everyday reality of drivers affected by fuel shortages.
Die Journey Map zeigte, wo Unsicherheit und Frust besonders groß waren: bei der Suche nach einer Tankstelle mit Treibstoff, bei unerwarteten Warteschlangen und bei der Sorge, sich für anstehende Termine zu verspäten.
The journey map showed where uncertainty and frustration were particularly high: searching for an available station, encountering unexpected queues and worrying about delays to upcoming appointments.
Problem Statement
„Autofahrer in Venezuela brauchen eine verlässliche Möglichkeit, die Verfügbarkeit von Treibstoff und die Lage an den Warteschlangen in ihrer Nähe einzuschätzen, bevor sie losfahren – denn unvollständige Informationen machen alltägliche Fahrten schwer planbar und erhöhen den Stress.“
“Drivers in Venezuela need a reliable way to assess nearby fuel availability and queue conditions before setting out, because incomplete information makes everyday journeys difficult to plan and increases stress.”
Ideenfindung und PriorisierungIdeation and prioritization
Lösungen rund um Information, Orientierung und Vertrauen erkundenExploring solutions around information, orientation and trust
Mit How-Might-We-Fragen, Crazy 8s und Reverse Brainstorming hat das gesamte Team die erkannten Herausforderungen in mögliche Produktfeatures übersetzt.
The full team used How Might We questions, Crazy 8s and reverse brainstorming to turn the identified challenges into possible product features.
Die Ideen reichten von praktischen Tankstelleninformationen und Routenplanung über Community-Updates und Treibstoffrechner bis zu Unterhaltung während langer Wartezeiten. Um dem Konzept eine klare Richtung zu geben, haben wir die zentrale Journey von unterstützenden und explorativen Features getrennt.
The ideas ranged from practical station information and route planning to community updates, fuel calculations and entertainment during long waits. To give the concept a clear direction, we separated the primary journey from supporting and exploratory features.
KernerlebnisCore experience
- Tankstellen in der Nähe über den aktuellen Standort finden
- Gemeldete Verfügbarkeit von Treibstoff und Lage an den Warteschlangen prüfen
- Tankstelleninformationen vor der Wahl des Ziels ansehen
- Zu einer ausgewählten Tankstelle navigieren
- Echtzeit-Updates aus der Community teilen oder abrufen
- Discover nearby gas stations using the current location
- Check reported fuel availability and queue conditions
- Review station information before choosing a destination
- Navigate to a selected gas station
- Share or access community-provided real-time updates
Unterstützende und explorative FeaturesSupporting and exploratory features
- Ein Profil mit Avatar und Vertrauenspunkten
- Ein Rechner für Treibstoffpreise und Verbrauch
- Artikel, News, Tipps und Spiele für die Wartezeit
- A profile with an avatar and trust points
- A calculator for fuel prices and consumption
- Articles, news, tips and games for time spent waiting
Das Kernerlebnis sollte vor allem eine dringende Frage beantworten: Welche Tankstelle in der Nähe ist gerade die beste Wahl?
The primary experience centred on helping users answer one urgent question: Which nearby station is currently the most suitable option?
InformationsarchitekturInformation architecture
Das Erlebnis entlang von vier Aufgabenbereichen strukturierenStructuring the experience around four task streams
Ich habe die Informationsarchitektur entwickelt, um den breiten Funktionsumfang in eine navigierbare mobile Struktur zu übersetzen.
I developed the information architecture to translate the broad feature set into a navigable mobile structure.
Das Konzept gliederte sich in vier zentrale Aufgabenbereiche:
The concept was organized around four main task streams:
- Registrierung und Onboarding
- Tankstellensuche und Routenführung
- Ein Live-Feed mit Updates aus der Community
- Ein Unterhaltungsbereich mit Artikeln, News und Spielen
- Account creation and onboarding
- Station discovery and routing
- A live feed with community updates
- An entertainment area with articles, news and games
Die Architektur schuf eine gemeinsame Grundlage für die Prototypen und half dem Team, die zentrale Tankstellensuche von nachrangigen Features zu unterscheiden.
The architecture created a shared foundation for the prototypes and helped the team distinguish the main station-finding journey from secondary features.
Prototyping
Das Interaktionsmodell über verschiedene Fidelity-Stufen erkundenExploring the interaction model across different fidelity levels
Im UX/UI-Team haben wir mehrere Low-Fidelity-Varianten erstellt und gemeinsam durchgespielt, um Screen-Strukturen, Navigationsmuster und gängige mobile Interaktionen zu vergleichen.
My UX/UI design partner and I created several low-fidelity alternatives and worked through them together to compare screen structures, navigation patterns and common mobile interactions.
Diese frühen Konzepte dienten der internen Erkundung, nicht formalen Usability-Tests. So konnten wir vielversprechende Richtungen erkennen, bevor wir Zeit in detailliertere Screens investierten.
These early concepts were used for internal exploration rather than formal usability testing. They allowed us to identify promising directions before investing in more detailed screens.
Den gewählten Ansatz haben wir anschließend in einen Mid-Fidelity-Prototyp übersetzt und mit drei Teilnehmenden getestet.
We then translated the selected approach into a mid-fidelity prototype and tested it with three participants.
Getestete Aufgaben
Tasks tested
- Das Onboarding abschließen
- Die nächstgelegene Tankstelle mit verfügbarem Treibstoff finden
- Complete the onboarding process
- Find the nearest gas station with available fuel
In den Sessions konnten wir prüfen, ob die Teilnehmenden die Navigation verstanden, interaktive Elemente erkannten und sich durch die zentrale Tankstellensuche bewegen konnten. Die Beobachtungen flossen in Verbesserungen an Navigationswegen, Icons und visueller Hierarchie ein, bevor wir die High-Fidelity-Version entwickelten.
The sessions helped us evaluate whether participants could understand the navigation, identify interactive elements and move through the central station-finding journey. The observations informed refinements to the navigation paths, iconography and visual hierarchy before we developed the high-fidelity version.
High-Fidelity-TestHigh-fidelity testing
Ein realistischeres Produkterlebnis testenTesting a more realistic product experience
Den High-Fidelity-Prototyp haben wir mit drei Teilnehmenden und denselben beiden Kernaufgaben getestet: das Onboarding abschließen und die nächstgelegene Tankstelle mit verfügbarem Treibstoff finden.
We tested the high-fidelity prototype with three participants using the same two core tasks: completing onboarding and finding the nearest station with available fuel.
Die Teilnehmenden konnten das Onboarding abschließen – das realistischere Interface brachte aber auch Bedenken ans Licht, die in früheren Phasen weniger sichtbar gewesen waren.
Participants were able to complete the onboarding process, but the more realistic interface also surfaced concerns that had not been as visible at earlier stages.
Sicherheit, Datenschutz, das Zurücksetzen des Passworts und die Vertrauenswürdigkeit des Dienstes wurden zu wichtigen Themen. Außerdem äußerten die Teilnehmenden ein neues Bedürfnis: das Preis-Leistungs-Verhältnis verschiedener Tankstellen vergleichen zu können, um beim Tanken fundiertere Entscheidungen zu treffen.
Security, privacy, password recovery and the trustworthiness of the service became important topics. Participants also expressed a new need: being able to compare the value offered by different gas stations to make more informed decisions about fuel purchases.
Diese Erkenntnisse haben wir als Prioritäten für eine künftige Iteration dokumentiert. Da das zweiwöchige Projekt nach den Tests endete, flossen sie nicht mehr in eine weitere Prototyp-Version ein.
These findings were documented as priorities for a future iteration. Because the two-week project ended after testing, they were not incorporated into another prototype version.
Den klickbaren Prototyp in Figma gibt es hier Explore the clickable prototype in Figma here
Visual Design
Ein stimmiges mobiles Designsystem gestaltenCreating a coherent mobile design system
Ich habe die visuelle Richtung und das Designsystem für GasolinaToday entwickelt und den Fokus des Produkts auf Orientierung und verlässliche Informationen in ein konsistentes Interface übersetzt.
I developed the visual direction and design system for GasolinaToday, translating the product’s focus on orientation and reliable information into a consistent interface.
Eine blaugrüne Farbpalette sollte Klarheit und Verlässlichkeit vermitteln. Die Schrift Sen bot eine zeitgemäße, gut lesbare Grundlage, während eindeutige Icons und klare Button-Stile halfen, wichtige Aktionen schnell zu erkennen.
A blue-green colour palette was chosen to communicate clarity and reliability. The Sen typeface provided a contemporary and readable foundation, while distinct icons and straightforward button styles supported quick recognition of important actions.
Das System deckte die zentralen Grundlagen für den Prototyp ab – Typografie, Farben, Icons, Buttons, Navigationsmuster und wiederkehrende Interface-Komponenten. So entstand Konsistenz über alle Screens und eine wiederverwendbare Basis für die weitere Produktentwicklung.
The system covered the central foundations required for the prototype, including typography, colours, icons, buttons, navigation patterns and recurring interface components. This created consistency across the screens and provided a reusable basis for future product development.
Logo 
TypografieTypography 
IconsEin einheitliches Icon-Set unterstützt die Wiedererkennung in Navigation, Tankstelleninformationen und Community-Features.A consistent icon set supports recognition across navigation, station information and community features. 
FarbenColoursEine blaugrüne Farbpalette und die Schrift Sen bilden die Grundlage für ein klares, zeitgemäßes Interface.The visual foundation combines a blue-green colour palette with the Sen typeface to create a clear and contemporary interface. 
Buttons: Größen & ZuständeButtons: size & state 
Buttons: VariantenButtons: variantsWiederverwendbare Buttons, Navigationsmuster und Interface-Komponenten sorgen für Konsistenz im gesamten mobilen Erlebnis.Reusable buttons, navigation patterns and interface components create consistency across the mobile experience. 
Formulare: InteraktionszuständeForms: interaction states 
Style TileStyle tile
Die Barrierefreiheit müsste noch genauer geprüft werden – insbesondere Farbkontraste, Textbeschriftungen, Touch-Flächen und die Darstellung von Komponentenzuständen.
Accessibility would require further validation, particularly regarding colour contrast, text labels, touch targets and the communication of component states.
ErgebnisOutcome
Von lokalem Wissen zu einem getesteten ProduktkonzeptFrom local insight to a tested product concept
Das Projekt mündete in ein research-basiertes High-Fidelity-App-Konzept, gestützt auf eine strukturierte Informationsarchitektur und ein wiederverwendbares visuelles System.
The project resulted in a research-based, high-fidelity mobile concept supported by a structured information architecture and a reusable visual system.
Innerhalb von zwei Wochen hat das Team:
Within two weeks, the team:
- rund 100 Antworten aus der Umfrage und drei User Interviews ausgewertet
- eine Persona, eine Journey Map und ein Problem Statement definiert
- das Produkt entlang von vier zentralen Aufgabenbereichen strukturiert
- die Kern-Journey in Mid- und High-Fidelity mit jeweils drei Teilnehmenden getestet
- einen klickbaren High-Fidelity-Prototyp erstellt
- ein konsistentes visuelles Designsystem aufgebaut
- Vertrauen, Datenschutz und verlässliche Informationen als entscheidende Anforderungen für die Weiterentwicklung erkannt
- Synthesized around 100 survey responses and three user interviews
- Defined a persona, journey map and problem statement
- Structured the product around four central task streams
- Tested the core journey at mid- and high-fidelity with three participants at each stage
- Created a clickable high-fidelity prototype
- Established a consistent visual design system
- Identified trust, privacy and information reliability as critical requirements for future development
Das Konzept wurde nach dem Projekt nicht weiterentwickelt oder veröffentlicht, da den Projektinitiatoren die nötigen Kapazitäten und Ressourcen für eine Umsetzung fehlten. Das Ergebnis ist daher als getestetes Produktkonzept zu verstehen, nicht als Live-Produkt mit messbarem Geschäftserfolg.
The concept was not developed or launched after the project, as the project initiators did not have the capacity and resources required for implementation. The outcome should therefore be understood as a tested product concept rather than a live product with measurable business impact.
Nächste SchritteNext steps
Was ich als Nächstes validieren würdeWhat I would validate next
- Das Echtzeit-Informationsmodell prüfen: Festlegen, wie Meldungen aus der Community überprüft werden, wie veraltete Informationen erkannt werden und wie Nutzer die Verlässlichkeit jedes Updates einschätzen können.
- Vertrauen und Kontosicherheit stärken: Datenschutzrichtlinien klären, das Zurücksetzen des Passworts verbessern und testen, wie Sicherheitsinformationen im Onboarding vermittelt werden sollten.
- Den Produktumfang priorisieren: Die zentrale Tankstellensuche von unterstützenden Features wie Unterhaltung, Treibstoffrechner und erweitertem Profil trennen.
- Tankstellen nach Preis-Leistung vergleichen: Untersuchen, was „Preis-Leistung“ für Nutzer bedeutet, und herausfinden, welche Informationen beim Vergleich von Tankstellen helfen, ohne das Interface zu überladen.
- Unter realistischen Bedingungen testen: Weitere Research mit einer größeren Gruppe von Autofahrern in Venezuela durchführen und das Erlebnis in realistischen mobilen Situationen testen – auch unter Stress und bei schwankender Verbindungsqualität.
- Barrierefreiheit prüfen: Farbkontraste, Beschriftungen, Komponentenzustände und Größe der Touch-Flächen prüfen, bevor es in die Entwicklung geht.
- Verify the real-time information model: Define how community reports would be verified, how outdated information would be identified and how users could assess the reliability of each update.
- Strengthen trust and account security: Clarify privacy policies, improve password recovery and test how security information should be communicated during onboarding.
- Prioritize the product scope: Separate the essential station-finding journey from supporting features such as entertainment, fuel calculations and extended profile functionality.
- Explore station value comparison: Investigate what “value” means to users and determine which information would help them compare stations without overloading the interface.
- Test under realistic conditions: Conduct further research with a broader group of drivers in Venezuela and test the experience in realistic mobile contexts, including stressful situations and varying connection quality.
- Validate accessibility: Review colour contrast, labels, component states and touch-target sizes before moving towards development.
ReflexionReflection
Was ich gelernt habeWhat I learned
Die direkte Zusammenarbeit mit den venezolanischen Projektinitiatoren half uns, das Produktkonzept mit einem konkreten lokalen Kontext zu verbinden, statt das Problem nur von außen zu betrachten.
Working directly with Venezuelan project initiators helped us connect the product concept to a specific local context rather than approaching the problem only from an outside perspective.
Das Projekt hat außerdem gezeigt, wie die Fidelity eines Prototyps die Art des Nutzerfeedbacks verändert. Sobald das Erlebnis aussah und sich verhielt wie ein echtes Produkt, rückten Fragen zu Sicherheit, Datenschutz und Vertrauen deutlich in den Vordergrund.
The project also showed how the fidelity of a prototype changes the nature of user feedback. Once the experience looked and behaved more like a real product, questions about security, privacy and trust became much more prominent.
Vor allem habe ich gelernt, dass visuelle Klarheit allein kein Vertrauen schafft. Bei einem Community-basierten Dienst müssen die Verlässlichkeit der Informationen und die Transparenz des dahinterliegenden Systems als zentrale Teile des Nutzererlebnisses behandelt werden.
Most importantly, I learned that visual clarity alone cannot create trust. For a community-based service, the reliability of the information and the transparency of the underlying system must be treated as core parts of the user experience.