Hvordan vi designet vores bankkonto - NuConta del II

I del I gik vi gennem processen med at forstå og definere det problem, vi havde til formål at løse. Her vil vi dykke ned i, hvordan vi udførte designet baseret på denne vision.

Co-design

Den første ting, vi gør på Nubank, når vi har en solid problemdefinition, er, hvad vi kalder en co-design session. Vi inviterer folk fra forskellige grupper og kapitler til at arbejde sammen med det mål at udføre følgende ting:

Lad alles dårlige ideer komme ud

Efter uges research er det uundgåeligt, at folk drømmer om og forelsker sig i deres egne kæledyrideer. Hver interessent på dette tidspunkt har delvist forstået problemet og forestiller sig allerede en løsning, der løser problemet fra det synspunkt. Et co-design er en måde at lade disse tanker cirkulere, blive sat i perspektiv og få feedback i et sikkert miljø. Løsninger, der syntes fremragende i bruser hjemme, vil uundgåeligt finde mangler, når ingeniører, designere, premierminister, analytikere og andre eksperter hjælper med at udfordre dem logisk.

Generer flere ideer

Hver co-design session bruger en anden metode til at nå sine mål. I dette tilfælde var vores strategi til at generere et mere solidt sæt ideer at dele deltagerne i grupper og tildele dem en anden Persona (som vi oprettede i del I). Personas hjalp deltagerne med at være empatiske med en anden type person og deres tilknyttede håb, udfordringer og muligheder, snarere end at være begrænset til ens egen oplevelse og perspektiv.

Generer bedre spørgsmål og overfladebegrænsninger.

Udover selve ideerne er en stor del af værdien af ​​samdesignet ved at afsløre ukendte ukendte, skjulte begrænsninger og interessenters bekymringer over hver alternativ vej frem. Ved at samle forskellige discipliner og tilskynde til debat maksimerer co-design mulighederne for at finde problemer, der ser ud senere, når de er dyrere at løse.

Designudforskning

Baseret på de ideer, der er genereret af teamet, startede vi det dybeste dykke, jeg nogensinde har taget i produktudforskning. På mange måder, både fra et teknisk og et produktperspektiv, passer NuConta ikke firkantet ind i en "boks" til kontrol, opsparing eller investeringskonto, så vi fandt det en reel udfordring at tilpasse grænsefladen med en brugers forudgående mentale modeller om pengehåndtering. Et nyt paradigme for hvordan pengene skulle holdes og bruges krævede meget hårdt tænkning over regnskab og hvordan de bedst repræsenteres på en skærm. I betragtning af denne potentielle kompleksitet brugte vi det meste af denne tid på at samarbejde på whiteboard uden at røre ved et digitalt designværktøj.

Først efter omfattende diskussion og brainstorming følte vi os klar til at starte wireframes og pixel-skubbe: Vi prøvede snesevis af versioner af UI af onboarding-strømme, tomme tilstande, investeringssimulatorer, diagrammer (OMG så mange diagrammer), økonomiske mål, investeringsstrømme osv. Vi tilladte os at blive ganske vanvittige i begyndelsen ved at omgå mange regler i vores nuværende designsystem, og derefter justeret, da vi kom nærmere det endelige resultat.

Det var en ganske rejse, indtil vi følte, at vi havde nået et søde sted med informationsarkitektur, visuals og strømme, der kunne kommunikere produktets mekanik uden at udsætte brugeren for unødvendig jargon og kompleksitet.

Designe for gennemsigtighed, med gennemsigtighed

En vigtig komponent i hastigheden og kvaliteten af ​​vores arbejdsgang i dette projekt var at bruge Figma i de tidlige stadier af UI-designprocessen på grund af det høje niveau af samarbejde og gennemsigtighed, det tillader. Ligesom vores live-streamede brugertest, gør Figma det friktionsfrit for interessenter at se, deltage og få empati for designprocessen i realtid.

Kollegers kommentarer, der strømmer ind i Figma

Kortlægger hele oplevelsen

At fremstille en veludviklet individuel skærm er tilfredsstillende, men vi kan aldrig glemme, at hvert berøringspunkt er en del af et større økosystem. Nedenfor er et eksempel på, hvordan vi holdt styr på hver app-skærm, push-anmeldelse, e-mail, webstedsside og sociale medieindlæg, som førstegangsbrugere ville støde på.

Figma trives igen for kommunikationsaktiver som denne på en måde, som en 15MB PDF aldrig kunne. Alle møttes med spørgsmål og ideer baseret på deres ekspertise: tekstforfatter, engineering, juridisk og UX.

prototyper

