Webbgränssnittet – en modernare och mer enhetlig upplevelse
Webbgränssnittet – en modernare och mer enhetlig upplevelse
Webbgränssnittet – en modernare och mer enhetlig upplevelse
En modernisering av Heromas webbgränssnitt med fokus på tydligare struktur, konsekventa interaktioner och ett gemensamt visuellt uttryck, baserat på CGI globala komponentbibliotek.
Projektet i korthet
Projektet i korthet
Utmaningen
Ett omfattande system med många funktioner och komplexa arbetsflöden.
Behov av ett mer sammanhängande och modernt gränssnitt.
Skapa konsekvens utan att förlora funktionalitet.
Lösning & designbeslut
Utgå från CGI globala komponentbibliotek.
Anpassa komponenter och interaktionsmönster till Heromas behov.
Skapa tydligare visuell hierarki och mer konsekventa gränssnitt.
Min roll
UX/UI-design och utformning av gränssnitt.
Anpassning av komponenter och designprinciper.
Designgranskning och stöd i implementeringen.
Resultat & status
Ett moderniserat webbgränssnitt baserat på ett gemensamt komponentbibliotek.
Mer konsekvent visuellt uttryck mellan olika delar av Heroma.
Det nya webbgränssnittet är lanserat.
Bakgrund
Heroma är ett omfattande HR- och lönesystem med många funktioner, användarroller och arbetsflöden. När ett system utvecklas under lång tid kan skillnader i gränssnitt och interaktionsmönster göra upplevelsen mindre sammanhängande.
Moderniseringen av webbgränssnittet innebar att gå från ett tidigare eget komponentbibliotek till CGI globala bibliotek.
Arbetet handlade därför inte bara om ett nytt visuellt uttryck, utan också om att anpassa gemensamma komponenter och designprinciper till Heromas specifika behov och komplexitet.
Bakgrund
Heroma är ett omfattande HR- och lönesystem med många funktioner, användarroller och arbetsflöden. När ett system utvecklas under lång tid kan skillnader i gränssnitt och interaktionsmönster göra upplevelsen mindre sammanhängande.
Moderniseringen av webbgränssnittet innebar att gå från ett tidigare eget komponentbibliotek till CGI globala bibliotek.
Arbetet handlade därför inte bara om ett nytt visuellt uttryck, utan också om att anpassa gemensamma komponenter och designprinciper till Heromas specifika behov och komplexitet.
Bakgrund
Heroma är ett omfattande HR- och lönesystem med många funktioner, användarroller och arbetsflöden. När ett system utvecklas under lång tid kan skillnader i gränssnitt och interaktionsmönster göra upplevelsen mindre sammanhängande.
Moderniseringen av webbgränssnittet innebar att gå från ett tidigare eget komponentbibliotek till CGI globala bibliotek.
Arbetet handlade därför inte bara om ett nytt visuellt uttryck, utan också om att anpassa gemensamma komponenter och designprinciper till Heromas specifika behov och komplexitet.
Process
Från användarnas behov till en testad lösning genom en iterativ designprocess.
Karläggning
Identifiera befintliga gränssnitt, komponenter och behov av anpassning.
Analys
Utvärdera hur CGI globala komponentbibliotek kan användas i Heroma.
Design
Utforma gränssnitt och anpassa komponenter till systemets funktioner.
Förankring
Granska designbeslut och samordna lösningar med utvecklingsteamet.
Implementering
Stödja införandet av ett mer enhetligt webbgränssnitt.
Pilot
Utvärdering med chefer hos utvalda kunder.
Vidareutveckling
Förbättringar utifrån återkoppling och fortsatt utveckling.
Process
Från användarnas behov till en testad lösning genom en iterativ designprocess.
Karläggning
Identifiera befintliga gränssnitt, komponenter och behov av anpassning.
Analys
Insikter och problem
Design
Utforma gränssnitt och anpassa komponenter till systemets funktioner.
Förankring
Granska designbeslut och samordna lösningar med utvecklingsteamet.
Implementering
Stödja införandet av ett mer enhetligt webbgränssnitt.
Pilot
Utvärdering med chefer hos utvalda kunder.
Vidareutveckling
Förbättringar utifrån återkoppling och fortsatt utveckling.
Process
Från användarnas behov till en testad lösning genom en iterativ designprocess.
Karläggning
Identifiera befintliga gränssnitt, komponenter och behov av anpassning.
Analys
Utvärdera hur CGI globala komponentbibliotek kan användas i Heroma.
Design
Utforma gränssnitt och anpassa komponenter till systemets funktioner.
Förankring
Granska designbeslut och samordna lösningar med utvecklingsteamet.
Implementering
Stödja införandet av ett mer enhetligt webbgränssnitt.
Pilot
Utvärdering med chefer hos utvalda kunder.
Vidareutveckling
Förbättringar utifrån återkoppling och fortsatt utveckling.
Viktiga insikter
Ett gemensamt komponentbibliotek skapar förutsättningar för konsekvens, men behöver anpassas till produktens faktiska behov.
Komplexa system kräver en tydlig visuell hierarki för att användaren ska kunna orientera sig.
Konsekventa komponenter och interaktionsmönster gör gränssnittet mer förutsägbart.
Modernisering behöver balansera ett nytt visuellt uttryck med befintliga funktioner och arbetsflöden.
Problemformulering
Hur kan vi modernisera ett omfattande och komplext webbgränssnitt med hjälp av gemensamma designprinciper, samtidigt som vi behåller den funktionalitet och flexibilitet som användarna behöver?
Viktiga insikter
Ett gemensamt komponentbibliotek skapar förutsättningar för konsekvens, men behöver anpassas till produktens faktiska behov.
Komplexa system kräver en tydlig visuell hierarki för att användaren ska kunna orientera sig.
Konsekventa komponenter och interaktionsmönster gör gränssnittet mer förutsägbart.
Modernisering behöver balansera ett nytt visuellt uttryck med befintliga funktioner och arbetsflöden.
Problemformulering
Hur kan vi modernisera ett omfattande och komplext webbgränssnitt med hjälp av gemensamma designprinciper, samtidigt som vi behåller den funktionalitet och flexibilitet som användarna behöver?
Viktiga insikter
Ett gemensamt komponentbibliotek skapar förutsättningar för konsekvens, men behöver anpassas till produktens faktiska behov.
Komplexa system kräver en tydlig visuell hierarki för att användaren ska kunna orientera sig.
Konsekventa komponenter och interaktionsmönster gör gränssnittet mer förutsägbart.
Modernisering behöver balansera ett nytt visuellt uttryck med befintliga funktioner och arbetsflöden.
Problemformulering
Hur kan vi modernisera ett omfattande och komplext webbgränssnitt med hjälp av gemensamma designprinciper, samtidigt som vi behåller den funktionalitet och flexibilitet som användarna behöver?
Lösning & designbeslut
En mobilapp där styrelsemedlemmen får tillgång till sina styrelser och kan hantera information, möten och uppgifter i ett sammanhängande gränssnitt.
Överblick över flera styrelser
Användaren kan se sina styrelseuppdrag och navigera mellan dem.
Designen fokuserar på att skapa ett tydligt sammanhang, så att det blir enkelt att förstå vilken styrelse och vilken information användaren arbetar med.
Möten, uppgifter och godkännanden
Appen samlar information om styrelsemöten, inklusive bokning och mötesplatser, tillsammans med uppgifter och godkännanden.
Genom att organisera funktionerna i tydliga flöden får användaren bättre förutsättningar att hitta och hantera aktuella ärenden.
Dokument och historisk information
Styrelsemedlemmar kan ta del av PDF-dokument, affidavits och söka efter historiska rapporter.
Designen behöver göra informationen tillgänglig och sökbar utan att belasta appens huvudsakliga navigation.
Lösning & designbeslut
En mobilapp där styrelsemedlemmen får tillgång till sina styrelser och kan hantera information, möten och uppgifter i ett sammanhängande gränssnitt.
Överblick över flera styrelser
Användaren kan se sina styrelseuppdrag och navigera mellan dem.
Designen fokuserar på att skapa ett tydligt sammanhang, så att det blir enkelt att förstå vilken styrelse och vilken information användaren arbetar med.
Möten, uppgifter och godkännanden
Appen samlar information om styrelsemöten, inklusive bokning och mötesplatser, tillsammans med uppgifter och godkännanden.
Genom att organisera funktionerna i tydliga flöden får användaren bättre förutsättningar att hitta och hantera aktuella ärenden.
Dokument och historisk information
Styrelsemedlemmar kan ta del av PDF-dokument, affidavits och söka efter historiska rapporter.
Designen behöver göra informationen tillgänglig och sökbar utan att belasta appens huvudsakliga navigation.
Lösning & designbeslut
En mobilapp där styrelsemedlemmen får tillgång till sina styrelser och kan hantera information, möten och uppgifter i ett sammanhängande gränssnitt.
Överblick över flera styrelser
Användaren kan se sina styrelseuppdrag och navigera mellan dem.
Designen fokuserar på att skapa ett tydligt sammanhang, så att det blir enkelt att förstå vilken styrelse och vilken information användaren arbetar med.
Möten, uppgifter och godkännanden
Appen samlar information om styrelsemöten, inklusive bokning och mötesplatser, tillsammans med uppgifter och godkännanden.
Genom att organisera funktionerna i tydliga flöden får användaren bättre förutsättningar att hitta och hantera aktuella ärenden.
Dokument och historisk information
Styrelsemedlemmar kan ta del av PDF-dokument, affidavits och söka efter historiska rapporter.
Designen behöver göra informationen tillgänglig och sökbar utan att belasta appens huvudsakliga navigation.
Resultat
Det moderniserade gränssnittet används i Heroma.
CGI globala komponentbibliotek ligger till grund för gränssnittets visuella uttryck.
Komponenter och interaktionsmönster har anpassats till Heromas funktioner och behov.
Gemensamma designprinciper ger bättre förutsättningar för en sammanhängande användarupplevelse och fortsatt utveckling.
Resultat
Det moderniserade gränssnittet används i Heroma.
CGI globala komponentbibliotek ligger till grund för gränssnittets visuella uttryck.
Komponenter och interaktionsmönster har anpassats till Heromas funktioner och behov.
Gemensamma designprinciper ger bättre förutsättningar för en sammanhängande användarupplevelse och fortsatt utveckling.
Resultat
Det moderniserade gränssnittet används i Heroma.
CGI globala komponentbibliotek ligger till grund för gränssnittets visuella uttryck.
Komponenter och interaktionsmönster har anpassats till Heromas funktioner och behov.
Gemensamma designprinciper ger bättre förutsättningar för en sammanhängande användarupplevelse och fortsatt utveckling.
Reflektion
Att modernisera ett etablerat system innebär andra utmaningar än att designa en ny produkt från grunden. Befintliga funktioner, tekniska förutsättningar och användarnas arbetssätt behöver fungera tillsammans med nya designprinciper.
En viktig del av arbetet var att hitta balansen mellan standardisering och de anpassningar som krävs i ett komplext verksamhetssystem.
Ett gemensamt komponentbibliotek skapar grunden för konsekvens, men det är genom genomtänkta designbeslut som det blir en sammanhängande användarupplevelse.
Reflektion
Att modernisera ett etablerat system innebär andra utmaningar än att designa en ny produkt från grunden. Befintliga funktioner, tekniska förutsättningar och användarnas arbetssätt behöver fungera tillsammans med nya designprinciper.
En viktig del av arbetet var att hitta balansen mellan standardisering och de anpassningar som krävs i ett komplext verksamhetssystem.
Ett gemensamt komponentbibliotek skapar grunden för konsekvens, men det är genom genomtänkta designbeslut som det blir en sammanhängande användarupplevelse.
Reflektion
Att modernisera ett etablerat system innebär andra utmaningar än att designa en ny produkt från grunden. Befintliga funktioner, tekniska förutsättningar och användarnas arbetssätt behöver fungera tillsammans med nya designprinciper.
En viktig del av arbetet var att hitta balansen mellan standardisering och de anpassningar som krävs i ett komplext verksamhetssystem.
Ett gemensamt komponentbibliotek skapar grunden för konsekvens, men det är genom genomtänkta designbeslut som det blir en sammanhängande användarupplevelse.