Tänk dig en tjänst liknade BankID. Men säkrare och som alla runt om i välden kan använda. Online eller fysiskt. Svipe ID är en start-up med med två ID-profiler från dotcom-tiden bakom rodret. De vill bli världsbäst på ID!

Hi-fidelity wireframes dark vs light mode

Kund
Svipe ID AB
År

2020-2021

Roll
  • – Ux-designer
  • – Visual designer
Uppgifter
  • – Flödesschema
  • – Low-fidelity wireframes
  • – Hi-fidelity wireframes
  • – Skriva UX-texter på engelska
  • – Illustrationer, 20 tal
  • – Uppdatering av logotyp
  • – Användartester i 130 länder

Uppdrag: Vara bollplank och hjälpa till med att skapa detaljerna för hur tjänsten skulle fungera. Göra low- och hi- fidelity wireframes. Vara med och bygga Adroid-versionen av appen. IOS-versionen ville de bygga själva.

Low-fidelity wireframes

Jag och tre klasskamrater hamnade i ett mycket spännande slutprojekt: I Stockholmsförorten Fisksätra hade några eldsjälar, både från och utanför Fisksätra, gaddat ihop sig för försöka att lösa några viktiga samhällsproblem. De ville erbjuda klimatsmart mat och samtidigt lösa en liten bit av integrations- och arbetslöshetsfrågan. De behövde vår hjälp!

Vi kom in ett mycket tidigt stadie i företagets bildningsprocess, vilket gjorde att varken företagsnamn eller affärsidén var riktigt satt. Samtidigt hade vi bara två veckor på oss till presentation. För att hinna med och kunna gå vidare i processerna, blev vi tvungna att utvigda UX-uppdraget lite. Även hjälpa till med att hitta på ett namn och benchmarka och putsa på affärsidén.

Arbetsprocess UX & UI

Stegen i arbetsprocessen, från UX (user experience) till UI (user interface) beskrivs i korta drag här nedan. Hela processen och mer detaljer finns beskrivet i slidern ovan.

1. Bakgrund

  • Sätta sig in i kundens affärsidé
  • Förstå produkten och marknaden.
  • Identifiera problemet
  • Identifiera målgrupperna
  • Sätta ihop hypoteser

2. Research

  • Skapa frågor för att testa hypotes
  • Intervjua målgrupp genom gerillaintervjuer
  • Fråga målgrupp genom Googleformulär
  • Sammanställa insikter från researchen

3. Analys

  • Skapa personas
  • Skapa kundresor
  • Skapa effektkarta

4. Flöde & funktion

  • Brainstorma fram funktionsidéer
  • Prioriterat funktionsflöde
  • Sitemap & Flowchart

5. Design & struktur

  • Low-Fidelity wireframes i Sketch för agilt testande av funktion och struktur på mål- och arbetsgrupp. Också för avstämning mot kund.
  • Look & feel & Style guide för presenation och avstämning mot kund.
  • High-Fidelity wireframes i Sketch för överlämning till frontend.
  • Rörliga prototyper av microinteraktioner i After Effects för test, avstämning och senare överlämning.

Digitalt användartest

Svipe ville testa att det tekniskt verkligen gick att scanna in pass och ID-kort i de 130 länder där de visste att NFC-tekniken var implementerad. Eftersom det blir för stort projekt att besöka 130 läder och utföra tester på plats, ville vi göra det online genom tjänsten BetaFamily.com

Problematik: Hur får man användarna att våga scanna in sitt pass online med hjälp av en halvfärdig app?

Arbetsgruppen brainstormade fram olika namn som skulle innehålla rätt värden och attityd.

Vinnande namn.

Enklare ”Style guide”

Webbplats med e-handelslösning, startsida – desktop

Film (0:15 sek). Visar ”Mobilversion”

Testa Desktopversion i Invison (high-fidelity wireframe)