ANZ Staff Club Australia

Design and development of a members only eCommerce website, a promotional website and integration with Hansaworld ERP webshop

In 2015-2017 I was the lead designer and front-end developer for ANZ Staff Club Australia. This primarily involved the build of responsive members-only eCommerce site to manage online retail sales, discount offers from a range of partners, events and accommodation bookings, as well as a small promotional site.

This was built from the ground-up using a CMS built into the Club's Enterprise Resource Planning (ERP) tool - Hansaworld Standard ERP. This involved extensive software customisation to achieve modern responsive design and ecommerce functionality.

Role & team context

My role

My role as web designer served as an end-to-end lead site producer. This included:

  • Design research (stakeholder, user and industry research)
  • Content strategy including IA
  • Design, layouts and art direction
  • Prototypes and specifications
  • Front-end development / CMS integration
  • Developing and maintaining design systems, pattern and asset libraries
  • Training and mentoring content managers and a junior front-end developer
  • Creating handover training and documentation including a knowledge base
  • QA testing and continuous improvement

and more

The team

I worked closely with a team that included:

  • A local business expert / project manager / server administrator
  • Developers (remote teams) from the ERP / CMS provider for software development
  • Local content maintainers and a junior developer

Context & summary

The ANZ Staff Club offer a suite of services to their members, including discounted retail products (via an online store and 'brick-and-mortar' stores inside key branches), special offers, social events and accommodation. The Staff Club wanted to update their website to modernise their look-and-feel and make their services accessible to a broader audience in more contexts.

Public website

The public site offers a brief overview of the benefits of membership, a simplified joining form / workflow, store locations, contact and FAQs / support information.

Some of the features of the redesign included:

  • Benefits are summarised in a one page site for easy overview.
  • A simplified and clearer joining form, with more informative and helpful workflow messages (success and error states, progress information).
  • Member login fields were added directly to the public page header to allow for better pattern recognition and quicker access (and login / password microinteractions were refined).
  • A contact form was added to the site, which filtered enquiries to the responsible teams for action.
Members' homepage
Above Public homepage

Members homepage

The members homepage was redesigned to offer an overview of the site, quick links to the most popular categories, a summary of current news and key offers from their weekly newsletter, featured products and sale items.

The homepage content was customised for mobile, without reducing access to the full site - eg by featuring links to newly launched services and products for shopping on-the-go including digital gift cards and movie tickets as well as a virtual member card.

Online retail shop

The Staff Club online store offers members access to discounted retail products in a wide range of categories - they stock over 130 brands. To help members discover more of this range, the navigation was re-organised and expanded, and faceted search and filters were built into the shop.

Shop workflows, micro-interactions and progress / status messages were improved across the site to be more clear, informative and helpful - including those associated with purchasing products, login/out, account management, paying invoices and more.

Offers

The Staff Club partner with a number of rewards services to provide discount offers for members. They also curate a collection of independent offers through a wide range of vendors via their Show&Save catalogue. Offers included travel, hotel and attraction discounts, dining offers, car and auto, wine offers, discounted gym memberships, health and beauty services and more.

Custom templates

Offers did not fit within the CMS's online shop structures (or the Club's business processes for the shop) - in particular, the offers had a flexible model for redemption depending on the offering vendor's process (for example, to redeem an offer members might need to do any of the following - visit a website and fill out a form, call or email a representative, provide a code at the register, or just show their member card) - so these required their own set of templates. These were optimised for manual management within the CMS, and designed to ensure consistency and clarity around the redemption processes for members.

Form for vendors

I also designed a form to help collect offer information from vendors in a way that allowed us to articulate our requirements and obtain consistent information and feature images, so we could present these offers to members as clearly and coherently as possible (given their inherent variety).

Accommodation bookings

The Staff Club managed a collection of seven properties across Australia which were offered to members to book holiday accommodation in weekly units. I designed a set of templates to be used within the webshop to provide information about each property and allow members to place bookings for the weeks of their choice. This included custom indexes, product cards and product pages.

Social events

The Club hosted a number of social events and activities across the year for members - from gala balls to festive events, sporting activities, wine tastings and more. I designed a suite of templates including:

  • online event invitations (simple and more elaborate versions),
  • custom product cards,
  • an events index with filters to help members find events local to them, and
  • an event retrospective template, including a gallery.
