Continuum Graphics Shop

Online-Shop für Minecraft-Shader und -Texturepacks

Durch einen Bekannten habe ich Ende 2019 einen Auftrag von einem amerikanischen Unternehmen zur Neuprogrammierung ihres Online-Shops erhalten. Auf der Suche nach neuen Erfahrungen habe ich den Auftrag angenommen und so schließlich innerhalb von weniger Wochen mit Hilfe von anderen Developern des Unternehmens ein eigenes Ecommerce System speziell für ihren Zweck entwickelt, wobei ich für das Frontend des Systems zuständig war.

Projekt Details

Leistungen UI/UX Design, Web Development
Tools Adobe XD, jQuery, (ASP.NET)
Jahr 2019
Vorschau continuum.graphics/store

Auftrag

Der Auftrag

Der Anlass

Das Unternehmen Continuum Graphics LLC. stellt sogenannte Texturepacks und Shaders für das Sandbox-Game Minecraft her, die dem Spiel einen realistischeren Look verpassen. Im Zuge des Umzugs ihrer Website von Squarespace auf WordPress können Käufe nicht mehr über die entsprechende Squarespace Integration abgewickelt werden. Stattdessen hat sich das Team von Continuum Graphics dafür entschieden, eine eigene Schnittstelle für ihren Shop und die Kaufabwicklung zu entwickeln.

Meine Aufgabe

Die Entwicklung des Backends (datenverarbeitende Logik) der Seite wurde von anderen Mitarbeitern des Unternehmens unter Benutzung von ASP.NET übernommen. Meine Aufgabe hingegen war es die Benutzeroberfläche für den neuen Shop und die Kaufabwicklung zu designen und als Vorlage mithilfe von HTML, CSS und JS zu implementieren. Dabei sollte ich nicht zu stark von der alten Website abweichen, diese allerdings auch nicht kopieren.

Konzept

Das Konzept

Bei diesem Shop wird das wohlbekannte Warenkorb-Prinzip verwendet. Dabei fügt der Nutzer alle Produkte, die er kaufen möchte zum Warenkorb hinzu und kann diese dann gebündelt bezahlen. Eine klassische Detailseite der Produkte gibt es wiederum nicht. Stattdessen gelangt man bei jedem Produkt jeweils zu einer ausführlichen Informationsseite.

Der Benutzer muss bei jedem Kauf bereits ein Konto haben und angemeldet sein. Um dies zu ermöglichen mussten sowohl Anmelde- als auch Registrierungsseiten designt werden. Wenn man sich als Kunde angemeldet hat kann man zudem all seine Bestellungen, Abonnements und seine Einstellungen ansehen sowie seine Downloads verwalten und Dienste ggf. aktualisieren.

User Flow

Zielgruppe

Die Zielgruppe

Primäre Zielgruppe

Vor allem junge Gamer mit leistungsstarken Computern, die Spaß am Sandbox-Game Minecraft haben und sich eher aufs Bauen als auf Minispiele bzw. „PVP“ fokussieren, sind Kunden von Continuum Graphics. Für diese soll die Oberfläche (auch ohne stark ausgebildete Sprachkenntnisse) leicht verständlich sein.

Sekundäre Zielgruppe

Als weitergefasste Zielgruppe des Unternehmens kommen alle Minecraft-Spieler, unabhängig vom Alter, die schöne Grafiken erhalten wollen in Frage. Auch Kunden mit leistungsschwächeren Computern finden bei Continuum Graphics niedriger auflösende Texturepacks und anspruchslosere Shader.

Design

Das Design

Farben

Bei dem Design sollten möglichst wenige verschiedene Farben benutzt werden. Das Braun findet als Theme-Farbe lediglich in der oberen Navigationsleiste Verwendung. Das Blau und Grün wurde einfach von den Produktlogos übernommen und als Akzentfarben für Bereiche, in denen das Produkt zu sehen ist, benutzt.

#201A16

#2560A4

#27AE60

Typografie

Die Schriftart Futura PT stammt aus dem vorherigen Design der Webseite. Es symbolisiert durch seine runde Form die Einfachheit und Verspieltheit der Produkte, allerdings wirkt diese Schriftart durch seine schafen Kanten auch elegant. Für sekundäre Texte wird die Font Roboto verwendet, sodass man alle Details gut lesen kann und nicht von dem Aussehen der Schrift abgelenkt wird.

Futura PT

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Ää Öö Üü ß , . ! ? / 0 1 2 3 4 5 6 7 8 9

Roboto

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Ää Öö Üü ß , . ! ? / 0 1 2 3 4 5 6 7 8 9

Website besuchen

Ergebnis

Das Ergebnis