En sammanhållen grund för Apotekets designsystem med Styleguide och UI-bibliotek av som underlättar och effektiviserar det på pågående utvecklingsarbetet i Apotekets tre multifunktionella team.

Renodling och tydliga rubrik- och texthierarkier var en central del i uppdraget. Implementeringen i kod hade vuxit ostrukturerat under de senaste åren, vilket innebar stora svårigheter och komplexitet i utvecklingsarbetet.

Under det pågående arbetet inleddes ett samarbete med kommunikationsateljén som bland annat ansvarar för skyltningsmaterial och kampanjer i butik. Behov att sammanlänka färgpaletten för digitalt och tryck identifierades.

Färgpaletten för tryck uppgraderas till WCAG standard med tydliga riktlinjer för tillgänglighetsanpassade rubriker och texter.

• Färgpaletten renodlades sammanlänkades för digitala och medier
• Homogen och konsekvent namnsättning av alla färger
• Analys och uppdatering av alla färgkoder för tillgänglighet / WCAG standard
• Framtagning av riktlinjer för rubrik och text enligt WCAG standard
• Optimerade förutsättningar för utvecklare för implementering av kod via utveckling av färgkategorier och teaman
• Förslag på förenklad funktionalitet med validering vid implementering av kod
• Förslag på tekniska förbättringar med validering av 100% kvalitetssäkring i kod
• Intern kunskapsspridning kring WCAG tillämpning
• Samsyn och ökad kommunikation mellan olika avdelningar som sparar tid och minimerar diskrepans

Ett tiotal utvalda undersidor valdes ut för kartläggning av detaljerade visuella komponenter, element och flöden som var i behov att uppdateras med input till Styleguide och UI Kit. Centralt var att detaljerna samspelar på både undersidor med många visuella detaljer som köpflöden, såväl som på undersidor med merparten textbaserat innehåll och information som artikelsidor.

Den ljusgröna färgen användes på merparten av designkomponenterna, vilket bidrog till ett stökigt, rörigt uttryck och statiskt uttryck. Navigeringen behöver moderniseras till färre ingångar, men det föll inte inom ramen av detta uppdrag som handlade om att renodla befintliga komponenter.

En användning av Apotekets mörkgröna färg gör att navigeringen håller bättre kontraster och tillgänglighetsanpssning. Den mörkgröna färgen i texten bidrar till ett mer lugnt intryck tillsammans med att renodlade detaljer så att innehållet lyfts fram och får komma i centrum.

Apotekets ljusgröna färg uppdaterades till att bli tillgänglighetsanpassad för användning i köpknappar.

Produktsidan renodlades med tydliga, färre och enhetliga rubrik- och texthierarkier. Detaljerade visuella komponenter anpassades till en helhet som är mer intuitiv med ökad tydlighet kring kampanjer, pris, jämförelsepris.

En konsekvent användning Apotekets ljusgröna färg i köpknappar som en framträdande färg. Den röda färgen för aktuellt pris tillgänglighetsanpassades. Ett lugnare uttryck med den mörkgröna länkfärgen och moderniserad och avskalad flik-komponent.

Sammantaget en uppdaterad visuell design som fokuserar på användaren och underlättar och leder användaren hela vägen fram till att slutföra köp.

En övergripande uppdatering och renodling av flödet och de visuella komponenterna med tydliga grupperingar och förtydligande av information som leder användaren till att ta sig igenom hela köpflödet.

Kassasidan särskiljes från övriga sidor med den vinröda färgen i sidhuvudet och i köpknapparna – Apotekets ljusgröna färg återkommer i visuella element från produktsidan och i ikoner och som en färg för att signalera aktivt val.

Köptriggande information och funktionalitet adderades.

Uppdaterad detaljerad design och riktlinjer för olika typer av designkomponenter och vyer med exempelvis produktkort och karuseller med tydliga specifikationer.

Framtagning av riktlinjer för bland annat tillgänglighet för att öka och förankra och sprida kunskapen inom området i teamen med vyer för mobilt och desktop.

Med utveckling av nya verktyg såg man behovet av förankring inom organisationen vad en Styleguide och ett UI Kit är samt framförallt den nytta och det värde som det resulterar i. En presentation planerades initialt för intern förankring med nyckelpersoner. I samband med det tog jag initiativ till att ta fram en poster som förtydligar nyttan och lockar till nyfikenhet.