Above Events index

Read more about my process for the Staff Club website redesigns

Research & discovery

Research was conducted in a lean and iterative manner throughout the project, initially to tight timeframe. To get started, I aimed to get in 'just enough' quick research (including varied methods to triangulate results), to get some good perspective and identify any key pain points across the customer journey that needed to be addressed, and where we could make quick wins and get the most impact in the delivery of this project. To keep the process moving quickly, results were shared with the team and discussed informally, with minimal formal deliverables.

  • Stakeholder interviews

    To kick-off, I started by interviewing a range of key stakeholders to understand business goals and maintenance requirements.

  • Return brief

    I sent a return brief and estimate back to the senior stakeholders to confirm my understanding of the project goals, priorities and requirements from a their perspective.

  • Contextual research

    I reviewed company literature, past customer feedback research, installed and monitored analytics.

  • Content inventory

    I inventoried the existing content and structure using PowerMapper and Sketch wireframes to get a good understanding of the current content and structure.

  • Mapping activities

    I also mapped user journeys and key task workflows to understand how users moved through the site to achieve common tasks and any obstacles that currently existed to efficiently completing these tasks.

  • Industry & competitor research

    I toured through similar sites (eg. members-only ecommerce sites, department stores, offer sites, accommodation bookings) to get a sense of the industry standards and best practices. I did a site comparison matrix and some loose content mapping in Sketch, to get a good sense of strengths and weaknesses.

  • Literature review

    I also reviewed articles and books on current industry best practices - particularly research related to features we intended to implement eg filters, faceted search and general ecommerce patterns such as checkout processes

  • User feedback survey

    I ran a user feedback survey to get general feedback from members across Australia about their experience using the current website and their expectations / desires for improvements.

    At a later stage, once we had a list of improvements to undertake, we consulted with users to get an understanding of their highest priorities.

  • Categorisation & labelling activity

    I conducted an online 'affinity mapping' activity (mostly remote, in order to maximise participation rates and inclusivity across Australia) - this helped us to understand more about how users understood and would organise our content, including the labels that made the most sense to them.

  • Feature prioritisation

    After collecting information and collating a list improvements desired by both users and stakeholders, I ran a quick feature prioritisation activity alongside another online consultation, to gather statistics on people's priorities and values. We were then able to keep this in mind for project planning and scope management.

  • User interviews

    I invited a small, but diverse group of users to individual interviews, including some observation exercises. Tasks were observed relating to the existing website, mock-ups of the new website and functional features on other websites that we were considering implementing on our new site (eg. responsive filters, tabbed mega menus) to measure success and satisfaction with each.

Content strategy

Following on from the research activities outlined above, the next steps I took were around planning and testing the information architecture (site structure and workflows).

Mapping out an IA proposal

Based on the existing content, and feedback from users and stakeholders, including the results of the card sorting activity in Optimal Sort, my next step was to create a proposed content structure robust and flexible enough to accommodate existing and future content (stock ranges fluctuated regularly and there were plans to expand the online range in the future).

Above IA draft in Google Sheets

IA validation using Treejack

The proposed new IA was very different to the existing one, so it was important to confirm that users were able to easily find things in the new structure. This exercise was conducted online using Treejack. This allowed us to assign tasks to find key items within a proposed sitemap, from which we were able to measure how successful and efficient people were in finding them.

Above Treejack - tasks assignment screen

Visual IA validation / first-click testing

The next step was to measure user success at key tasks once the navigation was incorporated into the layout, with the extra visual cues that this brings into the mix. I used Optimal Workshop's Chalkmark tool to upload screenshots of proposed layouts (a mix of mobile, tablet and desktop) and asked testers to complete tasks and click on the screen to tell us where on they would expect to find these items.

The software gave us clickmaps and statistics to show us success rates - helping us to identify what was working and what needed further refinement.

Above Chalkmark clickmap results

Desirability testing

