MultiKEY

Modul 5 – Digitale Brugergrænseflader

I dette projekt kom et ‘nyopstartet’ firma: NHS group og bad os om at lave et design til deres app MulitiKEY.

Jeg var i gruppe 5 som bestod af PM: Tobias og gruppemedlemmer: Lærke Gade Villemoes og Julie Bové.

Første møde med klienten

  • NHS Group:
  • 2 mdr gammelt
  • 3 ejere: 

Søren Hejfel

  • Produktudvikling og teknisk

Niklas Nim

Helvijs Adams

  • Bedre løsning til RFID brikker
  • Trådløs teknologi

 

Ønsker til design:

  • Simpelt design
  • Nemt at bruge
  • Menu med deling, indstillinger, hjælp
  • Skærm med data-info ved aktivering af nøglen
  • Ingen SoMe integration eller NemID
  • Logo må designes
  • Login
  • Hovedskærm
  • Dataudveksling

Senere:

  • Forskellige brugertyper ift sikkerhedsniveauer
  • App + nøglebrik
  • Mulighed for share key (v.h.a. link)
  • Mulighed for at kunne slette nøgle igen
  • Fysisk kontakt ml mobil og nøgle
  • Alle skal bruge det/alternativ til indopereret chip

Nøglen skal have en skærm hvor man kan bladre ml nøgler (skal ikke designes)

  • Sikkerhed ved tyveri
  • Ligesom til headset med gummi(vandfast)
  • Skal kunne samarbejde med alle eksisterende læsere

Design ideer:

  • Logo (blæksprutte?)
  • Nøgle

App design

  • Spærrefunktion
  • Mulighed for personlige designs
  • Administrer nøgler

Målgruppe:

  • Studerende/unge
  • Fitnessworld

Mere åbne for ny teknologi

For at komme ind på markedet

Senere kontorbygninger, osv

Pris:

  • Som udgangspunkt gratis
  • Finansieres via samarbejder med virksomheder

Senere kommer pro version

Nøgleord

  • Fleksibilitet
  • Bæredygtighed
  • Brugervenlighed
  • Sikkerhed

 

Samarbejdspartnere – forretningsmodel:

  • UCL
  • Fitness World
  • Stanley/alarmselskaber

 Ideer

  • “Always WITH you”
  • Helst på engelsk

Interaktionsdesign først (brugergrænseflader)

  • Think aloud test?

Om projektet:

  • Hver vores js kode del, forskellige
  • Forklaret på video,
  • Tag chancer, lav fejl

Vi startede først med at lave:

  • Scrumboard
  • Interessentanalyse
  • Risikoanalyse
  • Gruppekontrakt
  • Link til logbog for projektstyring

Vores Trello kom til at se således ud:

Vi lavede også en interessentanalyse med fokus på de interessanter der måtte være på projektet.

Efter en brainstorm fandt vi frem til vores 9 interessenter. Hver af disse interessenter har interesse i vores projekt. Alle har forskellige grader af interesse i projektet, og nogens interesse skal vi have mere fokus på under projektarbejdet, f.eks. er det vigtigere at tage hensyn til NHS Group’s interesser end til konkurrenternes:

Så lavede vi en Risikoanalyse som vi delte op i to, en for Gruppearbejdet og en for projektet:

UI-patterns introduktion

  • Fælles sprog
  • Mønstre – noget der gentager sig og går igen, det er selve designet der er opbygget
  • System – nemt at tilgå
  • Gentagelser:
  • Navigation
  • Logo
  • Strukturen
  • Contens/copy – genkendelighed

Levels og UI-patterns

3 niveauer der kan hjælpe i udvikling af UI:

  • Content
  • Flow
  • Implementation

Mental modeller – er den erfaring som brugeren kommer med, de som de er vant til

Fordele for designerne:

  • Retningslinjer
  • Genbrug – tidsbesparende
  • Genkendelighed

Fordele for udviklere:

  • Samarbejde

Fordele for brugerne:

  • Skaber overskuelighed
  • Brugervenlighed
  • Usability

Input – Output

  • Dækker al interaktion brugeren har. Eksempelvis; at udfylde og indsende formular, at søge indhold, at modtage svar, notifikationer og hvordan de modtager feedback

Navigation

  • Hjælper brugeren, med at navigere i brugergrænsefladen

