UX- och UI-design för programvara för personalhantering

Design för professionell SaaS-plattform

SaaS

UX Design

UI Design

KLIENTTriopsis
PLATSLondon, UK
TEAMUX-designer, UI-designer, interaktionsdesigner, projektledare, produktägare, researcher
WEBBPLATS

Detta SaaS-verktyg används av allmännyttiga företag och vägunderhållsföretag för att effektivt planera insatser, hantera jobb och organisera team.

Efter att utvecklarna arbetat i flera år med en grafisk designer för att skapa användargränssnittet för SaaS, nådde de en punkt där frustrationen ackumulerades och förväntningarna hos potentiella nya kunder inte uppfylldes.

De anlitade vår UX-byrå för att bryta sig loss från den onda cirkeln av att fixa saker utan att bevittna tillväxt. De ville ha en användargränssnittsdesign som kunde fungera som en försäljningsargument för deras SaaS.

VÅRA BIDRAG

Requirements Mapping

Användarforskning

Benchmarking

UX Design

Prototypframställning

UI Design - Ljus och mörk

System för utformning

Kvalitetssäkring

Triopsis menu
Validated message
Validate button
Source button
Triopsis light background
Scheduler label
Triopsis top left actions
Triopsis board
Triopsis legend
Route validation label
Triopsis top right actions
Triopsis map
Source data label
Triopsis table
Abstract shape breaking the text in design case study

GRÄNSSNITTET VÄRT ATT BETALA FÖR

När användarupplevelsen av en SaaS erbjuder konkreta fördelar för användarna kan du ta mer betalt av dem.

Vi hjälpte vår kund att fastställa hur användargränssnittet för SaaS kan ge konkreta fördelar för användarna. Vi följde två vägar för att operationalisera dessa mål.

Den första vägen var användarundersökningar, där man tittade närmare på detaljer som hur lång tid varje uppgift tog, vanliga användarfel och andra problem som användarna stötte på.

Den andra vägen var deduktiv och gick ut på att föreställa sig en idealversion av arbetsflöden, där systemet är smidigare och de flesta faktorer som orsakar friktion inte existerar.

Systematiken i att samla in och organisera dessa detaljer är det som leder till de superpraktiska designdetaljer som användarna älskar.

HUR ANVÄNDARE FÅR PRAKTISKT VÄRDE FRÅN DESIGNDETALJER

Diagram grouping UI design decisions into value clusters

UX-DESIGN FÖR 3 TYPER AV ROLLER

Det fanns en spänning mellan motstridiga behov hos olika typer av användare.

En schemaläggare och en driftchef behöver till exempel se samma saker, men de använder dem på helt olika sätt. Men det kan också finnas spänningar mellan behoven hos en enskild användare.

Vi bröt ner allt som varje användare gör till mikrouppgifter för att översätta ett komplext landskap till relaterbara åtgärder för användaren. På så sätt kunde vi skapa lösningar för verkliga och praktiska användare i vardagen, snarare än generiska "användarbehov".

Diagram showing the goals of a SaaS user
Diagram showing the pain points of a SaaS user
Diagram describing a user person of a SaaS platform

VETENSKAPLIGA PRIMTAL UX- OCH UI-DESIGN

Design för SaaS är en process som omfattar tusentals enskilda beslut som tillsammans ger en helhetsbild. Besluten kan inte lämnas till känsla eller "talang". Det måste finnas en mer grundläggande förkärlek för praktiska beslut.

Evidensbaserad design är den process vi föredrar.

En grundläggande komponent i denna rationella och förutsägbara process är att samla in användbara fakta och data från så många källor som möjligt. Detta görs för att triangulera och organisera ett omfattande perspektiv på verkligheten och effekterna av designbeslut.

Även om användarundersökningar är en primär informationskälla för att utforma SaaS, måste andra källor som vetenskaplig forskning eller benchmarkingstudier komplettera den.

HUR VETENSKAPLIG FORSKNING PÅVERKAR DESIGNBESLUT

Diagram showing the implementation of scientific UX design

SUPER-PRAKTISKA DESIGNDETALJER SOM ÄLSKAS AV ANVÄNDARNA

Nyttan med designen för en SaaS-plattform härrör inte från estetik, utan från de små detaljerna som visar sig vara praktiska under faktisk SaaS-användning. Detta främjar anpassningen mellan ett komplext abstrakt system och de röriga invecklade detaljerna hos människor som arbetar i verkligheten.

De praktiska designdetaljer som förbättrar SaaS-användarupplevelsen kommer dock inte till genom gudomlig inspiration.

Istället är de resultatet av en noggrann och välorganiserad process som tar hänsyn till användarnas dagliga verklighet, människans psykologi, särskilt den digitala förmågan hos befolkningen i allmänhet, och beteendemönster som människor uppvisar när de är stressade, uttråkade eller trötta.

