SlideShare una empresa de Scribd logo
1 de 61
Descargar para leer sin conexión
Does a rich GUI make the bank richer?
Does a rich GUI make the bank richer?,[object Object],Haakon Halvorsen and Kjetil Hansen,[object Object],/ Making Waves,[object Object],24.09.2011,[object Object],© MAKING WAVES,[object Object],2,[object Object]
Sparebanken Vest is the third largest, and second oldest bank.,[object Object],The old website did not support the bank's business goals.,[object Object],The old graphic design did not evoke the special "western Norway feeling”.,[object Object],More than half of the bank’s 240.000 customers do their online banking 6 times a month on average! ,[object Object],About the client / bank:,[object Object],24.09.2011,[object Object],© MAKING WAVES,[object Object],3,[object Object]
24.09.2011,[object Object],© MAKING WAVES,[object Object],4,[object Object],?,[object Object],Boring!,[object Object],Complicated!,[object Object],+,[object Object]
Banking is fun!,[object Object]
«Call to Action»,[object Object]
More eyecandy!,[object Object]
Image-use and layout,[object Object],24.09.2011,[object Object],© MAKING WAVES,[object Object],8,[object Object]
Does a rich GUI make the bank richer?
10,[object Object]
Genuine and from the west coast,[object Object],24.09.2011,[object Object],© MAKING WAVES,[object Object],11,[object Object]
Superwidescreen,[object Object],24.09.2011,[object Object],© MAKING WAVES,[object Object],12,[object Object]
24.09.2011,[object Object],© MAKING WAVES,[object Object],13,[object Object]
24.09.2011,[object Object],© MAKING WAVES,[object Object],14,[object Object]
24.09.2011,[object Object],© MAKING WAVES,[object Object],15,[object Object]
Does a rich GUI make the bank richer?
Does a rich GUI make the bank richer?
Rich interface after login,[object Object]
Does a rich GUI make the bank richer?
24.09.2011,[object Object],© MAKING WAVES,[object Object],20,[object Object]
24.09.2011,[object Object],© MAKING WAVES,[object Object],21,[object Object]
24.09.2011,[object Object],© MAKING WAVES,[object Object],22,[object Object]
24.09.2011,[object Object],© MAKING WAVES,[object Object],23,[object Object]
24.09.2011,[object Object],© MAKING WAVES,[object Object],24,[object Object]
24.09.2011,[object Object],© MAKING WAVES,[object Object],25,[object Object]
24.09.2011,[object Object],© MAKING WAVES,[object Object],26,[object Object]
24.09.2011,[object Object],© MAKING WAVES,[object Object],27,[object Object]
24.09.2011,[object Object],© MAKING WAVES,[object Object],28,[object Object]
Video: logged in services,[object Object],24.09.2011,[object Object],© MAKING WAVES,[object Object],29,[object Object]
Car loan calculator- detailed process,[object Object],24.09.2011,[object Object],© MAKING WAVES,[object Object],30,[object Object]
24.09.2011,[object Object],© MAKING WAVES,[object Object],31,[object Object]
C,[object Object],A,[object Object],B,[object Object],D,[object Object]
A,[object Object],B,[object Object],C,[object Object]
Does a rich GUI make the bank richer?
Does a rich GUI make the bank richer?
Slider (eksempel fra annen nettside),[object Object],24.09.2011,[object Object],© MAKING WAVES,[object Object],36,[object Object]
The SUPERstepper!,[object Object],24.09.2011,[object Object],© MAKING WAVES,[object Object],37,[object Object],Steps,[object Object],Input,[object Object],Big steps / Hold to fast-forward,[object Object]
The SUPERstepper!,[object Object],24.09.2011,[object Object],© MAKING WAVES,[object Object],38,[object Object],Steps,[object Object],Input,[object Object],Big steps / Hold to fast-forward,[object Object]
Does a rich GUI make the bank richer?
Does a rich GUI make the bank richer?
24.09.2011,[object Object],© MAKING WAVES,[object Object],41,[object Object]
“Call-to-action”,[object Object],Distinct calls to action and quick access to forms are essential to a good-flowing solution.,[object Object],24.09.2011,[object Object],© MAKING WAVES,[object Object],42,[object Object]
t,[object Object],24.09.2011,[object Object],© MAKING WAVES,[object Object],43,[object Object]
Does a rich GUI make the bank richer?
24.09.2011,[object Object],© MAKING WAVES,[object Object],45,[object Object]
24.09.2011,[object Object],© MAKING WAVES,[object Object],46,[object Object]
More calculators, more eyecandy!,[object Object],A quick walkthrough of other calculators,[object Object]
24.09.2011,[object Object],© MAKING WAVES,[object Object],48,[object Object],I want more eyecandy!,[object Object],Frode Drønen, Sparebanken Vest,[object Object],“,[object Object]
Currency calculator (post-styling),[object Object],24.09.2011,[object Object],© MAKING WAVES,[object Object],49,[object Object]
Does a rich GUI make the bank richer?
Does a rich GUI make the bank richer?
Rich-interaction forms,[object Object]
24.09.2011,[object Object],© MAKING WAVES,[object Object],53,[object Object]
Does a rich GUI make the bank richer?
Does a rich GUI make the bank richer?
Conclusion:Does the bank get richer?,[object Object],24.09.2011,[object Object],© MAKING WAVES,[object Object],56,[object Object]
Customer satisfaction score (by age),[object Object],57,[object Object]
Customer satisfaction score (by age),[object Object],58,[object Object]
Customer satisfaction score (by age),[object Object],59,[object Object]
60,[object Object],Word analysis. Freetext questionaire,[object Object],Better,[object Object],Findable,[object Object],Overview,[object Object]
Breaking news! Results from yesterday.,[object Object],24.09.2011,[object Object],© MAKING WAVES,[object Object],61,[object Object],Findable,[object Object],Better,[object Object],Overview,[object Object]

