![](/media/o1bjezx0/hero_sysavwebb.png?width=1728&height=710&format=png&v=1dab8bf64b26c50)
![](/media/jmxmjkoe/hero_sysavwebb_mobil.png?width=390&height=341&format=png&v=1dab8c800cb1490)
Nyutveckling av webbplats
Blinka Blå fick i uppdrag att ta fram en helt ny webbplats till Sysav som följer Tillgänglighetsdirektivet och framtidssäkrad för NIS2-direktivet.
Uppdraget innebar att välja en säker plattform och arkitektur med begränsade personuppgifter och hög säkerhet enligt GDPR och NIS2 – och att ta fram en UX-design enligt Tillgänglighetsdirektivet.
Sysavs webbplats ska hålla information och funktion för flera olika målgrupper: privatpersoner i 14 ägarkommuner och hushåll i tre kommuner med sophämtning, företagskunder, kommuner, skolor och pedagoger.
![Sysav logga](/media/dfaape5z/f83fdba428f5f5840e117e40b333d5ee.png)
I uppdraget ingick:
- UX-design
- Tillgänglighetsdirektivet / NIS2 / GDPR
- Umbraco CMS 13
- Azure Container Apps
- BankId. FrejaId, Microsoft Entra Id
Designprocessen
- Steg ett: inventering av all information som Sysav kommunicerade digitalt tillsammans med en målgruppsanalys och revidering av informationsstrukturen.
- Steg två: identifiera alla use case och user stories som vi skulle designa UX för. Blinka faciliterade dessa workshops med kund.
- Steg tre: wireframes baserat på en hierakisk informationsmodell med vilka datakällor som skulle föda vilka ytor med information – och säkerställa att dessa svarade mot våra use case och user stories. Detta arbete gjordes som en klickbar prototyp i Figma som samtliga stakeholders i projektet kunde kommentera i.
- Steg fyra: uppsättning av det tillgängliga designsystemet.
- Steg fem: visualisera informationen och designen för samtliga sidmallar. Även detta steg presenterades i Figma som klickbar prototyp.
![](/media/g0hpuipd/ikoner.png?width=1550&height=885&format=png&v=1dab5ac61776d30)
![](/media/vjwe4ktu/buttons.png?cc=0.06979364190201609,0.17869468479217676,0.06979364190201609,0.16599364486418194&width=1550&height=885&format=png&v=1dac653f688da00)
![](/media/beilfqvu/colour_palette.png?width=1550&height=885&format=png&v=1dac6547a188230)
![](/media/t0dak040/sorteringsguiden_start.png?width=1550&height=885&format=png&v=1dac7abd245b650)
![](/media/3qlgyu5f/återvinnningscentraler.png?width=1550&height=885&format=png&v=1dac7abd28ad5a0)
![](/media/wh3nhlef/sök.png?width=1550&height=885&format=png&v=1dac7abd270e500)
![](/media/clpmyi55/sorteringsguiden.png?width=1550&height=885&format=png&v=1dac7b7b2a6cf30)