Benutzerfreundliches Onpage-Design für Steinoutlet Bielefeld

Diese Fallstudie behandelt die Neuentwicklung einer Corporate Website im Onepage-Design. Nutzer finden alle wichtigen Informationen über das Unternehmen übersichtlich auf einer einzigen Seite.

1

Informationen zum Projekt

Steinoutlet Bielefeld ist ein Fachhändler für Restposten von Terrassenplatten, Palisaden, Blockstufen, Pflastersteinen, Rasenkanten, Mauersteinen und vielem mehr. Seit einiger Zeit ist Steinoutlet Bielefeld erfolgreich mit seinen Produkten auf kleinanzeigen.de vertreten. Besonders hervorzuheben sind die attraktiven Konditionen, zu denen Markensteine angeboten werden. Bisher hat Steinoutlet weder Werbung noch eine Corporate Identity gehabt. Ein Kundenwunsch war es, neben den Print- und Grafik-Werbemitteln eine kleine Corporate Website zu erstellen, die alle wichtigen Informationen über das Unternehmen zusammenfasst – und das zu einem kleinen Budget.

Tools die ich für das Projekt verwendet habe

figma logo

Figma

Projektrolle

Research Konzeption Sitemap Persona Wireframing UI Design
2

Beschreibung des Problems

Durch die fehlende Sichtbarkeit des Fachhändlers in der Werbung haben viele Kunden das Vertrauen in ihn verloren. Besonders hervorzuheben ist die mangelnde Auffindbarkeit über Google, abgesehen von den Anzeigen aus Kleinanzeigen. Diese Situation verschärft sich, da potenzielle Kunden zunehmend online nach Produkten und Dienstleistungen suchen. Wenn der Fachhändler in den Suchergebnissen nicht sichtbar ist, wenden sich die Kunden eher an größere, bekanntere Anbieter, die besser online präsent sind. Dies führt zu einem signifikanten Wettbewerbsnachteil für den Fachhändler und kann langfristig zu Umsatzeinbußen führen.

Steinoutlet Google Suche

Google Suche

Das Unternehmen erscheint bei Google nur über Kleinanzeigen oder gar nicht, was unprofessionell wirkt.
Steinoutlet Kleinanzeigen Profil

Kleinanzeigen Profil

Fehlende Informationen über das Unternehmen
3

Zielsetzung

Ziel ist es, im Rahmen des Budgets eine aktuelle und benutzerfreundliche Website zu erstellen, die alle notwendigen Informationen zum Unternehmen kompakt darstellt. Dabei sollte die Pflege der aktuellen Produkte weiterhin über Kleinanzeigen sowie direkte Kommunikation erfolgen. Die Produktdarstellung auf der Website sollte lediglich einen Eindruck davon vermitteln, was verkauft wird. Die Website sollte als „digitale Visitenkarte“ fungieren.

3.1

Budgetgerechte Umsetzung

Die Website muss im vorgegebenen Budgetrahmen realisiert werden.

3.2

Benutzerfreundlichkeit

Die Benutzeroberfläche soll intuitiv und leicht navigierbar sein.

3.3

Informationskompaktheit

Alle wichtigen Informationen zum Unternehmen sollen klar und kompakt präsentiert werden.

3.4

Externe Produktpflege

Die Produktpflege und detaillierte Informationen erfolgen weiterhin über Kleinanzeigen

3.5

Produktübersicht

Die Website bietet eine kompakte Übersicht der Produkte, um einen ersten Eindruck zu vermitteln.

3.6

Digitale Visitenkarte

Die Website fungiert als professionelle digitale Visitenkarte des Unternehmens.

4

Persona

Durch das Erstellen von Personas konnte ich die Ziele und Verhaltensweisen der Kunden besser verstehen. Dies sichert, dass das Design auf die tatsächlichen Benutzerbedürfnisse ausgerichtet ist und dient mir als Orientierung für Designentscheidungen. Es ermöglicht mir, mich besser in die Perspektive der Zielgruppe zu versetzen und so zielgerichtete und benutzerfreundliche Lösungen zu entwickeln.

persona-cs2
5

Wettbewerbsanalyse

Das Steinoutlet Bielefeld positioniert sich als kleiner bis mittelgroßer Händler, der hauptsächlich Restposten von Top-Marken vertreibt. Diese Nischenstrategie ermöglicht es, hochwertige Produkte zu reduzierten Preisen anzubieten, was preissensible Kunden anzieht. Die starke Präsenz auf Kleinanzeigen-Plattformen passt perfekt zur Zielgruppe und hebt das Unternehmen von größeren Wettbewerbern ab. Diese gezielte Marktstrategie hat dem Steinoutlet Bielefeld geholfen, eine treue Kundschaft aufzubauen.

6

Entwicklung einer Sitemap