Screenshot of UI design for planning board in SaaS
Screenshot of UI design for jobs page in SaaS
Screenshot of the user interface design of a SaaS platform

SAAS-ARBETSFLÖDENA ANPASSAS TILL VARJE KUND

Vi övervägde också utformningen av SaaS utifrån ett arbetsflödesperspektiv, dvs. hur användarnas individuella handlingar sammantaget genererar resultat som efterfrågas av den organisation som anställer dem.

I praktiken innebar detta att man måste göra avvägningar mellan vad som fungerar bra på mikronivå i en uppgift och vad som ger sammanhang och effektivitet i den helhet som ett användargränssnitt för en SaaS utgör.

Det är här den föregående kartläggningen av användarbehov och organisatoriska processer tillför ett stort värde. Denna insats handlar om att välja och kombinera från ett generöst universum av designmöjligheter, med en klar bild av vad som måste uppnås för att SaaS ska vara värdefullt för kunderna.

Component showing the UX and UI design detail of a SaaS platform

INTERAKTIVA KOMPONENTER ÖKAR PRODUKTIVITETEN

Flytande interaktion där gränssnittet reagerar och anpassar sig kontinuerligt leder till förbättrad produktivitet. Användargränssnittet för en SaaS bör inte vara statiskt i ett rutnät.

Även om det designarbete som krävs för att producera interaktiva komponenter är komplext, kommer slutresultatet för användaren i form av minskad komplexitet eller kognitiv belastning när han eller hon interagerar med gränssnittet.

En aspekt som vi noggrant koncentrerade oss på var att upprätthålla samstämmigheten i dessa interaktioner när vi gick från idé till produktion. Detta innebar att vi kommunicerade interaktionerna både med prototyper i realtid som ger intressenterna en konkret känsla, och med diagram och dokumentation som illustrerar den systematiska logiken i interaktionerna för utvecklarna.

Example of UI design and interactions in SaaS dashboard
Example of UI design and interactions in SaaS dashboard

HUR VI SÄNKTE UTVECKLINGSKOSTNADERNA

Den slutliga användargränssnittsdesignen för SaaS är ett system av komponenter och beteenden som distribueras i sammanhang som konfigurationer av interaktiva element. Det är så användargränssnittet anpassar sig till användarnas behov.

Utvecklarna översatte detta system till kod och vi hjälpte dem med en rad åtgärder för att avlasta dem: - Individuella, väldokumenterade sidor som visar hur slutresultatet ska se ut. - Alla komponenter dokumenterades noggrant utan att någon detalj eller något tillstånd förbisågs. - Stöd under hela implementeringen i form av genomgångar, svar där hjälp behövs eller där kontroller ska göras.

På så sätt tog vi ansvar för slutresultatet, vilket går långt utöver att leverera enkel design. Detta stöd är obegränsat. I fallet med det här SaaS-projektet svarade vi på deras frågor i realtid, till och med ett år efter leveransen, när de fortfarande genomförde förändringar, som om vi var interna i deras team.

Screenshot of the UX design of a SaaS timeline dashboard
Design tool compass icon
Design System for the menu of a SaaS platform
Examples of UI components from design system for SaaS platform
Cover of design case study showing worker lift a pipe
Designelement

DESIGN FÖR PROFESSIONELLA SAAS

Utformningen av denna SaaS-plattform sammanför tre perspektiv: affärsstrategin för att förbli relevant för kunderna, användarnas dagliga behov och den tekniska färdplanen.

Designbesluten fattades systematiskt på grundval av att klargöra de konkreta konsekvenserna av de tre realiteterna och dessutom undersöka konsekvenserna av de olika avvägningarna mellan konkurrerande behov.

Den nya användarupplevelsen består av små detaljer som ger påtagliga förbättringar av vad användarna gör och hur de gör det, tillsammans med layouter som möjliggör flexibla arbetsflöden för organisationer med olika processer.

Genomförandet av designen gick smidigt eftersom den var tänkt som ett sammanhängande system och eftersom vi gav mycket stöd till utvecklarna. Detta stöd innebar att vi följde med dem under hela implementeringsperioden och hade en "kan-göra"-attityd när det gällde att lösa tekniska utmaningar.

A lot of effort and dedication went into this project. That is the only way to build a world-class SaaS design.

Har du ett projekt i åtanke?

Stilfull flicka med solglasögon
Stilfull flicka med solglasögon

Din guide till digital kompetens

Creative Navy är en toppbyrå för UX/UI-design i Sverige. Vi designar mobilappar, utvecklar webbgränssnitt och inbyggda enheter.

© Creative Navy LTD 2024

Excellence UI design illustration