Content Structuring

  • Relateret til det at organisere og præsentere indhold (content) så man sikre brugervenligheden og usability

Social Sharing

  • Hvordan brugeren deler indhold med tredjepart, sociale netværk, mail og kontakter

Business Model Cavas (Forretningsmodel)

Denne model brugte vi for at få en bedre forståelse for MultiKEY som en virksomhed. Den er inddelt i 9 kategorier bestående af:

Partnere

  • Hvem er vores vigtigste partnere?
  • Hvem er vores vigtigste leverandører?
  • Hvilke Ressourcer køber vi ind hos vores partnere?
  • Hvilke Aktiviteter udfører vores partnere?

Aktiviteter – Hvilke aktiviteter kræves af vores:

  • Værdifaktorer?
  • Kunderelationer?
  • Vej til kunderne
  • Indtægtskilder?

Ressourcer – Hvilke Ressourcer kræves af vores:

  • Værdifaktorer?
  • Kunderelationer?
  • Vej til kunderne
  • Indtægtskilder?

Værdifaktorer – (Hvad man tilbyder kunden, hvad er det for et behov man dækker):

  • Hvilke værdi skaber vi for kunderne?
  • Hvilke af kundernes problemer løser vi?
  • Hvilke af vores kunders behov opfylder vi?

Kunderelationer

  • Hvad er relationen mellem kunderne og os?
  • Hvilke relationer foretrækker vores kunder?
  • Hvilke kunderelationer gavner forretningen bedst?
  • Hvordan skaber vi og vedligeholder vi relationer?
  • Hvordan påvirker kunderelationer værdifaktorer?

Vejen til kunderne

  • Via hvilke kanaler foretrækker vores kundesegmenter at vi når dem?
  • Hvordan når vi kunderne i dag?
  • Hvordan hænger de forskellige veje sammen?
  • Hvilke veje fungere bedst?
  • Hvilke veje er de mest kost-effektive?

Kunderne

  • Hvem skaber vi værdi for?
  • Hvem er vores kundesegmenter?

Omkostninger

  • Hvor er de vigtigste omkostninger i forretningsmodellen?
  • Hvilke Ressourcer er mest omkostningstunge?
  • Hvilke Aktiviteter er mest omkostningstunge?

Indtægter

  • Hvilke værdifaktorer vil kunderne virkelig gerne betale for?
  • Hvor meget er kunderne villige til at betale?
  • Hvilke forskellige indtægtskilder er det?
  • Hvordan foretrækker kunderne at betale?
  • Hvor meget bidrager hver indtægtskilde til den totale omsætning?

Vi udarbejdede en BMC over MultiKEY som i grove træk så således ud:

Vi arbejdede også med Mikroomverden også kaldet Virksomhedens Mirko og Makroomverden.

Virksomhed:

MultiKEY er en nystartet virksomhed som ønsker at designe en app kombineret med en dongle til at mindske produktionen af plastik til de mange nøglekort og gøre det nemmere for brugerne til at transporterer deres mange nøgler. Indtil videre er de 3 medarbejder i firmaet.

Mirkoomverden:

Kunder:

  • Studerende, B2B og B2G, Fitness forretninger, på længere sigt alarmselskaber og hoteller – men på nuværende sigt vil det være svært at sælge det som B2C.

 Konkurrenter:

  • Stocard, andre nøglefirmaer, alarmselskaber, andre lignende apps såsom: welcome…..

Leverandører:

  • På nuværende tidspunkt har de ikke nogle leverandører, men i fremtiden skal de have nogle til at hjælpe dem med at laves deres produkt: dongles og deres fokus ligger i høj grad med at være bæredygtige, så derfor skal leverandøren være indstillet på brugen af bestemte materialer for eksempel.
  •  

Distributører:

  • Os(Multimediedesigner/studerende – Gruppe 5), UCL, post, reklame.

Makroomverden:

Teknologi og miljø:

Teknologi:

  • De er i gang med at udvikle selve den teknologi de skal bruge, til at anvende dem.
  • MutiKEY er nødsaget til at være up-to-date med den nyeste teknologi. Det vil sige mere effektivt software eller hvordan de kan formindske batteriet i produktet, så det ikke fylder mere end allerhøjest nødvendigt.
  • Produktet er delvist digitalt i form af appen

Politik og lovgivning:

Politik:

  • Sikkerhed, GTPér (?)

