- UX/UI Design,
- Design System,
- MedTech
Om projektet
Mentice utvecklar simuleringslösningar för endovaskulär terapi och används av sjukhus, medicintekniska bolag och läkemedelsföretag världen över. Ankyras är deras kliniska beslutsstöd för neurovaskulär vård: ett verktyg som ger detaljerade anatomiska insikter och låter läkaren simulera hur en flödesdiverterare placeras, för att bedöma rätt storlek och position innan ett hjärnaneurysm behandlas. Mentice hade tagit fram en ny version av produkten med mockuper som redan låg nära rätt i flöde och övergripande UX, men som behövde professionell UX/UI-design för att bli färdig. Vårt uppdrag var att slutföra och kvalitetssäkra gränssnittet inför överlämningen till utveckling, med den noggrannhet som krävs av ett regulatoriskt reglerat verktyg och med en användargrupp av specialistläkare i åtanke.
Ett flöde som visar var du är
Att förbereda ett fall i Ankyras är en sekventiell uppgift. Kärlmodellen skapas, ytan justeras, morfologin mäts, och först därefter går det att simulera stentar och flödesdiverterare. Vi gjorde den ordningen synlig med en stegindikator, samma mönster som användarna känner igen från kassaflöden och längre formulär i andra system.
De fyra momenten numrerades och fick var sitt tillstånd: avklarat, pågående och ännu inte tillgängligt. Varje steg fick också en rubrik och en mening som säger vad som ska göras, i stället för en verktygslåda att tolka. Av tillgänglighetsskäl kodas tillståndet med siffra, färg och understrykning tillsammans, så det går fram även för den som inte uppfattar färgskillnader.
Redigering intill modellen
Ett annat ställe i flödet vi förbättrade är den manuella redigeringen av kärlytan. Här arbetar användaren direkt på 3D-modellen, och därför lämnade vi inte verktyget i sidopanelen tillsammans med allt annat. Vi la det i vyn, intill modellen som ska ändras. Skälet är avståndet mellan där blicken är och var verktyget finns. Placeras det i en panel vid sidan om delas uppgiften på två platser, en där man väljer och en där man ser resultatet. Med verktygsfältet i vyn hamnar båda på samma ställe, i det sammanhang där handlingen utförs.
Själva redigeringen stöttas av tre saker. En tooltip förklarar vad som ska göras första gången någon går in i läget. Det man markerar färgas innan det tas bort, så urvalet syns medan det fortfarande går att ändra sig. Och när åtgärden är genomförd bekräftar systemet att den gick igenom, eftersom en liten förändring i en 3D-modell annars är lätt att missa.
Ett designsystem anpassat för Unity
Mentice hade sedan tidigare ett designsystem från oss. Vi gick igenom och uppdaterade det i Figma så att det täcker allt Ankyras behöver, från färg, typografi och ikonografi till knappar, dropdowns, flikar och inmatningsfält.
Ankyras gränssnitt byggs i Unity, så varje komponent fick också en exportuppsättning för Unity, med grafik per tillstånd byggd på samma variabler som designkomponenterna. Utvecklaren hämtar den rakt in i Unity utan att tolka om designen.
Nyckelinsikter
Ett kliniskt beslutsstöd ställer andra krav än en konsumentprodukt. Användarna är specialister som fattar beslut med stora konsekvenser, ofta under tidspress, och gränssnittet måste vara begripligt utan att behöva förklaras. Vi valde därför att lösa så mycket som möjligt med etablerade mönster i stället för nya idéer, och att lägga kraften på hierarki, tillstånd och enhetlighet snarare än på ny funktionalitet.
Kundens egna ord
❝ Sedan lanseringen av den nya versionen av Ankyras i Europa, som Intunio hjälpte oss att designa, har vi fått väldigt positiv feedback på gränssnittet. Användarna tycker att det är mycket bättre och enklare att använda än den tidigare versionen. Vi lärde oss också väldigt mycket av att jobba med Intunio och har nu ett mycket bättre tänk kring UI design.
Martina Andreasson
Product Marketing Manager, Mentice AB
Gillar du det vi gör?
Tveka inte att dela din nästa idé med oss. Vi ser fram emot att lära känna dig bättre och att utforska vad vi kan skapa tillsammans.
