…and User-Centered Design

  • Uncover pitfalls
  • Research & direction
  • Build consensus
  • Communication
  • Build confidence
  • Deliver a great experience
  • Increase sales / conversions
  • Save MILLIONS on the budget

Why a User-Centered Design process?

Concept & Sketches

Storyboards & Wireframes

Test & Analyse

Prototype & Build

  1. A thought or idea
  2. Sketches
  3. Storyboard
  4. Wireframes
  5. Photoshop Mockups
  6. Clickthrus
  7. Functional prototype
  8. Build

Low Fidelity

High Fidelity

Cheap

Expensive

Wireframes & Mockups:

Meh.

Clickthrus:

Better.

Angular.js

as a prototyping tool

  • Bevy of plugins
  • 90% of the work taken care of
  • Managing state with ui-router
  • Front-end-centric
  • Familiar
  • Angular Way 
  • Memory & GC intensive
  • Steep learning curve
  • Raw JavaScript
  • A few gotchas

Pros

Cons

View

Controller

Factories & Services

Directives

Module

State

View

Controller

State

$stateProvider
  .state('join', {
    url: '/join',
    controller: 'joinController',
    templateUrl: '/join/join.html',
    title: 'Join Kiwibank'
  })
    .state('join.register', {
      url: '/register',
      templateUrl: '/join/join.register.html',
      title: 'Join Kiwibank - Enter your details'
    })
    .state('join.legal', {
      url: '/legal',
      controller: 'joinLegalController',
      templateUrl: '/join/join.legal.html',
      title: 'Join Kiwibank - Legal stuff'
    })

kiwibank-ux-engineering

By Shaun O'Connell

kiwibank-ux-engineering

An insiders view of the usability testing we did at Kiwibank

  • 241

More from Shaun O'Connell