Lovgivning: 

  • Skat og afgifter, reguleringer. (hvilken lovgivning er det eksempelvis der kan være relevant)

Økonomi og demografi:

Økonomi:

Demografi:

  • Det er vigtig for MultiKEY at vide hvor mange studerende der er om året for eksempel, da deres hovedsagelige kunder består af de studerende, ville det være godt at kende stigningen i diverse studiebyer såsom Odense, København og Århus. 

Sociokulturelt miljø: 

Kultur :

  • Det skal være nemt, easy acces
  • Det skal være større, skal kunne det hele

Miljø:

  • MultiKEY vil gerne være miljøbevidst og bæredygtige
  • De vil gerne skære ned på brugen af plastik og nøglekort
  • De overvejer at gøre batteriet miljøvenligt
  • Selve produktet skal være lavet bæredygtigt, dvs det skal være godt for naturen så derfor er tanken om noget specielt materielle med ind over også.

Analyse af den afhængige omverden:

Leverendører:

Her skal MultiKEY have fat i nogle gode leverendører der kan levere de bæredygtige dongles da MultiKEY ligger stor vægt på bæredygtighed.

Mellemhandlere:

Her kunne det være en fordel hvis MultiKEY kunne skabes et samarbedje med UCL for eksempel og Fitness centre. På længere sigt måske alarmselskaber og hoteller.

Konkurrenter:

Her kan man snakke om en konkurrent som Stocard eller andre nøgleselskaber som vil mindske MultiKEYs økonomiske indkomst.

Kunder:

Studerende, B2B og B2G, Fitness forretninger, på længere sigt alarmselskaber og hoteller – men på nuværende sigt vil det være svært at sælge det som B2C.

Vores Userflow blev udarbejdet af 2 trin:

Vi legede kort med ideen om Logoer og gav det nogle hurtige forsøg på hvordan de så ud:

Vores første bud på atomic design, hvordan hvert af vores atom blev sat sammen til organismer:

Bagefter lavede vi det på Trello for at få det inddelt lidt bedre i Atomer, Molekyler, Organismer, Templates og Pages:

Til sidst satte vi det op i XD for at se hvordan det hele skulle sættes sammen:

Dernæst udarbejdede vi vores føreste bud på en Wireframe og hvordan Appen kunne komme til at se ud:

https://xd.adobe.com/view/1c613c68-d5b2-429b-5b48-98cd122db1ce-6a50/?hints=off

For et hurtigt indblik i hvordan det ser ud, kan billedet her nedenunder ses;

PITCH for klienten!

Vi lavede et powerpoint som vi ville gennemgår foran klienten, det så således ud;

 

Vi blev efter pitchen enige om et logo vi ville gå videre med, da vi havde fået god respons på dem alle, men der var især et de gerne ville gå videre med.

Det endte med at se således ud:

Vi arbejdede igen med Atmic design og prøvede at sætte det mere overskueligt op, så alle fik en bedre forståelse for hvad vi skulle arbejde med. Vi satte det op så vi først havde Atmoer, så Molekyler og dernæst Organismer.

Vi fik lavet mere visuelt research for at få en bedre forståelse for hvordan andre fungerende apps gjorde og blive inspireret til hvordan vi selv kunne gøre det.

Vores prototype i XD kom til sidst til at se således ud:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Da vi alle var blevet enige og tilfredese med vores design gik vi videre til at begynde at kode vores prototype. Vi brugte Github til at dele og hente alle dokumenter. Vores oversigt på Github blev en smule lang, men vi fandt et godt system og det virkede for alle.

Vi lavede også et Scenario Mapping, hvor vi satte vores persona Nille, til at gå igennem nogle steps og se hvordan hun kunne lære MultiKEY appen at kende og hvordan hun ville bruge den.

Vores færdige xd prototype kom til at se således ud:

https://xd.adobe.com/view/18ed0cef-9b47-4427-4d19-0e52efca5537-6edc/

Vores præsentations video endte med at se således ud:

Vores færdige plakat med vores koncept blev sat op sålede:

Vores pdf bestod af vores endelige resultat, på både konceptet, prototyper, præsentations video, JavaScript forklaringer og hvilke metoder og teorier vi havde brugt som gennemgang af hele forløbet.

Pdfen kan læses her:

Fælles-pdf-multikey-til-aflevering

Skriv et svar

Luk menu