Más contenido relacionado

Similar a Does a rich GUI make the bank richer?

SMi Group's 13th annual Nordic Card Markets & Future Payment Solutions confer...
SMi Group's 13th annual Nordic Card Markets & Future Payment Solutions confer...SMi Group's 13th annual Nordic Card Markets & Future Payment Solutions confer...
SMi Group's 13th annual Nordic Card Markets & Future Payment Solutions confer...Dale Butler
 
Switch case study ADCB - English
Switch case study ADCB - EnglishSwitch case study ADCB - English
Switch case study ADCB - Englishtalktoswitch
 
Initio digital innovation_digest_24_q2_2021
Initio digital innovation_digest_24_q2_2021Initio digital innovation_digest_24_q2_2021
Initio digital innovation_digest_24_q2_2021Initio
 
Nordic Card Markets 2013 Copenhagen Denmark
Nordic Card Markets 2013 Copenhagen DenmarkNordic Card Markets 2013 Copenhagen Denmark
Nordic Card Markets 2013 Copenhagen DenmarkAndrea Dalma Krizsak
 
IQPC Customer Experience Exchange February 2015
IQPC Customer Experience Exchange February 2015IQPC Customer Experience Exchange February 2015
IQPC Customer Experience Exchange February 2015Antony Bream
 
Digital Disruption Nordic Retail Banking_10june_digital
Digital Disruption Nordic Retail Banking_10june_digitalDigital Disruption Nordic Retail Banking_10june_digital
Digital Disruption Nordic Retail Banking_10june_digitalIlkka Ruotsila
 
cmd-london-2013-growth-bentestuen
cmd-london-2013-growth-bentestuencmd-london-2013-growth-bentestuen
cmd-london-2013-growth-bentestuenJohanna Green
 
RBE 2nd_Final AB208 330
RBE 2nd_Final AB208 330RBE 2nd_Final AB208 330
RBE 2nd_Final AB208 330Nicolas Turner
 
Digital Banking beyond Gen Z - Engaging other customer segments
Digital Banking beyond Gen Z - Engaging other customer segmentsDigital Banking beyond Gen Z - Engaging other customer segments
Digital Banking beyond Gen Z - Engaging other customer segmentsMisys
 