Vi lavede enhver form for prototype, du kunne forestille dig, når vi udforskede løsninger til NuConta. Vi lavede billige papirprototyper til test af tekstforfatter og generel informationsarkitektur. Vi lavede hurtige Keynote-animationer for at vise ingeniører visionen om en bestemt interaktion. Vi byggede skærme og strømme på princip for at teste tilmeldingsstrømme og tomme tilstande. Nogle prototyper havde endda falske branding og visuals, så vi kunne gå uden for bygningen og vise det rundt i stealth mode.

Hit print og gå test dine design

Start med enklere, lavere trofasthedsprototyper gjorde det muligt for os at trimme de uslebne kanter af det samlede produktkoncept, indtil vi til sidst nåede et niveau af kompleksitet i de test, der krævede en mere høj troværdighed, alsidig prototype. Så vi besluttede at investere i et månedelange projekt for at oprette en fuldt udblæst Framer + Javascript-prototype, der sendte variabler rundt, reagerede på brugerens økonomiske data og lod dem simulere indskud. Dette var selvfølgelig ikke kun vores designteams arbejde, men en koordineret indsats med det tekniske team til at støtte os ikke kun i programmering af prototypen, men også ved brugertestning af den og gentagelse af resultaterne.

Framer spillede en meget vigtig rolle i oprettelsen af ​​troværdige anvendelighedstests

Vi har ikke lagt så store anstrengelser i en prototype som denne, bare fordi vi kan lide nye værktøjer (som vi gør), men af ​​nødvendighed: "dummere" prototyper er nyttige i mange sammenhænge, ​​men vi lærte, at det at spare besparelser med statiske data kan føles underlige og skæve testresultater. Mennesker med lavere indkomster fryser muligvis, når de ser på månedlige indbetalinger på R $ 1.000, og folk med højere lønninger finder disse tal undervejende og tåbelig.

Nøglen for ethvert projekt og enhver virksomhed er at blive enige om en klar definition af, hvad teamet ønsker at lære med hver prototype, og tilpasse dit værktøjsvalg og udviklingsbudget til det mål.

Sæt vores prototyper på prøve. Du kan læse mere om, hvordan vi kører vores brugervenlighedstest i dette indlæg.

Men skulle designere…

…kode? Det kommer an på. Hos Nubank gør nogle af os, andre gør det ikke. I dette projekt var det fornuftigt, at designere kunne give en hjælpende hånd til udviklingsholdet. Vi var selv villige til at dykke ned i denne sorte magi og havde et team af udviklere, der var villige til at støtte os. Det hjælper også, at NuConta blev udviklet i React Native, som er en mindre truende bestræbelse for dem af os med frontend-oplevelse end at sige et oprindeligt udviklingsprojekt.

Erick Mazer Yamashita glad for at have kodet en lydhør skærm, der fungerer på enhver enhedNubank ingeniører: altid der for at hjælpe ❤

Resultat

At definere NuConta's formål, i del I, tog meget arbejde, og vi er glade for at se vores oprindelige produkt opfylder disse mål.

  • Det sidder uden for enhver kontokategori, som kunderne tidligere kendte til, og fusionerer det bedste af aktuelle, opsparings- og investeringsprodukter.
  • Det er et produkt enhver, som er 18 år eller ældre i Brasilien, kan købe med et par kraner, ingen kreditanalyse eller andet bureaukrati involveret.
  • Det er 100% fri for jargon og akronymer.
  • Det investerer automatisk alle brugerens penge i aktiver med lav risiko med daglig likviditet uden at kræve kompliceret onboarding eller lære, hvordan denne type investering fungerer.
  • Det er 100% gennemsigtigt om dine penge og fortæller dig i realtid, hvor meget værdi du får ved at bruge produktet.
  • Brugergrænsefladen viser gradvist oplysninger på en sådan måde, at de er der, når du har brug for dem, men kun når og hvis du har brug for dem. Det føles tilgængeligt for mindre kyndige brugere og gennemsigtigt for folk, der har brug for mere information.

Ved at kombinere de værktøjer, processer og teamdynamik, der er beskrevet i disse to stillinger, er vi overbeviste om, at den afsendte version af NuConta er det mest sammenhængende og venlige produkt for den målgruppe, vi valgte at sigte mod. I de første måneder mangler det bestemt vigtige funktioner, der forventes fra en bankkonto. Men selv i denne tidlige, ufuldstændige fase kan NuConta yde stor værdi til vores første kunder, fra hvilke vi forventer at modtage masser af feedback, som vil lede vores vej fremad.

Tak for din læsning, fortsæt med at følge vores seneste designhistorier!

Vi leder altid efter gode designere, der hjælper os med at vokse og bekæmpe kompleksiteten. Hvis du har erfaring og ønsker at opbygge fremtiden for finansielle tjenester hos os, skal du kigge efter åbne positioner her.