Beim Strukturaufbau der Sitemap habe ich mich entschieden, auf der Website direkt nach der Navigation mit einem Hero-Bereich zu starten. Dieser vermittelt kurz und prägnant, was das Unternehmen macht. Anschließend folgen Informationen über das Unternehmen und seine Dienstleistungen, gefolgt von Impressionen der Produkte. Für die komplette Produktpalette können Nutzer von hier aus zum Kleinanzeigenprofil gelangen. Zum Abschluss gibt es Kundenrezensionen, um Vertrauen aufzubauen, und eine Call-to-Action für die Kontaktaufnahme. Diese klare und kompakte Struktur sorgt dafür, dass Nutzer sofort verstehen, worum es geht und welche Produkte das Unternehmen anbietet.

persona-cs2
7

Wireframes

Nachdem ich die Sitemap erstellt hatte, präsentierte ich sie dem Kunden und erläuterte das weitere Vorgehen. Die Sitemap sollte dem Kunden als Orientierungshilfe dienen. Kurz darauf erhielt ich einige Texte vom Kunden, die ich dann Schritt für Schritt in einem Wireframe platzierte. Während des Aufbaus des Wireframes dachte ich bereits über Gestaltungselemente und Formen nach und arbeitete mich dabei systematisch durch jede einzelne Sektion.

wireframe-hero
7.1 Navbar und Hero Section

Enthält Logo, Navigation, prägnante H1-Überschrift, kurze Beschreibung, klaren Call-to-Action und Top-Marken-Abbildung.

wireframe-about
7.2 Über uns Section

Enthält eine kurze Unternehmensbeschreibung und dekorative Bildelemente zur Vertrauensbildung

wireframe-service
7.3. Service Section

Hier wird klar, dass neben dem Produktverkauf auch zusätzliche Dienstleistungen angeboten werden

wireframe-impressionen
7.4. Impressionen

Zeigt einen Überblick über die Produkte und leitet bei weiterem Interesse zum Kleinanzeigen-Profil weiter

wireframe-testimonials
05. Kundenrezensionen

Durch die Testimonials wird Vertrauen in das Unternehmen geschaffen

wireframe-cta-footer
06. Footer und CTA

Ganz zum Schluss kann man direkt Kontakt zum Unternehmen aufnehmen durch die CTA und im Footer werden nochmal alle wichtigen Kontaktinformationen abgebildet

6

Entwicklung eines Styleguides

Nachdem ich bereits im zuvor entwickelten Wireframe über Gestaltungselemente und Formen nachgedacht habe, habe ich nun auch Typografie, Farben, Bilder und Grafikelemente betrachtet, um ein konsistentes Design-System zu entwickeln. Als Grundbaustein des Styleguides habe ich das Logo verwendet, um Designentscheidungen zu treffen. Die verwendete Typografie harmonisiert gut im Webdesign, und die Farben des Logos eignen sich ebenfalls gut für das Web. Daher habe ich die Typografie und die Farben des Logos übernommen, um das Design-System zu erstellen.

persona-cs2
8

High-Fidelity Design

Bei der Ausgestaltung des Wireframes habe ich die im Styleguide verwendeteten Elemente implemntiert. Das ausgestalten des Wireframes diente zwei zwecken zum ersten dem Kunden einen ersten Eindruck zu vermitteln wie die Webseite später aussehen wird und zum zweiten Stile und ELemnte können vom Design einfacher in die Entwicklung integriert werden. (Bilder, Farben, Properties etc.)

ui-hero
8.1 Navbar und Hero Section

Enthält Logo, Navigation, prägnante H1-Überschrift, kurze Beschreibung, klaren Call-to-Action und Top-Marken-Abbildung.

ui-about
8.2 Über uns Section

Enthält eine kurze Unternehmensbeschreibung und dekorative Bildelemente zur Vertrauensbildung

ui-service
8.3. Service Section

Hier wird klar, dass neben dem Produktverkauf auch zusätzliche Dienstleistungen angeboten werden

ui-impressions
8.4. Impressionen

Zeigt einen Überblick über die Produkte und leitet bei weiterem Interesse zum Kleinanzeigen-Profil weiter

ui-testimonials
8.5. Kundenrezensionen

Durch die Testimonials wird Vertrauen in das Unternehmen geschaffen

ui-cta-footer
8.6. Footer und CTA

Ganz zum Schluss kann man direkt Kontakt zum Unternehmen aufnehmen durch die CTA und im Footer werden nochmal alle wichtigen Kontaktinformationen abgebildet

fazit
9

Fazit

Das Ziel war, eine benutzerfreundliche und budgetgerechte Website zu erstellen, die das Unternehmen und seine Angebote kompakt darstellt und als eine Art digitale Visitenkarte fungiert. Die Website bleibt innerhalb des Budgets, bietet eine intuitive Navigation und präsentiert alle wichtigen Informationen klar und übersichtlich. Die direkte Kommunikation sowie die Pflege der Produkte erfolgen weiterhin über Kleinanzeigen. Insgesamt wurde das Ziel erreicht, eine aktuelle und benutzerfreundliche Website zu konzipieren, die als digitale Visitenkarte dient. Die Umsetzung steht nun unmittelbar bevor und wird in WordPress realisiert.