Productinvoer Wetronic

Probleem

Werknemers van Wetronic welke verantwoordelijk zijn voor het invoeren van producten moet hiervoor werken in de back-end van Open Cart. Dit systeem is log, onoverzichtelijk en gevoelig voor fouten. Daarnaast is het voor nieuwe werknemers niet duidelijk wat ze nu wel en niet moeten invoeren, omdat er heel veel velden zijn die niet van toepassing zijn.

Oplossing

Een gebruiksvriendelijke omgeving waarbij de gebruiker alleen de juiste velden te zien krijgt voor het in te voeren product. Waarbij de kans op fouten maken zo klein mogelijk is.

Gebruikte tools

Flows

Om het proces goed in beeld te brengen heb ik twee flows in elkaar gezet welke de keuzes van een werknemer weergeven.

De bovenste toont het complete proces, waarbij het product invoeren in algemene lijn is uitgewerkt. De overige keuzes kunnen in een volgend stadium op eenzelfde manier worden uitgewerkt.

De flow is gebaseerd op de huidige en gewenste werkwijze.

Daaronder staat het uitgewerkte stappenplan van het toevoegen van een nieuw product. Deze is omlijnd in de hoofd-flow.

Persona's

Om een goed beeld te krijgen van de mogelijke mensen die werken voor Wetronic heb ik drie verschillende persona’s uitgewerkt.

We kijken hier naar een weekendhulp, kantoormedewerker en vast personeel van de winkel, in dit geval een winkelmanager.

Al deze mensen moeten de mogelijkheid hebben om een product in te kunnen voeren. Met een (nu) klein team, worden deze taken verdeeld onder het personeel.

Schetsen

Als eerst gingen we het oude ontwerp bekijken, welke meer dan een jaar geleden is ontwikkeld in Adobe XD. Hier zijn we in gaan schuiven en hebben we diverse notities bij gezet.

Op basis daarvan ben ik gaan schetsen, eerst vergelijkbaar met wat er nu was en daarna een nieuw ontwerp. Dit heb ik uitgewerkt in het UX/UI Designbook van Bambook, dit is een whiteboard schrift, waardoor je gemaakte schetsen simpel kan uitwissen zodra je ze niet meer nodig hebt.

Dit nieuwe ontwerp heb ik uitgewerkt in wireframes.

Wireframes

Op basis van de schetsen zijn de volgende wireframes ontwikkeld.

Dashboard
Het dashboard is gebaseerd op het huidige dashboard. Hier is in één oogopslag te zien hoeveel producten er in het systeem staan, welke er nieuw zijn toegevoegd, hoeveel er recent een prijswijziging hebben gehad en hoeveel producten er incomplete informatie is.

Productinvoer
Dit scherm bevat alle velden die er voor één product ingevoerd moeten worden. Links staat een snelmenu welke meescrollt met de gebruiker. Dit zorgt voor snelle navigatie op de pagina. Hetzelfde geldt voor de knop waarmee de gebruiker altijd terug kan naar de bovenkant van de pagina.

Volgorde velden
Op basis van de informatie die een medewerker voor zich heeft is de volgorde van deze pagina bepaald. Beginnen met merk en productnaam, daarna alle technische gegevens en de verdere details van het product. Alle belangrijke gegevens staan bovenaan (minimale gegevens om een order te kunnen plaatsen), alle andere gegevens als afbeeldingen en informatie staan lager.

Automatisch gegenereerd
De productnamen en seo gegevens worden gegenereerd op basis van de technische gegevens. Deze hoeft de medewerker alleen maar te controleren.

Pop-up
Zodra de medewerker besluit om weg te gaan van dit venster krijgt deze de waarschuwing om de wijzigingen op te slaan indien dit nog niet automatisch is gebeurd.

Future notes

Vervolgstappen van dit project zijn het omzetten van de wireframes naar low-fi design, het testen van het low-fi ontwerp, iteraties doorvoeren, high-fi ontwerp realiseren en doorzetten met begeleidend schrijven naar de developers.