← Alle cases
WorkPoint

Case · WorkPoint 365

Design System 2.0.
Ét sprog i alle produkter.

WorkPoint 365 giver struktur på projekter, sager, kontrakter og dokumenter i Microsoft 365. Vores samarbejde med WorkPoint har strakt sig over mere end to år og flere projekter. Inde i produktteamene har vi designet funktioner i Core, Automate og Express 365 og progress flowet til processer. Den røde tråd gennem det hele er Design System 2.0: et fælles fundament, så alle produkterne ser ens ud, læses ens og opfører sig ens.

Start dit projekt

2.0

næste version af designsystemet

3

produkter: Core, Automate, Express 365

M365

SharePoint, Teams og Outlook

2+

års samarbejde på tværs af flere projekter

Skærmbillederne på siden er vores eget bud på en ny version af WorkPoint. De findes ikke i produktet i dag.

Udfordringen

Tre produkter, der var vokset op hver for sig.

Core, Automate og Express 365 var bygget af forskellige teams på forskellige tidspunkter. Hvert produkt havde sine egne knapper, sine egne formularer og sin egen måde at vise status på. For brugere, der bevæger sig mellem SharePoint, Teams og Outlook, føltes platformen som tre værktøjer i stedet for ét.

01

En del af teamet

I over to år har vi arbejdet i WorkPoints sprints, side om side med produktchefer, arkitekter og udviklere, så beslutningerne blev taget der, hvor koden blev skrevet.

02

Ét fundament

Farver, typografi, afstande og tilstande defineret én gang som tokens og brugt af alle produkter.

03

Hjemme i Microsoft 365

WorkPoint lever inde i SharePoint, Teams og Outlook. Systemet skulle føles naturligt der, ikke skruet på.

04

Klar til at bygge

Hver komponent er specificeret med alle sine tilstande, så udviklerne kunne bygge direkte efter den.

Design System 2.0

Ét fælles fundament, så platformen føles som én.

Design System 2.0 er næste skridt for WorkPoints designsprog. I stedet for at hvert produkt løser de samme problemer på sin egen måde, giver systemet teamene ét sæt byggeklodser: de samme farver, den samme typografi, de samme komponenter og de samme mønstre for navigation, metadata, status og processer.

For brugerne betyder det, at et projekt i Core, en godkendelse i Automate og en mail i Express 365 læses på samme måde. For WorkPoint betyder det, at nye funktioner bliver designet og bygget hurtigere, med færre beslutninger, der skal tages forfra, og færre detaljer, der skal rettes bagefter.

  • Ens på tværs af produkter

    En knap, et felt eller en status ser ens ud og virker ens i SharePoint, Teams og Outlook.

  • Bygget på tokens

    Farver, typografi og afstande er navngivet én gang og deles af design og kode, så en ændring når ud i alle produkter.

  • Tilstande med én betydning

    Fuldført, afventer input, kører, venter og fejlet betyder det samme overalt.

  • Plads til at vokse

    Nye produkter og funktioner starter fra systemet i stedet for fra et blankt ark.

Moods

Et blik ind i Design System 2.0.

Ikke hele dokumentationen, men idéerne bag: brandfarverne udvidet til hele skalaer, en klar typografisk skala, ét sæt tilstande og komponenter, der går igen på tværs af produkterne.

Typografi: Montserrat til overskrifter, Open Sans til brugerfladen.
Farver: orange og blå fra WorkPoints mærke, i ti trin hver.
Tilstande: fem, med én betydning overalt.
De samme komponenter i Core, Automate og Express 365.

Progress flow

En proces, man kan følge trin for trin.

Vi designede det progress flow, der guider brugerne gennem processer i WorkPoint 365, fx når et nyt projekt skal oprettes. Trinene står til højre, så man altid ved, hvor man er, hvad der er gjort, hvad WorkPoint gør for en, og hvad der kommer bagefter. Her er det vist i Design System 2.0.

Ved altid, hvor man er

Hvert trin viser sin tilstand, og fremdriftsbjælken viser, hvor langt man er.

Manuelle og automatiske trin

Trin, brugeren udfylder, og trin, WorkPoint selv kører, står i samme flow, med en tydelig forskel på dem.

Regler bygget ind

Er budgettet over grænsen, tilføjer processen et trin med begrundelse og en godkender.

Vores eget bud på WorkPoint 2.0, der kører af sig selv.

Produkterne

Ét system, tre produkter.

Hvert produkt har sine egne brugere og sin egen opgave. Design System 2.0 er det, de deler.

WorkPoint CoreStruktur og governanceSamler og strukturerer data og dokumenter på tværs af forretningsområder, med nedarvning, skabeloner og sikkerhedsregler.
WorkPoint AutomateProcesser og formularerWorkflows med triggere, betingelser og handlinger og mobilvenlige formularer, som også kan startes fra Teams.
WorkPoint Express 365Mail i OutlookEt Outlook-add-in, der arkiverer mails på den rigtige sag, opretter sager fra henvendelser og bruger AI på indbakken.

Det siger WorkPoint

At få Ceptivs designer ind i vores teams var en af de bedste beslutninger, vi har truffet for produktet. Core, Automate og Express 365 har meget forskellige brugere, og Ceptiv gav dem ét klart designsprog, der stadig føles hjemme i Microsoft 365. De forstod hurtigt vores arkitektur, udfordrede os på de detaljer, der betyder noget for brugerne, og gav vores udviklere specifikationer, de kunne bygge direkte efter. Resultatet er en platform, der er nemmere at bruge, nemmere at demonstrere og hurtigere at udvide. Jeg kan varmt anbefale Ceptiv til enhver softwarevirksomhed, der har brug for erfaren designkapacitet inde i teamet.
DCDominic CosgroveCTO · WorkPointWorkPoint

Det leverede vi

To år, flere projekter, én platform.

  1. 01Design System 2.0: tokens, komponenter og mønstre
  2. 02Progress flowet til processer i WorkPoint 365
  3. 03Fælles mønstre for metadata, status og adgang
  4. 04Konceptskærme til en ny version af WorkPoint
  5. 05Specifikationer med alle tilstande, klar til udviklerne
  6. 06Designsparring på stedet med produkt og udvikling, projekt efter projekt

Skal jeres produkt have et designsystem?

Vi bygger designsystemer og sætter erfarne UI- og UX-designere ind i softwareteams, på stedet eller remote, så længe I har brug for dem.

Start dit projektAlle cases