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. For example, some of the features built from scratch included the faceted filters, search functionality, joining form, a virtual members card, an integrated account dashboard, shop indexes, product detail pages, shopping cart workflows and much more.
Role & team context
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
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.
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.
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.
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.
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).
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.
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.
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.
To kick-off, I started by interviewing a range of key stakeholders to understand business goals and maintenance requirements.
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.
I reviewed company literature, past customer feedback research, installed and monitored analytics.
I inventoried the existing content and structure using PowerMapper and Sketch wireframes to get a good understanding of the current content and structure.
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.
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.
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.
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.
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).
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.
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.
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).
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.
Making pages easier to scan for important information
Goals and achievements
Goals for the new layout included: helping people understand product availability
Help people find things faster Help people understand availability better Improvements to page scannability - enabling people to get a quicker overview of the lay of the land - what’s available, where it fits, is it new * Titles divided up * Purchase price made more prominent * Availability made more prominent Improvements to product pages and text-heavy content pages Breaking up long blocks of text with (semantic) headings, bullet lists, illustrations, wells Templates for more consistency
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.
- 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
- 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
Product card changes
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.
Look and feel / art direction
As the Staff Club had recently separated
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.
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.
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
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.
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.
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
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
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.
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 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
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.
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:
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.
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.
Over the course of this project, I used a wide range of software and apps, including:
Project tracking and team communications
- Word and Excel
- Sketch / InVision
Research and testing
- Optimal Sort
- Loop 11
Design - layout, image development
- Sketch Adobe
- Adobe Photoshop
- Adobe Illustrator
- Browser dev tools
- Various devices
- HTML / CSS / SASS / JS
- Brackets / Atom
- Atomic design system
- Hansaworld ERP webshop
- jQuery plugins including Isotope, Lazysizes