Die vorherige Version der Website litt unter fehlender visueller Hierarchie, schwachem UI-Design und inkonsistenten Layout-Mustern. Die Navigation durch die Inhalte war mühsam, und das Fehlen einer klaren Informationsarchitektur führte zu einem frustrierenden und ineffizienten Nutzungserlebnis. Die Stakeholder forderten daher eine vollständige Überarbeitung mit Fokus auf Klarheit, Konsistenz und einer besseren Strukturierung der Inhalte.
MCI R & D
UI/UX Case Study
Team
Reza Tavassoli
UIUX Designer
Shahin Servati
UIUX Designer
🗂Projektübersicht
This project focused on redesigning the official website of MCI’s Research and Development Department. The goal was to improve its overall usability, structure, and visual coherence while ensuring the content is easily accessible to both internal teams and external partners. The redesign aimed to reflect the department’s innovation-driven nature through a clean and modern user experience.
❗️Problemstellung
Dieses Projekt konzentrierte sich auf das Redesign der offiziellen Website der Forschungs- und Entwicklungsabteilung von MCI. Ziel war es, die Benutzerfreundlichkeit, Struktur und visuelle Konsistenz der Seite zu verbessern und gleichzeitig sicherzustellen, dass die Inhalte sowohl für interne Teams als auch externe Partner leicht zugänglich sind. Das Redesign sollte den innovationsgetriebenen Charakter der Abteilung durch ein klares und modernes Nutzungserlebnis widerspiegeln.
🎯 Ziele und Bedürfnisse der Nutzer:innen
⚙️ Design Prozess
1. 
Stakeholder Interviews
Wir starteten das Projekt mit einem gezielten Meeting mit der Leitung der Forschungs- und Entwicklungsabteilung von MCI. Diese Sitzung half uns, ein klares Verständnis für die Vision der Abteilung, die Schwachstellen der bestehenden Website sowie die gewünschte Richtung des Redesigns zu gewinnen.
Zentrale Ergebnisse dieses Treffens waren:
Klärung der Geschäftsziele und Erwartungen
Identifikation der wichtigsten Usability- und Designprobleme
Einigung auf die Notwendigkeit eines klaren, strukturierten und konsistenten UI-Designs mit verbesserter Informationsarchitektur
2. 
Schwachstellenanalyse
Schwachstellenanalyse We audited the existing website to identify usability issues, content gaps, and visual inconsistencies. Key problems included poor layout structure, lack of design system, overwhelming content without hierarchy, and unclear navigation. These findings became the foundation for improvement.
3. 
Moodboards & Visulle Ausrichtung
Um visuelle Gestaltungsmöglichkeiten auszuloten, erstellten wir Moodboards, die einen klaren, modernen und professionellen Stil widerspiegeln – im Einklang mit der Markenidentität von MCI. Diese Moodboards dienten als Leitfaden für die visuelle Sprache des Designs – von Farbpaletten und Typografie bis hin zu allgemeinen UI-Mustern.
4. Informationsarchitectur
Wir überarbeiteten die Inhalte und strukturierten sie in eine klarere Hierarchie, indem wir thematisch zusammengehörige Seiten gruppierten und definierte Nutzerpfade entwickelten. Eine neue Sitemap wurde erstellt, um sicherzustellen, dass alle Inhalte logisch und effizient zugänglich sind. Diese Informationsarchitektur bildete das Rückgrat des Redesigns.
5. Teamzusammenarbeit
hroughout the project, weWährend des gesamten Projekts arbeiteten wir eng mit funktionsübergreifenden Teammitgliedern zusammen – darunter Entwickler:innen, Produktmanager:innen und Content-Strateg:innen. Regelmäßige Abstimmungen sowie der Einsatz kollaborativer Tools wie Figma und Notion sorgten dafür, dass alle Beteiligten stets auf dem gleichen Stand blieben.
Für die Übergabe an das Entwicklungsteam nutzten wir spezielle Handoff-Tools, um Layout-Spezifikationen und Assets klar zu kommunizieren. In Review-Sessions holten wir frühzeitig und regelmäßig Feedback ein. Diese enge Zusammenarbeit ermöglichte uns, Designkonsistenz zu wahren, Probleme frühzeitig zu erkennen und einen reibungsloseren Entwicklungsprozess sicherzustellen.
6. Wireframes & User FLows
Auf Basis der neuen Informationsarchitektur entwarfen und entwickelten wir Wireframes für zentrale Seiten. Zudem kartierten wir die wichtigsten Nutzerflüsse, um sicherzustellen, dass das Nutzungserlebnis intuitiv und zielgerichtet ist. Diese Wireframes halfen uns, Layout-Ideen frühzeitig zu validieren, bevor wir in den High-Fidelity-Designprozess übergingen.
7. Feedback & Iteration
Wir präsentierten unsere Wireframes und Designansätze regelmäßig den Stakeholdern, sammelten Rückmeldungen und passten die Entwürfe entsprechend den Nutzer- und Geschäftsanforderungen an. Mehrere Iterationsrunden ermöglichten es uns, Details wie Abstände, Inhaltsstruktur und Platzierung von Call-to-Actions gezielt zu optimieren
🎨UI Kit and Styles
Wir entwickelten ein konsistentes Designsystem basierend auf einem modularen UI-Kit mit wiederverwendbaren Komponenten. Für zentrale Funktionen wie Primäraktionen, Fehlermeldungen, Hinweise und Warnungen wurden eigene Farb-Tokens definiert. Typografie, Abstände und Ebenen (Elevation) wurden standardisiert, um visuelle Harmonie und Wiedererkennbarkeit im gesamten Interface zu gewährleisten.
Farbsystem
Um visuelle Konsistenz zu sichern und eine intuitive Rückmeldung zu ermöglichen, erstellte ich ein strukturiertes Farbsystem, das sich an gängigen UI-Signalen orientiert. Für jede essenzielle semantische Farbe wurden Helligkeitsstufen von 0 bis 100 definiert (von hell bis dunkel), was Flexibilität im Einsatz für Hintergründe, Rahmen und Texte bietet, ohne die visuelle Kohärenz zu stören.
🔴 Rot (Fehler / Kritisch)
Kennzeichnet Fehlermeldungen, Warnungen oder kritische Verbrauchszonen.🔵 Blau (Information)
Wird für neutrale Systemmeldungen, Tooltips und Rückmeldungen verwendet.🟡 Gelb (Vorsicht)
Weist auf grenzwertige Verbräuche oder aufmerksamkeitsbedürftige Hinweise hin.🟢 Grün (Erfolg)
Betont optimierten Verbrauch und positives Nutzerverhalten.
Jede dieser Farbgruppen umfasst ein vollständiges Spektrum an Tönen und Schattierungen – vom Hintergrund bis hin zu kontraststarkem Text.
🌟 Primärfarbe
Nach dem Aufbau der semantischen Farbstruktur entwickelte ich eine eigene Primärfarbpalette zur Repräsentation der Markenidentität von Ba Energy.
Der primäre Grünton steht für Nachhaltigkeit, Vertrauen und Wachstum – Werte, die wir mit verantwortungsbewusstem Energieverbrauch verknüpfen wollten.
Abstufungen dieser Primärfarbe fanden gezielt Verwendung in Buttons, Diagrammen und Hervorhebungen, um das Nutzungserlebnis zu vereinheitlichen und das Nutzerverhalten gezielt zu lenken.
Typografie
Die Typografie spielte eine zentrale Rolle bei der Gestaltung einer klaren und gut lesbaren Benutzeroberfläche. Ich entwickelte ein Typografiesystem, das auf klarer Hierarchie und Einfachheit basiert:
Überschriften – Eingesetzt für Abschnittstitel und Diagrammbeschriftungen, fett und leicht erfassbar auf einen Blick.
Fließtext – Für optimale Lesbarkeit auf mobilen Geräten optimiert, mit ausgewogenem Zeilenabstand und Schriftgewicht.
Hinweise & Mikrotexte – Verwendet für Tooltips, sekundäre Informationen und unterstützende Hinweise.
Das System basiert auf den Prinzipien der Material Design Typography. Wir legten eine klare und verbindliche Struktur für die Verwendung vordefinierter Schriftgrößen und -gewichte fest.
Alle Textstile wurden nach einem konsistenten Benennungssystem organisiert (z. B. Heading-L, Body-M, Caption-S) und mithilfe von Figma-Tokens im gesamten Interface angewendet.
Dies gewährleistet visuelle Konsistenz, Skalierbarkeit und eine klare Nutzerführung über alle Bildschirmgrößen hinweg.
Tokens
Um Skalierbarkeit und Konsistenz im gesamten Designsystem sicherzustellen, implementierte ich von Beginn an Design Tokens. Diese strukturierten Variablen ermöglichten es uns, zentrale Designeigenschaften systematisch zu definieren und effizient zu verwalten – insbesondere bei der Unterstützung von Dark- und Light-Themes sowie bei der globalen Anwendung von Designänderungen.
Eingesetzte Token-Kategorien:
🎨 Farben – Semantische und funktionale Farbpaletten (z. B.
color-error-80,color-primary-60)🔠 Typografie – Schriftgrößen, -gewichte und Zeilenhöhen (z. B.
font-body-md,font-title-lg)📏 Abstände – Einheiten für Padding und Margin (z. B.
space-4,space-8)🔘 Rundungen & Schatten – Eckradien und Ebenen für Elevation
Der Einsatz von Design Tokens ermöglichte eine globale Anwendung von Änderungen mit minimalem Aufwand und vereinfachte die Übergabe an Entwickler:innen erheblich – präzise, konsistent und effizient.
Komponents
Wiederverwendbare Komponenten gewährleisten eine konsistente Gestaltung über die gesamte App hinweg. Sie beschleunigen sowohl den Design- als auch den Entwicklungsprozess, da sie vorgefertigte und einsatzbereite Elemente bereitstellen. Ein gut strukturiertes Komponentensystem erleichtert zudem zukünftige Anpassungen und das Skalieren des Produkts erheblich
+30 Assets
Finales Design
Das finale Design verfolgte das Ziel, eine ausgewogene Verbindung zwischen Klarheit, Funktionalität und Markenidentität herzustellen. Auf dem Desktop führten wir ein sauberes und strukturiertes Layout ein – mit konsistenten Abständen, einem klaren Raster und einer intuitiven Navigation. Wichtige Inhaltsbereiche wurden deutlich hervorgehoben, sodass Nutzer relevante Informationen ohne kognitive Überforderung schnell finden konnten. Eine gezielte visuelle Hierarchie – gesteuert durch Typografie, Farben und Abstände – lenkte die Aufmerksamkeit der Nutzer durch die Seite.
Responsives Design
Für das responsive Design stellten wir sicher, dass alle Komponenten und Layouts sich nahtlos an verschiedene Bildschirmgrößen anpassen – von Tablets bis hin zu Smartphones. Navigationselemente, Karten und Tabellen wurden für mobile Nutzung optimiert, beispielsweise durch ausklappbare Menüs und touchfreundliche Buttons. Ziel war es, ein durchgängiges Nutzungserlebnis über alle Geräte hinweg zu schaffen – ohne Einbußen bei Bedienbarkeit oder Inhaltszugänglichkeit.
Durch die konsequente Priorisierung sowohl der Desktop- als auch der Mobilversion entstand ein Design, das nicht nur visuell ansprechend, sondern auch funktional, benutzerfreundlich und zukunftsfähig ist.
