Dave Collins

User Experience Design

Case Study: The "Green" Bank's Business Account Opening App

  • Desktop-based internal application to facilitate Customer Service Reps acquiring business account applicant vital information and setting up multiple accounts.
  • Covers businesses from sole proprietorship to large public and private corporations with as many as fifty officers and up to 30 accounts.
  • Lives within a wrapper application with other related functionality (outside project scope). Must harmonize with existing style and functionality while being more up-to-date and compliant with standards such as accessibility.
  • Business requirements dictate it needs only support desktop and landscape-format tablet views. This will not be a mobile app. However, Lead Dev and I determine that it is not a strain to ensure design can accommodate resizing down to a certain point. This gives us a head-start if new requirements come down from Business - not to mention just implementing 'best practice' methods from the get-go.
  • Will be built in Angular 2.0


Team Discovery
  • Two Business Analysts, Project Manager, Front-end Lead Developer, one Junior Developer,Back-end Lead Developer and myself - User Experience Specialist.
  • Team and individuals reporting to Product Owner with daily reviews, approvals and feedback of wire frames, boardroom presentations for sprint deliverables.
  • Agile development cycle with three week sprints. Stories are tracked in JIRA.
  • By middle of development phase, five developers and two QA testers have been added.

Leading the Design

  • Construct a template for developers to start building on.
  • Specify colour palette, look and feel, white spacing, font attributes, responsive behaviour, placement and behavior of global features such as navigation buttons.
Colour Palette and Font Styling
  • This is the beginning of the style guide, which I attach to every front-end story for the developers' reference.
  • Produce a pared down document of WCAG 2.0 guidelines, showing how we will implement them in every component. These guidelines Inform my design, give direction to developers and act to justify my design choices to stakeholders. Such as:
    • Font-sizes, colour/background contrast, whitespace, control size and feedback behaviour, tab flow, popup behaviour,
    • Graceful adaptation to large-print formats as well as screen reader use. All copy and controls must flow as users expect and under their control. Timed content updates have countdown feedback, popups do not cause user to lose page context, controls have multiple indicators of function and behaviour.
    • External links taking user out of application are clearly labelled.
    • Colour palette, fonts, icons must be consistent with existing corporate colours and harmonize with other applications.
  • I step in as designer on the team. I produce all required assets such as icons and buttons. Many are pulled from corporate libraries, but our application is much more sophisticated than others and will require new assets to be made or implemented from third-party libraries such as font-awesome.
  • Since I am producing these assets anyway, I incorporate them into the now hi-rez wire frames included in every feature story. This greatly reduces the amount of churn with developers needing guidance for positioning and functionality. It also provides QA with accurate screen shots for testing expected functionality.
  • When not producing wire frames, I am helping Dev and QA clarify expected behaviour and functionality.

Problem-solving: Signing Officers for Accounts

  • Customer Service Agent may add up to 30 accounts for the applicant. Each account must have Signing Officers assigned to it - and there can be as many as 50 SOs. There is a lot of overlap between the Signing Officers of different accounts.

What is the most efficient way (fastest, most intuitive, minimizing repetitive steps) for the user to enter this data?

80/20 Design Principle

  • From end-user feedback, we learn that most of the time, a business application will have fewer than 10 accounts, fewer than 10 signing officers in total, and generally, all their accounts will have the same list of signing officers.
  • A smaller fraction of applications will have up to the maximum number of accounts and the maximum number of signing officers, most of which may be uniquely applied to specific accounts.
Number of Officers
  • Design will prioritize the workflow of the most common 80% of cases and provide additional functionality for the 20% cases.


  • When editing the first account, a control displays all the signing officers. List is scrollable.
  • Most users will have a list of less than 10 items. For a large collection of officers, control is searchable (filterable, really) - typing in a few letters will filter out non-matching names. The 'Apply to all' button is visible to indicate to the users that this (expected) functionality is available - just not yet.
  • The user adds an officer, it disappears from the list of potentials and adds it to this account, the 'Apply to all' button is enabled.
  • User is free to customize officer list for subsequent accounts.