Incorporated into the first-click testing activity was an additional 'desirability testing' component to gather first-impressions of the proposed look and feel to discover how people were vibin' with the proposed new look. This was built using a post-questionairre component in Chalkmark and mobile and desktop mock-ups in InVision. Participants were asked to choose from a list of verbs, or provide their own, to describe their first impressions of the proposed designs.

A word cloud (illustrated*) made from these results gave us an overall sense of people's impressions, and I kept this feedback in mind as I continued to iterate the site's design and structure (eg. continuing to look for ways to reduce information overload, whilst still maintaining the lively busyness that many people responded to positively).

* As with all of these research deliverables, they were rather 'quick and dirty' and designed to progress through a minimum viable research process - to facilitate discussions with stakeholders and inform decision-making. (And thus, this illustration may still include a few random non-verb words left in from the open text part of this question. Also, to note, with more time, and if it were a priority, I would certainly make these deliverables more refined and package them more consistently).

Above Word cloud

Content templates

I created a range of templates (with variations for key content types such as movie tickets, AFL tickets, candle ranges etc), to help keep content consistent and quicker to write and manage. These were a mix of HTML page templates and snippets, structural guidelines for assembling in the CMS, and where possible / efficient to do so, templates were available within the CMS.

We were able to get some custom components built in the CMS so that we were able to re-use units of repeatable content anywhere within a product or index page.

Above Template information documented in the knowledge base

Example
Tabbed mega menu

The main menu needed to provide a flexible framework for changing stock and ranges, and also accommodate some third /fourth level categories which had minimal subcategories or products and some that had abundant subcategories and products (eg. Gift Cards, For Him).

A tabbed, flyout mega menu for medium to large screens allowed us to have a flexible space to use to display lists of subcategories, promotions, featured product cards, or whatever format was appropriate for the content.

On small screens, the same menu structure was displayed as an accordion-style menu, optimised for tapping.

Before building, I tested live examples of these patterns, in multiple contexts, with a number of diverse users and they found them intuitive to use, so this is what we implemented.

Features:

  • Able to display four or more levels of menu in a relatively simple and easy-to-use interface
  • Provides easy and quick access to a preview of the site structure and deeply nested content
  • Accessible - navigatable by keyboard and usable without javascript
  • The Hansaworld webshop menu system was extended so that the mega menu content could be maintained with minimal HTML
  • Lazyloading, responsive images - optimised for performance on mobiles
Above Tabbed mega menu for large screens
Above Accordion style menu for small screens

Example
Product card changes

Above Product cards - before Click to view notes
Above Product cards - after Click to view notes

Example
Helpful messages

One of the goals was to create more clear, helpful and informative messages across the site, that helped people progress through tasks more efficiently, understand where they are in a process, get around the site and find things easier, and to make informed decisions. For example, clear messaging for error and success states, clear calls to action, and cross-linking to other relevant information in the site wherever it might be helpful.

No local events message
Above No events - When there are no Staff Club hosted events in a region, people are directed to other places they can find things to do, via our Rewards Partners
Logged-out confirmation message
Above Logged out state - cute stock photo girl waves a friendly goodbye, until next time
Password change success message
Above Password change success message
Empty basket message
Above Empty basket - 'yearning cart kitten' gives a quick, friendly prompt to get into back to the shop

Design

Look and feel / art direction

Colour

The colour palette refers to the ANZ primary brand colours to faciliate a visual connection / harmony with ANZ branding, but also extended into our own colour palette and typography to identify the Club as it's own entity.

Imagery

For non-product images, a diverse editorial style of illustration was used to maximise flexibility when using affordable stock image libraries. There were some light guidelines around these to facilitate consistency across the site, eg encouraging use of elements of the ASCA colour palette whereever possible, using flat icon-style illustrations for section index headers (providing visual 'information scent' cues, and also easy and quick to make responsive) and dark grey monoline icons for related categories.

For product images, templates and guidelines were provided to keep these as consistent (and informative) as possible, given the inherent style variation in the source images provided from such a wide range of vendors. This was to keep our digital product shelves looking clean and orderly to facilitate ease when scanning through and quickly comparing products.

Partial mood board / style guide (WIP) in Sketch
Above Partial mood board / style guide (WIP) in Sketch

Style tiles for different contexts

