Downloaded 38 times
Uploaded byHaakon Halvorsen
Does a rich GUI make the bank richer?
The document discusses the redesign of Sparebanken Vest's website to better align with its business goals and improve customer experience, highlighting the importance of a rich graphical user interface. The new design addressed previous customer dissatisfaction and led to increased engagement, evidenced by awards for usability. It reports a significant rise in customer satisfaction, with 85.9% indicating they are likely to remain with the bank after the improvements.
Does a rich GUI make the bank richer?
- 2. Does a richGUI make the bank richer?Haakon Halvorsen and Kjetil Hansen/ Making Waves24.09.2011© MAKING WAVES2
- 3. Sparebanken Vest isthe third largest, and second oldest bank.The old website did not support the bank's business goals.The old graphic design did not evoke the special "western Norway feeling”.More than half of the bank’s 240.000 customers do their online banking 6 times a month on average! About the client / bank:24.09.2011© MAKING WAVES3
- 4.
- 5.
- 6.
- 7.
- 8. Image-use and layout24.09.2011©MAKING WAVES8
- 10.
- 11. Genuine and fromthe west coast24.09.2011© MAKING WAVES11
- 12.
- 13.
- 14.
- 15.
- 18. Rich interface afterlogin
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. Video: logged inservices24.09.2011© MAKING WAVES29
- 30. Car loan calculator-detailed process24.09.2011© MAKING WAVES30
- 31.
- 32.
- 33.
- 36. Slider (eksempel fraannen nettside)24.09.2011© MAKING WAVES36
- 37. The SUPERstepper!24.09.2011© MAKINGWAVES37StepsInputBig steps / Hold to fast-forward
- 38. The SUPERstepper!24.09.2011© MAKINGWAVES38StepsInputBig steps / Hold to fast-forward
- 41.
- 42. “Call-to-action”Distinct calls toaction and quick access to forms are essential to a good-flowing solution.24.09.2011© MAKING WAVES42
- 43.
- 45.
- 46.
- 47. More calculators, moreeyecandy!A quick walkthrough of other calculators
- 48. 24.09.2011© MAKING WAVES48Iwant more eyecandy!Frode Drønen, Sparebanken Vest“
- 49. Currency calculator (post-styling)24.09.2011©MAKING WAVES49
- 52.
- 53.
- 56. Conclusion:Does the bankget richer?24.09.2011© MAKING WAVES56
- 57. Customer satisfaction score(by age)57
- 58. Customer satisfaction score(by age)58
- 59. Customer satisfaction score(by age)59
- 60. 60Word analysis. FreetextquestionaireBetterFindableOverview
- 61. Breaking news! Resultsfrom yesterday.24.09.2011© MAKING WAVES61FindableBetterOverview
Editor's Notes
- #2 jdjjd
- #6 Kjetil: Most people don’t log in to their bank to wander around and discover new things: It’s more of a necessary evil: They visit as rarely as possible, and only stay long enough to pay their bills.Haakon: We want to change this. We want people to care about how they manage their money and how they organize their savings. We want banking to be a fun experience. So early in the project we put this up as one of our guiding principles: Banking is fun!
- #7 Haakon: the second principle we put up on the wall was this: Call to action. That means that when you surf the webpages or log into your netbank you will be presented with some kind of call to action wether it’s order a product, contact the bank or calculate your mortage ON EVERY PAGE. No page in the bank should be without some kind of possible action connected to it. As we will demonstrate in this presentation, we put a lot of effort in trying to guide the user from frontpage to the exitpoint.
- #8 Kjetil: The client kept requesting this, and we’ll come back to it. As a Graphic designer it’s not uncommon to get general requests to make something look nice. I hope few webdesigners feel that that’s the main thing they do, though. Haakon: Kjetil got a bit annoyed by this endless request for more eyecandy. I think he gave up at one point where i saw these glass surfaces everywhere :D I think he finally got the client to back down a little to keep the site looking professional looking.
- #9 Kjetil: A bank doesn’t have any obvious visual matter, the way a travel agency has pictures of beaches and exotic locations or a real-estate company has images of houses. A bank has numbers.
- #10 KjetilAlot of companies attempt to solve this lack of visuals by using stock photos. They buy a bunch of photos and use them to “spice up” their site.The result is often soulless, cold, disconnected and feels fake. Few users will identity with the images here.These are actual examples from Norwegian websites.On the next slide are some more extreme examples I found here and there.. All in use on actual websites.
- #11 Kjetil:I just get annoyed when I see stuff like this. Sometimes it’s enough to completely disqualify a website for me. If I visit a webshop with imagery like this, I may not shop there. Too bad. Maybe they had some good products.
- #12 Kjetil:Luckily our clients image-use was already good when we came in.Their images are genuine; both in terms of the people and the locations portayed. Being local and close to their customers is one of this bank’s main values.
- #13 Kjetil:They did, although, have some challenging formats. Something they called “superwidescreen”. We got a challenge to see how we could make this work on the website.
- #14 Kjetil:When I just inserted the widescreen image in the design, there was very little left, due to the extreme proportions. I wanted to achieve more impact and wideness.
- #15 Kjetil:So I scaled the image up until it gave the desired feel, but this pushed alot of sentral elements too far down the page.
- #16 Kjetil:This was solved by pulling the left menu up on top of the image. I think this is a good example of how sometimes when you find an new solution to a problem, you get some originality in the design as a reward.
- #17 Kjetil:The end result is images that follow the width of the browser until approximately 2000px. Without a sideway-scrollbar, of course.
- #18 Kjetil:We stressed that these images be used only in selected areas, and not as a general thing, as they do push the content down a bit.
- #20 Min oversikt er din totale oversikt over alle kundeforhold i banken. Haakon har noe mer om ”Min boks”?Tabs på ulike typer kundeforhold, meldinger og betalingsvarsel synlig. Dette var i utgangspunktet alt vi skulle gjøre bak logginn, men det viste seg at det skulle bli en del mer.
- #21 ”Mine lån” startside viser hvilke typer lån man har samt summen av disse.
- #22 Klikker man seg inn på ett spesifikt lån så får man se det i graf + nøkkeltall. Man kan også browse andre lån (forrige / neste lån). Vi ønsket å få til en visuell bank, en bank som IKKE skulle være kjedelig. Bank er gøy!Kjetil: Litt om prosess. Da vi gjorde RIA moduler, startet vi ofte på likt: Fredrik (som programmerte) startet med det tekniske, og vi så på hvilke moduler vi kunne bruke ”out of the box”. Jeg designet enkelte ting fra scratch, andre ting ble bare skinna. Haakon hadde hele tiden overblikk på det funksjonelle. Kjetil: When we made these modules, we often started .. hm.. lurer på om dete utgår, siden fossefallsmetodikk er mer og mer sjelden.Haakon: Når vi jobbet med innholdet bak logg inn hadde vi strenge føringer på teknologi og hva vi fikk lov til å gjøre. Her kan nevnes at vi har ikke lov til å:Gjøre utregninger I frontlaget, i RIA komponentene (legge sammen tall eller simuleringer). Kan kun hente opp informasjon fra backend som ligger hos en annen leverandør. Sette I gang handlinger (som f.eks. Transaksjoner eller opprette konto etc.)Lenke opp innhold inne i nettbankenKort sagt – et helvete!
- #23 Kjetil:The client kept asking for eyecandy. Here’s an early sketch with icons, gloss, drop-shadows etc.. and a 3d-graph with a mirror-effect on it. Now, the 3d graph may look nice, but 3d obviously doesn’t serve any purpose here. Rather it makes the graph less readable. But sometimes you sketch things you know won’t be realized, but are still interesting to explore. We did find that 3-dimensional volumes are a nice addition to this mostly flat world.
- #24 Kjetil: I also experimented with light backgrounds in these modules. They were decided against because they mixed too much with the surrounding content. Dark backgrounds allowed for more freedom of grid and placement inside the modules.
- #25 Dette viser ”min sparing og plassering”Her ser man sammensetningen av sine sparing og plasseringer – her ser man hvilken spareprofil man har. Etter hvert er det meningen at denne også skal gi handlingsvalg som går på hva slags ”portefølje” man har. Dersom man har en litt mer aggresiv spareprofil så vil denne gi deg tips å for eksempel sette mer penger i fond enn i bank. Kakediagrammet kan klikkes på – det samme med bank / fond etc. Da går man videre inn i applikasjonen.
- #26 Her er en fondsoversikt. Denne er nokså kompleks, men det vil også komme en aksjemodul som blir enda mer detaljert :DKjetil: This a worst-case scenario; with tabs, filtering, checkboxes, and so much content that you get a scrollbar on the right side.
- #27 Sparebanken Vest har også forsikringer via frende forsikring. Her har man ikke så mange tjenester, men det er mulig å få oversikt over avtalene. Hvis man klikker seg inn på en avtale har man full oversikt over gjeldende avtaledokumenter og hvor mye man betaler pr. mnd.
- #28 Dette er et eksempel på ”mine kort
- #29 Her er ett enkelt kort.
- #31 Nå skal vi gå igjennom et helt designløp for Billånskalkulatoren
- #32 Her har vi slik den gamle ser ut (NB! Sett på billånskalkulator – ikke boliglån). Dette skjemaet er fullstendig udynamisk, ren html-skjema. Kjetil: There are many inputs here, some of them will not be familiar to the average user, such as:
- #33 Dette er første grovdraft for å komme frem til boliglån. Kjetil: I didn’t understand much of this, but there were some interesting gradients ;)
- #34 A. Angi bilens pris ved å dra i den lilla spaken opp og ned. B. Angi egenkapital ved å dra i den blå spaken opp og ned. C. Her prøver jeg bare å endre litt på rekkefølgen og la finansieringsgrad være en av spakene man styrer. Hovedproblemet med denne er at man må låse ned tall ellers blir det som en geleklump som gjør at hvis man dytter litt i den ene enden så beveger det seg i andre enden. Dette ble et problem så vi begynte å opererer med å låse ned og opp tall….Kjetil: I understood even less of this, and remained passive. I became sort of a guinea-pig for Haakon: He had to sort of simplify until I got it.
- #35 Haakon: Her eksperimenterer jeg med andre typer slidere som har et inputfelt oppå slideren, med mulighet til å dra beløpet opp eller ned langs slideren. Dette motvirker problemet med at slidere må ha en fast lengde. Man kan da istedet la slideren ta høyde for f.eks. +- 40% i forhold til grunntallet. Har også tatt inn et vesentlig visuelt element i bilen som skal gi oversikt over nøkkeldataene på ett blikk: finansieringsgrad og terminbeløp. Kjetil: Here I started waking up: Things looked much simpler, and there was a funny looking car which was painted in accordance with the input values.There was still an issue with the sliders, though..
- #36 Flere varianter av slidere, nå med hengelås for å låse ned funksjonaliteten.
- #37 Kjetil: Sliders are trendy, but they’re often hard to use motorically: You have to click and drag a small item. The motion is also often sideways, not vertically which is easier. Sliders can be especially tedious if you are trying to hit a specific value.The top choice here is also an example of misunderstood use: There are really only three choices; on the left, middle and right. If you try sliding between, the marker will snap to one of them. So this should have been done with buttons.Haakon: det er også morsomt å merke seg at inputfeltene ikke kan skrives I
- #38 DETTE er faktisk noe av det mest innovative vi har på løsningen :D Det er ”Superstepperen”! (Applaus)Mer brukervennlig enn sliders, er fleksibel på beløpsstørrelse, enkel å bruke – lett å trykke på. Raskere å bruke en å slide. Kjetil:We were alot back and forth on having only one step-button on each side, that you could hold down and get an acceleration. But we didn’t take the chance that users would actually try holding the button, nor did we want to use help-text, so in the end we decided on two buttons for different increments. Trying to simplify too much can be a bad idea.
- #39 DETTE er faktisk noe av det mest innovative vi har på løsningen :D Det er ”Superstepperen”! (Applaus)Mer brukervennlig enn sliders, er fleksibel på beløpsstørrelse, enkel å bruke – lett å trykke på. Raskere å bruke en å slide. Kjetil:We were alot back and forth on having only one step-button on each side, that you could hold down and get an acceleration. But we didn’t take the chance that users would actually try holding the button, nor did we want to use help-text, so in the end we decided on two buttons for different increments. Trying to simplify too much can be a bad idea.
- #40 Nå forsvant sliderne helt, vi har begynt å komme nærmere sluttresultatet.
- #41 Uten hengelås
- #42 Haakon: Endelig resultat zoomet inn. Vi går igjennom funksjonene.Kjetil:Haakon’s car was cute, but i needed to find something a little more in line with the overall visual style. I was lucky enough to find an illustration which was very suitable. Haakon: Vi vil fokusere litt på selve måten å sette verdier i kalkulatoren på.
- #44 Vi har hatt høy fokus på ”call to action” i hele løsningen. På forsiden har man minikalkulatorer som starter interaksjonen. Tallene man putter inn her blir tatt med videre til kalkulatoren slik at man taster ikke inn dette på nytt. Kjetil: At first we planned to create the calculators in different formats, so it would fit in the center and side-column and could be used on different page types. This proved difficult, especially for the narrow side-column. So then we considered using banners as entrances to the calculator and serve this on a separate page. The way we ended up solving it, which you can see here, is probably far more effective: You start filling things out here, and you know what to expect in the next step. After filling out these numbers you don’t expect to have to read a long text about loans when you click submit.
- #45 VIDEO: call-to-actionSlik ser det ut når man klikker seg igjennom det.
- #46 Man kan leke seg med ulike verdier som man har fått med seg fra innkastermodulen på forsiden… justerer litt og trykker på Søk nå.
- #47 Data fra kalkulator tas med inn i skjema, så lite utfylling gjenstår.Vi skal gå I detalj på skjemadesign litt senere.
- #49 Kjetil: I got this alot from the client. I spent alot of time searching for icons to illustrate the products. Now I’ll just show some examples from the other calculators we created.
- #50 Kjetil:Here’s the same one after styling. We hope this will attract more users.
- #51 Kjetil: Home loan
- #52 Kjetil: Personal loan
- #54 Selv om dette er en kalkulator så illustrerer det hvordan de gamle inputskjemaene på løsningen var. Dette skjemaet er fullstendig udynamisk, ren html-skjema.
- #55 Haakon: Forklarer felteneKjetil: We believe in large, chunky inputs; they’re more accessible fun to fill out.
- #56 Haakon: Vi gjorde et hovepoeng av å fjerne alle felter som man ikke trenger å fylle ut. Dette er en balansegang, hvis man tar bort for mye så må kundeservice likevel hente opplysningene fra kunden, hvis man har for mange felt så vil kunden la vær å fylle ut skjemaet og ringe istedet. Vi identifiserte de feltene vi syntes var informasjon som banken ikke trenger å vite noe om og ba banken forklare dette I detalj som hjelpetekst “Hvorfor spør vi om dette” og “Hva skal jeg oppgi her?” etc. (svart boks)
- #58 Det nye designet har også gitt veldig bra tall på tilfredshet blant brukerne. Det er små variasjoner, men det ligger gjennomgående godt over 70% og helt opp i 83% på de eldste brukerne!
- #59 Vi zoomer inn.
- #60 Hvis vi zoomer inn på 72-84% så ser vi at det er forskjeller mellom de mellom 25-39 og de som er eldre. Vi tror det er fordi denne målgruppen er mer bevisste enn de som er eldre om hva som er mulig – og blir også mer kresen i forhold til å gi det topp-karakter. Det er verdt å merke seg at de eldre scorer så høyt fordi de er fornøyde med den store fonten vi bruker bak logginn og store knapper og tydelig skjemadesign. Noe om livsfaser og økonomisk situasjon og lojalt contra utprøvende bankforhold ?
- #61 Her er en ordanalyse fra spørreskjemaet – hvilke ord er tydligst?Kjetil: Notice that the word ”design” is pretty small. You can also find the words ”layout” and ”modern” if you search. We’re actually pretty happy with this: That people don’t think so much about the visual aspect.
- #64 Oppsummert. Nettbanken har blitt mye bedre.
- #67 Bank er gøy!En bank som tør å ha det gøy, er en bank med selvtillit!