Tech Doc UI Design

Die Geschichte vom Aufbau einer Marke

Zusammenfassung

Tech Doc ist das, was manche meinen, mein Baby zu sein. Ich habe es vom Anfang seines Lebens bis heute genährt.

Was genau ist Tech Doc?

Tech Doc ist ein erschwinglicher Support-Service für Studenten der York University (Toronto, Ontario).

In den letzten drei Jahren habe ich daran gearbeitet, den Service von einem Ein-Mann-Team (mir) auf fast fünfzehn Mitarbeiter auszubauen, die sowohl im Marketing als auch im technischen Support arbeiten. Ich arbeite auch daran, es zu einem eigenen Club zu machen und nicht zu einer Tochtergesellschaft.

Ziel des Designs

Mein Ziel bei diesem Projekt war es, eine professionelle und dennoch einprägsame Website zu erstellen, die das darstellen kann, was Tech Doc ist, und gleichzeitig zusätzliche Dienstleistungen in Anspruch nehmen kann, indem Prozesse automatisiert und intuitiver werden. Zum Beispiel die Buchung eines Termins, der traditionell durch Senden einer E-Mail durchgeführt wurde. Über diese Site können Sie einen Termin buchen, indem Sie eine Uhrzeit auswählen und ein Formular ausfüllen.

Ich möchte mit dieser Website vor allem die Bekanntheit der Marke steigern.

Im vergangenen Jahr habe ich dies erreicht, indem ich Events veranstaltete und Uniformen kreierte, die einzigartig sind und unser Logo mit "Tech Doc Pink" enthalten.

Kreative Erkundung

Mit der Website wollte ich, dass sich die Leute ruhig und gesammelt fühlen. Aufgrund technischer Probleme kann es vor allem bei Fristen oder Prüfungen zu extremer Frustration der Menschen kommen. Vertrauen war auch eine wichtige Sache, die ich mit der Website betonen wollte. Wenn wir zeigen, dass wir ein freundliches, professionelles Gesicht haben, können Sie uns darauf vertrauen, Ihre Probleme ohne böswillige Absicht zu beheben.

Design Inception

Das erste Farbschema, das ich ausgewählt hatte, war schwarz mit hellem Blau, Rosa und Lila. Mir schien das entspannend, vielleicht weil ich ein Nyctophile bin, fühlte ich mich in diesem Raum wohl.

Ich bin dann mit einer monochromatischen rosafarbenen Palette gegangen. Es war zu stark und das Gegenteil von Entspannung.

Zum Abschluss habe ich mich inspirieren lassen, wie ich andere beruhigende Farben mit Rosa kombinieren kann. Schließlich fand ich einige Inspirationen aus der Natur, die die beruhigende Botschaft vermitteln, die ich anstrebte.

Bilder von rosa Sandstränden und Wolken mit rosa Reflexen waren die perfekte Lösung für mein Problem. Diese Bilder geben Ihnen das Gefühl, Sie könnten jetzt dorthin gehen, sich auf den Sand legen und einfach entspannen.

Moodboard

Nachdem ich auf Pexel nach Inspirationen für Stock Photos über Tech und Tech Support gesucht hatte, entdeckte ich eine bestimmte Ästhetik, die hauptsächlich dunkle Hintergründe und helle Lichter in Rosa, Blau und Lila umfasst.

Dieser Look wurde größtenteils den Spielern zugeschrieben, weshalb es mir gefallen hat.

Nachdem ich es der Klasse vorgestellt habe. Ich erhielt eine Rückmeldung, dass es einem Nachtclub ähnelte. Ich glaube nicht, dass sich jemand entspannen oder professionell finden würde.

Ich ging zurück zum Zeichenbrett und ließ mich von meinem Logo sowie einem Bild auf meinem Moodboard inspirieren.