A number of theming options were provided for different contexts to encourage both differentation and consistency across these, and as subtle wayfinding cues eg:

  • Public pages used a deep blue as the dominant colour
  • Members' pages used a white background with dark blue accents as the key colours
  • Interstitial pages (eg. login page, password change, membership pending) used a light blue as the primary colour
  • Partner sites were provided with a style tile where ocean blue was the key header colour
Above Style tile for partner sites

Sketches and mock-ups

I used Sketch to quickly wireframe and mock-up key templates.

These were shared with members / users for the purpose of findability and desirability testing.

These were then uploaded to InVision and shared with stakeholders and Hansaworld developers where they could provide comments and feedback on strategic and technical viability. We were then able to start identifying requirements for customisations to the Web Shop software.

Sharing mobile mock-ups in InVision
Above Mobile mock-ups Invision board

Build

The ASCA websites were built inside a 'webshop' / CMS within their Enterprise Resource Platform tool, Hansaworld ERP. I built and adapted templates, components and a code framework. Any components that integrated with the other parts of their systems were built by (remote) software developers at Hansaworld. My role involved writing, diagraming and illustrating specifications for the interface and interactivity for these components as well as detailed QA testing and feedback.

HTML prototypes

I used Kit (HTML) and SASS (CSS) on a Bootstrap framework for prototyping key templates, illustrating and exploring interactions

I also used CodePen and CSS deck to share modules and components with developers

CMS integration

Learning and testing the system's default functionality and identifying an approach / best practices for both building the site efficiently and optimising for future ease-of-maintenance

Building key templates and modelling content examples in a number of variations per template

Building the content structures, particuarly the categories used for navigation, sorting and filtering, and content for the mega-menu

Functional specs, testing and QA

We worked with multiple Hansaworld partners across the duration of the project and I used a variety of methods to communicate detailed functional specifications and provide feedback on our testing of customised components. The tools and methods chosen depended on the partners' stated preferences and the tools' suitability to communicate appropriately about the specific deliverable.

Some examples of the customisations included:

  • A tabbed mega menu that integrated with the CMS menu system so it could be edited safely with minimal HTML knowledge
  • Filtering and sorting functionality and faceted search
  • Featured and related items functionality
  • More transparent feedback and friendly error messages across the site
  • Improvements to the checkout workflow / integrating with ASCA business processes
  • A simplified and clearer joining form and workflow
  • Improvements to the login workflows (login/out, password resets and password changes)
  • Customisations to shop templates to allow us to use Bootstrap / HTML 5 and to be able to layout content flexibly

Some of the tools and strategies used for these activities included:

  • Sketched illustrations and diagrams with notes - posted to InVision and Jira where they could be demonstrated and discussed
  • HTML prototypes and CodePens
  • Test and development instances of the Hansaworld application
  • BitBucket and Stash
  • Jira, Trello, Airtable and Google docs

Example
Results refinement for search and product indexes

As we had many categories and search possibilities with large numbers of results, we built features to allow users to refine and sort results, as another option to help them find and discover products, events and offers.

Process

These features were built from scratch in Hansaworld webshop. My role in the build included the following:

  • I started by researching current best-practices and examples and testing some of them with our users.
  • I then mocked-up layout and simple interaction examples in InVision to discuss viability with stakeholders and CMS developers.
  • I later prototyped HTML / CSS / jQuery layouts and interaction examples in a demo site and in CodePen to communicate more specific requirements to the Hansaworld development teams, and provided illustrated diagrams to project manager stakeholders via Jira.
  • I also extensively tested the deliverables, building a foundation taxonomy / content examples within a development CMS, and providing detailed feedback to our Hansaworld development teams to ensure we were able to deliver as robust solution as possible.
  • I also built matching filters and sorting for events and offers (units of content that did not fit within the existing shop framework) using the jQuery plugin Isotope, and set-up templates and snippets for ease-of-maintenance within the CMS.

Features

Features of the filters and search refinements included:

  • Responsive design, with different layouts optimised for mobile, tablet and desktop use
  • Ability to filter by a wide range of criteria - eg brand, category and price, but also criteria specifically relevant to the products available - eg for football tickets : rounds and teams, for candles : scent type, materials, colour and size
  • Ability to sort (A-Z or Z-A) by brand, model/variety or price
  • Clear notifications of filter / sorting status and ability to clear filters
  • On the search page, 'faceted' results showing results by category, page (this included news, offers and events) and product results