Digital Innovation Digest by Initio #21 Q4 2020
Digital Innovation Digest by Initio #21 Q4 2020Digital Innovation Digest by Initio #21 Q4 2020
Digital Innovation Digest by Initio #21 Q4 2020Initio
 
Number26 - NOAH16 Berlin
Number26 - NOAH16 BerlinNumber26 - NOAH16 Berlin
Number26 - NOAH16 BerlinNOAH Advisors
 
Quick fixing mobile (no, really) - Financial e-Marketing Forum
Quick fixing mobile (no, really) - Financial e-Marketing ForumQuick fixing mobile (no, really) - Financial e-Marketing Forum
Quick fixing mobile (no, really) - Financial e-Marketing ForumHaakon Jensen
 
Consumer Payments Country Snapshot
Consumer Payments Country SnapshotConsumer Payments Country Snapshot
Consumer Payments Country SnapshotRichard Molloy
 
Monetizing Mobile: How to Deliver Value from Improved Customer Experience
Monetizing Mobile: How to Deliver Value from Improved Customer ExperienceMonetizing Mobile: How to Deliver Value from Improved Customer Experience
Monetizing Mobile: How to Deliver Value from Improved Customer ExperienceQualtrics
 
Changing customer behavior and how ABN AMRO responds to it (Vienna, 10 Oct 2017)
Changing customer behavior and how ABN AMRO responds to it (Vienna, 10 Oct 2017)Changing customer behavior and how ABN AMRO responds to it (Vienna, 10 Oct 2017)
Changing customer behavior and how ABN AMRO responds to it (Vienna, 10 Oct 2017)ABN AMRO
 
Baltic PR Awards 2011: Bank Citadele – communication campaign of restructurin...
Baltic PR Awards 2011: Bank Citadele – communication campaign of restructurin...Baltic PR Awards 2011: Bank Citadele – communication campaign of restructurin...
Baltic PR Awards 2011: Bank Citadele – communication campaign of restructurin...Baltic PR Awards
 

Similar a Does a rich GUI make the bank richer? (20)

SMi Group's 13th annual Nordic Card Markets & Future Payment Solutions confer...
SMi Group's 13th annual Nordic Card Markets & Future Payment Solutions confer...SMi Group's 13th annual Nordic Card Markets & Future Payment Solutions confer...
SMi Group's 13th annual Nordic Card Markets & Future Payment Solutions confer...
 
Switch case study ADCB - English
Switch case study ADCB - EnglishSwitch case study ADCB - English
Switch case study ADCB - English
 
Initio digital innovation_digest_24_q2_2021
Initio digital innovation_digest_24_q2_2021Initio digital innovation_digest_24_q2_2021
Initio digital innovation_digest_24_q2_2021
 
Lunar
LunarLunar
Lunar
 
Lunar deck
Lunar   deckLunar   deck
Lunar deck
 
Nordic Card Markets 2013 Copenhagen Denmark
Nordic Card Markets 2013 Copenhagen DenmarkNordic Card Markets 2013 Copenhagen Denmark
Nordic Card Markets 2013 Copenhagen Denmark
 
IQPC Customer Experience Exchange February 2015
IQPC Customer Experience Exchange February 2015IQPC Customer Experience Exchange February 2015
IQPC Customer Experience Exchange February 2015
 
Digital Disruption Nordic Retail Banking_10june_digital
Digital Disruption Nordic Retail Banking_10june_digitalDigital Disruption Nordic Retail Banking_10june_digital
Digital Disruption Nordic Retail Banking_10june_digital
 
cmd-london-2013-growth-bentestuen
cmd-london-2013-growth-bentestuencmd-london-2013-growth-bentestuen
cmd-london-2013-growth-bentestuen
 
RBE 2nd_Final AB208 330
RBE 2nd_Final AB208 330RBE 2nd_Final AB208 330
RBE 2nd_Final AB208 330
 
Digital Banking beyond Gen Z - Engaging other customer segments
Digital Banking beyond Gen Z - Engaging other customer segmentsDigital Banking beyond Gen Z - Engaging other customer segments
Digital Banking beyond Gen Z - Engaging other customer segments
 