Obwohl dies auf dem Papier gut aussah. Es wurde nicht erreicht. Ich bin mir ziemlich sicher, dass ich das Gegenteil davon gemacht habe, was auf diesem Foto zu sehen ist.

Zum Schluss bin ich wieder zu den Grundlagen gekommen. Zur Natur Was ist entspannender als ein Strand? Ich weiß es wirklich nicht.

Sie wissen, was sich sonst langsam und ruhig bewegt, auch wenn es unten läuft. Der Himmel.

Farben

Ich war anfangs auf diese monochromatische, rosafarbene Palette gesetzt und es war ziemlich überwältigend.

Aber schließlich nutzte ich die Kräfte der Natur, um eine ausgewogene, sehr gestreckte, aufgespaltene Komplementärfarbpalette zu zaubern.

Ich habe versucht, die beruhigenden Elemente des blauen Wassers und des rosafarbenen Sandes zu erfassen und dabei auch einige Neutrale für das richtige Timing zu sparen. Ich behielt den Tech Doc Pink (# D4145A) bei, verwendete ihn jedoch sparsam als kleine Akzente. Ich denke, es kommt wunderbar zusammen, um etwas wirklich Einzigartiges zu schaffen.

Typografie

Wie schon oft gesagt, war das Ziel der Website, ruhig und vertrauenswürdig zu sein. Wie kann man das besser machen, indem man jemanden dazu bringt, sich eingeladen zu fühlen, besser und dennoch willkommen zu sein?

Mit Oxygen und Roboto Slab habe ich das erreicht.

Ich habe es auch geschafft, das gesamte Gefühl des ursprünglichen Logos zu ändern, indem ich den Text in Oxygen und ZCOOL QingKe HuangYou änderte, um das medizinische + zu erhalten.

Es ging von passiv aggressiv zu extrem freundlich.

Gestaltungsrichtlinie

Dies ist der endgültige Styleguide, nachdem immense Änderungen gegenüber dem extrem Rosa vorgenommen wurden.

Wireframes

Ich habe die meiste Zeit an meinen Wireframes gearbeitet. Im Wesentlichen habe ich das Format von normaler Jane zu künstlerisch professionell geändert.

Ich habe auch gelernt, dass Bilder und helle Farben in Wireframes verwirrend wirken.

Vor:

Nach dem:

CompTIA-Seite →

Ein Link zum Desktop-Drahtgitter ist hier:

https://marvelapp.com/6e5agij

Letzter Prototyp

Zum Schluss kann ich Ihnen den endgültigen Prototyp vorstellen. (Vorher und nachher)

Hier sind die Haltepunkte für Desktop, Tablet und Mobile:

Der Link zum gesamten Prototyp ist unten:

https://www.figma.com/file/RWkl2sSMdF5TCPWFMQ9Zvsoc/Desktop-Prototype-2?node-id=2%3A2

Hoffentlich weckt das Gefühl, an einem ruhigen Strand zu sein, während der Computer repariert wird.

Benutzer-Feedback

Ich habe strukturelle und konstruktive Änderungen vorgenommen, basierend auf den Eingaben meines Teams.

Eine Sache, die mich wirklich überrascht hat, war die Änderung von Design und Struktur, die ein Element der Website komplett verändert hat.

"Das blaue Rechteck auf der Homepage lässt mich die Informationen in der Box im Vergleich zu nur auf der Seite lesen" -Marwa

Fazit

Ich habe viel aus dieser Klasse gelernt. Am wichtigsten ist, praktische UI-Designfähigkeiten, die auf mein spärliches UX-Wissen angewendet werden können. Ich habe auch gelernt, wie man ein Interface von Anfang bis Ende sowie in Agile-Teams entwickelt.

Das Beste, was ich aus diesem Kurs herausbekommen habe, war dieses Portfolio-Stück, mit dem ich eine funktionierende Website erstellen kann, um die Studenten der York University zu unterstützen und höhere Serviceanfragen zu bearbeiten.