Above Candle product index with filters and sorting active

Example
Improvements to the purchasing workflow

As we had many categories and search possibilities with large numbers of results, we built features to allow users to refine and sort results, as another option to help them find and discover products, events and offers.

Add to cart - success state

Add-to-cart interaction

To make the success state clear, an animated confirmation faded-in (both under the buy button and in the cart preview in the header) after adding an item to the cart.

Basket preview drop-down

Basket preview and drop-down list

A region for previewing the cart contents was added to the header - it showed the cart total and the number of items in the cart, and a hover drop-down with a scrollable preview of the contents. This enabled members to track their shopping progress, and confirm successful actions, without having to go back and forth to and from a separate basket page.

Basket page enhancements

Once in the basket, the menu was removed (to reduce distractions) and replaced with a simple back to shopping button. The checkout pages were given an overhaul in terms of adding responsiveness, structuring the process more clearly, and adding clarity and visibility to progress and status messages.

Checkout page enhancements

The freight module was customised to accommodate digital items, and to work flexibly with the Staff Club's business processes. Shipping options could be customised for individual items or to product groups. At the checkout, customer's may be prompted to select their choice of shipping for certain items, and could also tick a box to apply this preferred shipping method to all items (available to ship using their preferred method).

Maintenance & support

In addition to one-on-one training, monitoring, mentoring and feedback, I built a variety of support and reference resources for the site maintainers to use and extend in the future:

Knowledge base

This knowledge-base covers a wide variety of topics related to maintaining the website. Everything from templates, build specifications, job history and tips and tricks. This was initially built in WordPress, but was later moved to an instance of Confluence Cloud for easier administration and maintainability.

Above Knowledge base homepage in Confluence
Above Visual style guide embedded in the live site

Style guide and pattern library

Covering colour palettes, illustration styles, typography, iconography and UI components, cross-linked to the templates and snippets in the knowledge base.

Shown here is a screenshot of colours page from the style guide built into the website, which includes colour contrast accessibility tests.

Editorial style guide

Covering writing for the web tips, guidelines for optimising content for intranet search and local style conventions and examples.

Above Editorial style guide in Confluence

Wrap-up and review


To wrap-up my involvement in this project, in addition to an analytics review and discussion, I conducted a true intent study on the website using Loop 11, with an additional optional brief satisfaction survey / net promoter score component.

True intent study

Users of the website were intercepted from their point of entry and invited to participate in the survey. They were asked before starting their visit what task they were coming to the site to complete today. Then, after completing their tasks, they were asked if they were successful in completing their task--and if not, what interfered. This enabled us to track areas that still needed improvement and refinement.

Satisfaction

They were then invited to tell us how satisfied they were and how likely they were to recommend the site to others (results were overwhelmingly positive). As a follow-up to the initial desirability test, they were also asked to provide some adjectives to describe their experience of the site (prompted with a list that they could check-off, or use their own) to give us a sense of their emotional response.

Room for improvement

Finally, they were asked what they considered to be the three most important things that should be done to improve the website in the future. This was to provide a sense of user priorities as the Staff Club continues to improve and refine the site into the future.

Tools used


Over the course of this project, I used a wide range of software and apps, including:

Project tracking and team communications

  • Jira
  • Confluence
  • Trello
  • AirTable
  • Word and Excel
  • Sketch / InVision

Research and testing

  • PowerMapper
  • Optimal Sort
  • Treejack
  • Chalkmark
  • Loop 11
  • AirTable

Design - layout, image development

  • Sketch Adobe
  • Adobe Photoshop
  • Adobe Illustrator

Testing

  • BrowserStack
  • Browser dev tools
  • Various devices

Development

  • Bootstrap
  • CodePen
  • HTML / CSS / SASS / JS
  • Brackets / Atom
  • CodeKit
  • Atomic design system
  • Wufoo
  • Hansaworld ERP webshop
  • jQuery plugins including Isotope, Lazysizes