Digital Innovation Digest by Initio #21 Q4 2020
Digital Innovation Digest by Initio #21 Q4 2020Digital Innovation Digest by Initio #21 Q4 2020
Digital Innovation Digest by Initio #21 Q4 2020
 
Future Cashless Society
Future Cashless SocietyFuture Cashless Society
Future Cashless Society
 
Number26 - NOAH16 Berlin
Number26 - NOAH16 BerlinNumber26 - NOAH16 Berlin
Number26 - NOAH16 Berlin
 
Quick fixing mobile (no, really) - Financial e-Marketing Forum
Quick fixing mobile (no, really) - Financial e-Marketing ForumQuick fixing mobile (no, really) - Financial e-Marketing Forum
Quick fixing mobile (no, really) - Financial e-Marketing Forum
 
Consumer Payments Country Snapshot
Consumer Payments Country SnapshotConsumer Payments Country Snapshot
Consumer Payments Country Snapshot
 
CMN-System | Rethink RCC
CMN-System | Rethink RCCCMN-System | Rethink RCC
CMN-System | Rethink RCC
 
Monetizing Mobile: How to Deliver Value from Improved Customer Experience
Monetizing Mobile: How to Deliver Value from Improved Customer ExperienceMonetizing Mobile: How to Deliver Value from Improved Customer Experience
Monetizing Mobile: How to Deliver Value from Improved Customer Experience
 
Changing customer behavior and how ABN AMRO responds to it (Vienna, 10 Oct 2017)
Changing customer behavior and how ABN AMRO responds to it (Vienna, 10 Oct 2017)Changing customer behavior and how ABN AMRO responds to it (Vienna, 10 Oct 2017)
Changing customer behavior and how ABN AMRO responds to it (Vienna, 10 Oct 2017)
 
Baltic PR Awards 2011: Bank Citadele – communication campaign of restructurin...
Baltic PR Awards 2011: Bank Citadele – communication campaign of restructurin...Baltic PR Awards 2011: Bank Citadele – communication campaign of restructurin...
Baltic PR Awards 2011: Bank Citadele – communication campaign of restructurin...
 

Último

Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 

Último (19)

Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 

Does a rich GUI make the bank richer?

  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 18.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 36.
  • 37.
  • 38.
  • 41.
  • 42.
  • 43.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 52.
  • 53.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.

Notas del editor

  1. jdjjd
  2. 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!
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. Kjetil:The end result is images that follow the width of the browser until approximately 2000px. Without a sideway-scrollbar, of course.
  14. 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.
  15. 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.
  16. ”Mine lån” startside viser hvilke typer lån man har samt summen av disse.
  17. 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!
  18. 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.
  19. 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.
  20. 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.
  21. 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.
  22. 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.
  23. Dette er et eksempel på ”mine kort
  24. Her er ett enkelt kort.
  25. Nå skal vi gå igjennom et helt designløp for Billånskalkulatoren
  26. 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:
  27. 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 ;)
  28. 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.
  29. 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..
  30. Flere varianter av slidere, nå med hengelås for å låse ned funksjonaliteten.
  31. 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 
  32. 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.
  33. 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.
  34. Nå forsvant sliderne helt, vi har begynt å komme nærmere sluttresultatet.
  35. Uten hengelås
  36. 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å.
  37. 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.
  38. VIDEO: call-to-actionSlik ser det ut når man klikker seg igjennom det.
  39. 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å.
  40. Data fra kalkulator tas med inn i skjema, så lite utfylling gjenstår.Vi skal gå I detalj på skjemadesign litt senere.
  41. 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.
  42. Kjetil:Here’s the same one after styling. We hope this will attract more users.
  43. Kjetil: Home loan
  44. Kjetil: Personal loan
  45. 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.
  46. Haakon: Forklarer felteneKjetil: We believe in large, chunky inputs; they’re more accessible fun to fill out.
  47. 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)
  48. 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!
  49. Vi zoomer inn.
  50. 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 ?
  51. 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.
  52. Oppsummert. Nettbanken har blitt mye bedre.
  53. Bank er gøy!En bank som tør å ha det gøy, er en bank med selvtillit!