Auchan UX/UI és design system – esettanulmány

//Esettanulmányok

Beszerzési folyamat digitalizálása – komplex vállalati működés egy átlátható alkalmazásban

Az Auchan zöldség-gyümölcs beszerzési folyamatainak támogatására egy böngészőben futó, belső használatú alkalmazás UX/UI tervezése készült el. A cél az volt, hogy a korábban Excel-táblákban kezelt, összetett és részben dokumentált folyamat egy átlátható, skálázható és később más osztályok számára is újrahasznosítható digitális rendszerbe kerüljön.

UX/UI design

Enterprise alkalmazástervezés

Folyamatfelmérés

Design system

Material Design alapú UI

Wireframing

Komponensrendszer

Data table UX

Szűrőrendszer tervezés

Sitebuild

Fejlesztési támogatás

Belső vállalati alkalmazás

// Együttműködés

Közös munka

// Auchan

Projektötlet

A zöldség-gyümölcs beszerzés korábban jelentős részben Excel-táblákban zajlott, miközben maga a folyamat rendkívül összetett volt, körülbelül 25 különböző fázisból állt. A folyamat dokumentálása csak részben volt elérhető, az egyes lépések és döntési pontok közötti összefüggések pedig nem minden esetben voltak egyértelműen tisztázva. A projekt célja egy olyan böngészőben futó alkalmazás megtervezése volt, amely egy közös rendszerbe tereli a teljes beszerzési folyamatot, támogatja az automatizálást, és a beszerzők számára minden releváns döntési adatot egy felületen tesz elérhetővé.

// Alapdesign

A mi feladatunk

A munka első lépése egy részletes felmérési időszak volt, amelynek során a meglévő folyamatok, szerepkörök, adatkapcsolatok és használati helyzetek feltérképezése történt meg. Ezt követte a fenntartható UX-célok meghatározása, majd egy Material Design alapokra épülő, később bővíthető design system kialakítása. A tervezési folyamat részeként wireframe-ek, UI-komponensek, adattáblák, szűrőrendszerek és komplex munkafelületek készültek. A legnagyobb kihívást az jelentette, hogy egy felületen rendkívül sok és sokféle adatnak kellett megjeleníthetőnek maradnia úgy, hogy a rendszer közben intuitív, átlátható és hosszú távon is fejleszthető legyen.

// Alapdesign

Közös stratégia

A projekt kulcsa az volt, hogy a rendszer ne csupán digitális felületet adjon a meglévő folyamatoknak, hanem valóban strukturálja és egyszerűsítse is a mindennapi munkát. A UX-tervezés során a komplex beszerzési folyamatot olyan munkafelületekre bontottuk, amelyek csökkentik a felesleges elnavigálást, egy helyre gyűjtik a döntéshez szükséges információkat, és támogatják a gyors szűrést, összehasonlítást és adatértelmezést. A design system és a komponensalapú sitebuild célja az volt, hogy az alkalmazás ne csak az aktuális zöldség-gyümölcs beszerzési folyamatot szolgálja ki, hanem később más üzleti területek számára is stabil alapként legyen használható.

// Funkcionális megoldások

Fő funkciók

Komplex beszerzési folyamat leképezése

A rendszer képes volt egy több fázisból álló, összetett beszerzési folyamatot átlátható digitális munkafolyamattá alakítani.

Döntéstámogató adatfelületek

A beszerzők számára a legfontosabb döntési adatok egy közös felületen váltak elérhetővé, csökkentve az Excel-fájlok és különálló információforrások használatát.

Fejlett adattábla-rendszer

A nagy mennyiségű és sokféle adat kezeléséhez olyan data table logika készült, amely egyszerre támogatja az áttekinthetőséget, a gyors keresést és a részletes adatelemzést.

Többszintű szűrési logika

Az alkalmazás különböző szűrési módokat támogatott, például adatalapú, oszlop szerinti és időszaki szűréseket, menthető beállításokkal.

Újrahasznosítható design system

A Material Design alapokra épülő komponensrendszer célja az volt, hogy más belső vállalati alkalmazásoknál is újra felhasználható alapot biztosítson.

Fenntartható sitebuild alapok

A sitebuild felépítése nemcsak az aktuális felület elkészítését szolgálta, hanem a későbbi bővítések, módosítások és fejlesztői átadások támogatását is.

// Arculati alapok

Márkaarculat

Ebben a projektben a márkaarculat szerepe elsősorban nem klasszikus marketingoldali megjelenést jelentett, hanem egy nagyvállalati környezethez illeszkedő, professzionális és funkcionális felületi világ kialakítását. A cél egy letisztult, megbízható, könnyen értelmezhető alkalmazásdesign volt, amely nem vonja el a figyelmet a munkavégzésről, hanem támogatja az adatvezérelt döntéseket. A Material Design alapú megközelítés biztosította az egységes komponenshasználatot, a következetes interakciókat és a későbbi skálázhatóságot.

#B20012

#FFF1EF

#B02D29

#FF665C

#FF5400

#FFFFFF

#814A00

// Weboldal részletek

Kiemelt weboldal elemek

Beszerzési folyamatot támogató fő munkafelület

Az alkalmazás központi felülete úgy készült, hogy a beszerzők minél kevesebb elnavigálással férjenek hozzá a munkájukhoz szükséges információkhoz. A cél a gyors értelmezhetőség és a döntési helyzetek támogatása volt.

Összetett data table komponensek

Az adattáblák kialakításánál kiemelt szempont volt, hogy nagy mennyiségű adat is kezelhető maradjon. A táblázatos nézetek a szűrések, oszlopkezelések és különböző adatállapotok megjelenítésére is fel lettek készítve.

Menthető és intuitív szűrőrendszer

A felhasználók számára olyan szűrési logika készült, amely nemcsak gyors keresést tesz lehetővé, hanem a visszatérő munkafolyamatok támogatására menthető beállításokat is biztosíthat.

Komponensalapú UI-készlet

A felület mögött egy egységes UI-komponensrendszer készült, amely segíti a fejlesztést, az új képernyők létrehozását és a későbbi vállalati alkalmazások tervezését is.

Eredmények

// 01

Excel-alapú működésből strukturált digitális folyamat

A projekt eredményeként egy korábban táblázatokban kezelt, nehezen átlátható folyamat egységes alkalmazáslogikába került. Ez megteremtette az alapot a jobb nyomon követéshez, dokumentálhatósághoz és automatizálhatósághoz.

// 02

Újrahasznosítható vállalati design system

A kialakított design system nemcsak az adott alkalmazáshoz készült, hanem olyan alapként, amely más hasonló belső rendszereknél is felhasználható. Ez hosszú távon gyorsabb és következetesebb fejlesztést tesz lehetővé.

// 03

Hatékonyabb munkavégzés kevesebb elnavigálással

A felhasználói felületek célja az volt, hogy a beszerzők egy helyen lássák a döntéshez szükséges információkat, és a mindennapi feladataikat kevesebb képernyőváltással, gyorsabban tudják elvégezni.

// 04

Fenntartható komponensrendszer fejlesztői oldalról

A sitebuild és a kapcsolódó fejlesztési felügyelet olyan komponensrendszer kialakítását támogatta, amely hosszú távon is bővíthető, karbantartható és más fejlesztők számára is követhető marad.

// Projektfolyamat

Idővonal

Idővonal — Auchan

Felmérés

1,5 hónap

UX tervezés

1 hónap

UI tervezés