{"id":141,"date":"2025-04-14T11:35:41","date_gmt":"2025-04-14T08:05:41","guid":{"rendered":"https:\/\/rezatavasoli.ir\/?page_id=141"},"modified":"2025-05-03T01:50:22","modified_gmt":"2025-05-02T22:20:22","slug":"r-d","status":"publish","type":"page","link":"https:\/\/reza-tavasoli.com\/en\/r-d\/","title":{"rendered":"R & D"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

MCI R & D<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

UI\/UX Case Study<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Team<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Reza Tavassoli<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

UIUX Designer<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"Group\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Shahin Servati<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

UIUX Designer<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Verwendete Tools<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Figma. Photoshop. Illustrator<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Dauer<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

2 Months<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Link<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

https:\/\/hamrahrd.ir\/<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

\ud83d\uddc2Projekt\u00fcbersicht<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

This project focused on redesigning the official website of MCI\u2019s 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\u2019s innovation-driven nature through a clean and modern user experience.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

\u2757\ufe0fProblemstellung<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

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\u00fcr interne Teams als auch externe Partner leicht zug\u00e4nglich sind. Das Redesign sollte den innovationsgetriebenen Charakter der Abteilung durch ein klares und modernes Nutzungserlebnis widerspiegeln.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

\ud83c\udfaf Ziele und Bed\u00fcrfnisse der Nutzer:innen<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

  • Die vorherige Version der Website litt unter fehlender visueller Hierarchie, schwachem UI-Design und inkonsistenten Layout-Mustern. Die Navigation durch die Inhalte war m\u00fchsam, und das Fehlen einer klaren Informationsarchitektur f\u00fchrte zu einem frustrierenden und ineffizienten Nutzungserlebnis. Die Stakeholder forderten daher eine vollst\u00e4ndige \u00dcberarbeitung mit Fokus auf Klarheit, Konsistenz und einer besseren Strukturierung der Inhalte.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/article><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

    \n\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    \u2699\ufe0f Design Prozess<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    1. \"\ud83d\udde3\" Stakeholder Interviews<\/h2>

    Wir starteten das Projekt mit einem gezielten Meeting mit der Leitung der Forschungs- und Entwicklungsabteilung von MCI. Diese Sitzung half uns, ein klares Verst\u00e4ndnis f\u00fcr die Vision der Abteilung, die Schwachstellen der bestehenden Website sowie die gew\u00fcnschte Richtung des Redesigns zu gewinnen.<\/p>

    Zentrale Ergebnisse dieses Treffens waren:<\/p>

    • Kl\u00e4rung der Gesch\u00e4ftsziele und Erwartungen<\/p><\/li>

    • Identifikation der wichtigsten Usability- und Designprobleme<\/p><\/li>

    • Einigung auf die Notwendigkeit eines klaren, strukturierten und konsistenten UI-Designs mit verbesserter Informationsarchitektur<\/p><\/li><\/ul>

      2. \"\ud83d\udcca\"\u00a0Schwachstellenanalyse<\/h2>

      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.<\/p>

      3. \"\ud83e\uddf1\" Moodboards & Visulle Ausrichtung<\/h2>

      Um visuelle Gestaltungsm\u00f6glichkeiten auszuloten, erstellten wir Moodboards, die einen klaren, modernen und professionellen Stil widerspiegeln \u2013 im Einklang mit der Markenidentit\u00e4t von MCI. Diese Moodboards dienten als Leitfaden f\u00fcr die visuelle Sprache des Designs \u2013 von Farbpaletten und Typografie bis hin zu allgemeinen UI-Mustern.<\/p>

      \"\"<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t

      4. Informationsarchitectur<\/h2>

      Wir \u00fcberarbeiteten die Inhalte und strukturierten sie in eine klarere Hierarchie, indem wir thematisch zusammengeh\u00f6rige Seiten gruppierten und definierte Nutzerpfade entwickelten. Eine neue Sitemap wurde erstellt, um sicherzustellen, dass alle Inhalte logisch und effizient zug\u00e4nglich sind. Diese Informationsarchitektur bildete das R\u00fcckgrat des Redesigns.<\/p>

      \"\"<\/p>

      \"\"<\/p>

      5. \"\ud83e\uddf1\" Teamzusammenarbeit<\/h2>

      hroughout the project, weW\u00e4hrend des gesamten Projekts arbeiteten wir eng mit funktions\u00fcbergreifenden Teammitgliedern zusammen \u2013 darunter Entwickler:innen, Produktmanager:innen und Content-Strateg:innen. Regelm\u00e4\u00dfige Abstimmungen sowie der Einsatz kollaborativer Tools wie Figma und Notion sorgten daf\u00fcr, dass alle Beteiligten stets auf dem gleichen Stand blieben.
      F\u00fcr die \u00dcbergabe an das Entwicklungsteam nutzten wir spezielle Handoff-Tools, um Layout-Spezifikationen und Assets klar zu kommunizieren. In Review-Sessions holten wir fr\u00fchzeitig und regelm\u00e4\u00dfig Feedback ein. Diese enge Zusammenarbeit erm\u00f6glichte uns, Designkonsistenz zu wahren, Probleme fr\u00fchzeitig zu erkennen und einen reibungsloseren Entwicklungsprozess sicherzustellen.<\/p>

      6. \"\ud83e\uddf1\" Wireframes & User FLows<\/h2>

      Auf Basis der neuen Informationsarchitektur entwarfen und entwickelten wir Wireframes f\u00fcr zentrale Seiten. Zudem kartierten wir die wichtigsten Nutzerfl\u00fcsse, um sicherzustellen, dass das Nutzungserlebnis intuitiv und zielgerichtet ist. Diese Wireframes halfen uns, Layout-Ideen fr\u00fchzeitig zu validieren, bevor wir in den High-Fidelity-Designprozess \u00fcbergingen.<\/p>

      7. \"\ud83e\uddf1\" Feedback & Iteration<\/h2>


      Wir pr\u00e4sentierten unsere Wireframes und Designans\u00e4tze regelm\u00e4\u00dfig den Stakeholdern, sammelten R\u00fcckmeldungen und passten die Entw\u00fcrfe entsprechend den Nutzer- und Gesch\u00e4ftsanforderungen an. Mehrere Iterationsrunden erm\u00f6glichten es uns, Details wie Abst\u00e4nde, Inhaltsstruktur und Platzierung von Call-to-Actions gezielt zu optimieren<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

      \n\t\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t

      \ud83c\udfa8UI Kit and Styles<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t

      Wir entwickelten ein konsistentes Designsystem basierend auf einem modularen UI-Kit mit wiederverwendbaren Komponenten. F\u00fcr zentrale Funktionen wie Prim\u00e4raktionen, Fehlermeldungen, Hinweise und Warnungen wurden eigene Farb-Tokens definiert. Typografie, Abst\u00e4nde und Ebenen (Elevation) wurden standardisiert, um visuelle Harmonie und Wiedererkennbarkeit im gesamten Interface zu gew\u00e4hrleisten.<\/p>

      Farbsystem<\/strong><\/p>

      Um visuelle Konsistenz zu sichern und eine intuitive R\u00fcckmeldung zu erm\u00f6glichen, erstellte ich ein strukturiertes Farbsystem, das sich an g\u00e4ngigen UI-Signalen orientiert. F\u00fcr jede essenzielle semantische Farbe wurden Helligkeitsstufen von 0 bis 100 definiert (von hell bis dunkel), was Flexibilit\u00e4t im Einsatz f\u00fcr Hintergr\u00fcnde, Rahmen und Texte bietet, ohne die visuelle Koh\u00e4renz zu st\u00f6ren.<\/p>

      • \ud83d\udd34 Rot (Fehler \/ Kritisch)<\/strong>
        Kennzeichnet Fehlermeldungen, Warnungen oder kritische Verbrauchszonen.<\/p><\/li>

      • \ud83d\udd35 Blau (Information)<\/strong>
        Wird f\u00fcr neutrale Systemmeldungen, Tooltips und R\u00fcckmeldungen verwendet.<\/p><\/li>

      • \ud83d\udfe1 Gelb (Vorsicht)<\/strong>
        Weist auf grenzwertige Verbr\u00e4uche oder aufmerksamkeitsbed\u00fcrftige Hinweise hin.<\/p><\/li>

      • \ud83d\udfe2 Gr\u00fcn (Erfolg)<\/strong>
        Betont optimierten Verbrauch und positives Nutzerverhalten.<\/p><\/li><\/ul>

        Jede dieser Farbgruppen umfasst ein vollst\u00e4ndiges Spektrum an T\u00f6nen und Schattierungen \u2013 vom Hintergrund bis hin zu kontraststarkem Text.<\/p>

        \ud83c\udf1f Prim\u00e4rfarbe<\/strong>
        Nach dem Aufbau der semantischen Farbstruktur entwickelte ich eine eigene Prim\u00e4rfarbpalette zur Repr\u00e4sentation der Markenidentit\u00e4t von Ba Energy<\/em>.
        Der prim\u00e4re Gr\u00fcnton steht f\u00fcr Nachhaltigkeit, Vertrauen und Wachstum \u2013 Werte, die wir mit verantwortungsbewusstem Energieverbrauch verkn\u00fcpfen wollten.<\/p>

        Abstufungen dieser Prim\u00e4rfarbe fanden gezielt Verwendung in Buttons, Diagrammen und Hervorhebungen, um das Nutzungserlebnis zu vereinheitlichen und das Nutzerverhalten gezielt zu lenken.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

        \n\t\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t

        Typografie<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
        \n\t\t\t\t
        \n\t\t\t\t\t\t\t\t\t

        Die Typografie spielte eine zentrale Rolle bei der Gestaltung einer klaren und gut lesbaren Benutzeroberfl\u00e4che. Ich entwickelte ein Typografiesystem, das auf klarer Hierarchie und Einfachheit basiert:<\/p>

        • \u00dcberschriften<\/strong> \u2013 Eingesetzt f\u00fcr Abschnittstitel und Diagrammbeschriftungen, fett und leicht erfassbar auf einen Blick.<\/p><\/li>

        • Flie\u00dftext<\/strong> \u2013 F\u00fcr optimale Lesbarkeit auf mobilen Ger\u00e4ten optimiert, mit ausgewogenem Zeilenabstand und Schriftgewicht.<\/p><\/li>

        • Hinweise & Mikrotexte<\/strong> \u2013 Verwendet f\u00fcr Tooltips, sekund\u00e4re Informationen und unterst\u00fctzende Hinweise.<\/p><\/li><\/ul>

          Das System basiert auf den Prinzipien der Material Design Typography. Wir legten eine klare und verbindliche Struktur f\u00fcr die Verwendung vordefinierter Schriftgr\u00f6\u00dfen und -gewichte fest.
          Alle Textstile wurden nach einem konsistenten Benennungssystem organisiert (z.\u202fB. Heading-L<\/em>, Body-M<\/em>, Caption-S<\/em>) und mithilfe von Figma-Tokens im gesamten Interface angewendet.
          Dies gew\u00e4hrleistet visuelle Konsistenz, Skalierbarkeit und eine klare Nutzerf\u00fchrung \u00fcber alle Bildschirmgr\u00f6\u00dfen hinweg.<\/p>

          \"\"<\/p>

          \"\"<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

          \n\t\t\t\t
          \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
          \n\t\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t

          Tokens<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t\t\t\t\t

          Um Skalierbarkeit und Konsistenz im gesamten Designsystem sicherzustellen, implementierte ich von Beginn an Design Tokens<\/strong>. Diese strukturierten Variablen erm\u00f6glichten es uns, zentrale Designeigenschaften systematisch zu definieren und effizient zu verwalten \u2013 insbesondere bei der Unterst\u00fctzung von Dark- und Light-Themes sowie bei der globalen Anwendung von Design\u00e4nderungen.<\/p>

          Eingesetzte Token-Kategorien:<\/strong><\/p>

          • \ud83c\udfa8 Farben<\/strong> \u2013 Semantische und funktionale Farbpaletten (z.\u202fB. color-error-80<\/code>, color-primary-60<\/code>)<\/p><\/li>

          • \ud83d\udd20 Typografie<\/strong> \u2013 Schriftgr\u00f6\u00dfen, -gewichte und Zeilenh\u00f6hen (z.\u202fB. font-body-md<\/code>, font-title-lg<\/code>)<\/p><\/li>

          • \ud83d\udccf Abst\u00e4nde<\/strong> \u2013 Einheiten f\u00fcr Padding und Margin (z.\u202fB. space-4<\/code>, space-8<\/code>)<\/p><\/li>

          • \ud83d\udd18 Rundungen & Schatten<\/strong> \u2013 Eckradien und Ebenen f\u00fcr Elevation<\/p><\/li><\/ul>

            Der Einsatz von Design Tokens erm\u00f6glichte eine globale Anwendung von \u00c4nderungen mit minimalem Aufwand und vereinfachte die \u00dcbergabe an Entwickler:innen erheblich \u2013 pr\u00e4zise, konsistent und effizient.<\/p>

            \"\"<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

            \n\t\t\t\t\t
            \n\t\t\t\t
            \n\t\t\t\t
            \n\t\t\t\t\t

            \"\ud83e\udde9\"Komponents<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
            \n\t\t\t\t
            \n\t\t\t\t\t\t\t\t\t

            Wiederverwendbare Komponenten gew\u00e4hrleisten eine konsistente Gestaltung \u00fcber 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\u00fcnftige Anpassungen und das Skalieren des Produkts erheblich<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/article>

            \u00a0<\/div>

            \"\"<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

            \n\t\t\t\t\t
            \n\t\t\t\t
            \n\t\t\t\t
            \n\t\t\t\t\t

            +30 Assets<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
            \n\t\t\t\t
            \n\t\t\t\t\t\t\t
            \n\t\t\t
            <\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
            \n\t\t\t\t\t
            \n\t\t\t\t
            \n\t\t\t\t
            \n\t\t\t\t\t

            Finales Design<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
            \n\t\t\t\t
            \n\t\t\t\t\t\t\t\t\t

            Das finale Design verfolgte das Ziel, eine ausgewogene Verbindung zwischen Klarheit, Funktionalit\u00e4t und Markenidentit\u00e4t herzustellen. Auf dem Desktop f\u00fchrten wir ein sauberes und strukturiertes Layout ein \u2013 mit konsistenten Abst\u00e4nden, einem klaren Raster und einer intuitiven Navigation. Wichtige Inhaltsbereiche wurden deutlich hervorgehoben, sodass Nutzer relevante Informationen ohne kognitive \u00dcberforderung schnell finden konnten. Eine gezielte visuelle Hierarchie \u2013 gesteuert durch Typografie, Farben und Abst\u00e4nde \u2013 lenkte die Aufmerksamkeit der Nutzer durch die Seite.<\/p>

            Responsives Design<\/strong><\/p>

            F\u00fcr das responsive Design stellten wir sicher, dass alle Komponenten und Layouts sich nahtlos an verschiedene Bildschirmgr\u00f6\u00dfen anpassen \u2013 von Tablets bis hin zu Smartphones. Navigationselemente, Karten und Tabellen wurden f\u00fcr mobile Nutzung optimiert, beispielsweise durch ausklappbare Men\u00fcs und touchfreundliche Buttons. Ziel war es, ein durchg\u00e4ngiges Nutzungserlebnis \u00fcber alle Ger\u00e4te hinweg zu schaffen \u2013 ohne Einbu\u00dfen bei Bedienbarkeit oder Inhaltszug\u00e4nglichkeit.<\/p>

            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\u00e4hig ist.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

            \n\t\t\t\t
            \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
            \n\t\t\t\t
            \n\t\t\t\t
            \n\t\t\t\t\t

            More Than 20 Screens<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
            \n\t\t\t\t
            \n\t\t\t\t\t\t\t
            \n\t\t\t
            <\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"

            MCI R & D UI\/UX Case Study Team Reza Tavassoli UIUX Designer Shahin Servati UIUX Designer Verwendete Tools Figma. Photoshop. Illustrator Dauer 2 Months Link https:\/\/hamrahrd.ir\/ \ud83d\uddc2Projekt\u00fcbersicht This project focused on redesigning the official website of MCI\u2019s Research and Development Department. The goal was to improve its overall usability, structure, and visual coherence while ensuring […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-141","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/reza-tavasoli.com\/en\/wp-json\/wp\/v2\/pages\/141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reza-tavasoli.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/reza-tavasoli.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/reza-tavasoli.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/reza-tavasoli.com\/en\/wp-json\/wp\/v2\/comments?post=141"}],"version-history":[{"count":25,"href":"https:\/\/reza-tavasoli.com\/en\/wp-json\/wp\/v2\/pages\/141\/revisions"}],"predecessor-version":[{"id":461,"href":"https:\/\/reza-tavasoli.com\/en\/wp-json\/wp\/v2\/pages\/141\/revisions\/461"}],"wp:attachment":[{"href":"https:\/\/reza-tavasoli.com\/en\/wp-json\/wp\/v2\/media?parent=141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}