Why redesign, and what we intend to do
After 4 years, it’s time to redesign nzpost.co.nz. Over the past few months, we have been working to redesign the homepage and improve the experience for our customers. In this first of two articles, I will explain why we are redesigning and how we have approached the redesign.
Current state of play
The current nzpost.co.nz website went live in October 2010, with the redesign beginning back in 2009. Since the website launched, New Zealand Post has changed as an organisation, and our website has grown to include multiple additional tools and features that were not factored into the original design.
Over the last few years, the online world has evolved also. Websites have had to become responsive to adapt to multiple devices and screen sizes. Twenty percent of New Zealand Post customers are now accessing our site via mobile devices. This change has meant we have a need to revisit the design of the site.
The last few years have seen an explosion in the types of devices that customers use to access the web. Statistics show that mobile device usage in New Zealand has had a significant uptake since 2012, 60% New Zealanders have a “smartphone”, up from 33% in 2012, and 19% New Zealanders have a tablet, up from 7% in 2012.
On nzpost.co.nz we are seeing:
In some parts of our sites such as the tracking tool, we are seeing even higher mobile visits:
This shows that people are wanting to do more online interactions through their mobile devices.
We are also seeing more diverse range of devices and screen resolutions being used to visit our site. Below shows stats from visits on our website:
There are a vast range of devices and resolutions being used. As a result this means we cannot just cater to a large screen size and traditional methods of web interaction with a mouse and keyboard. We also cannot assume how a device is being used by a visitor to our website, so we need to make sure the site can respond in a manner that is relevant to their situation.
Approach for redesigning the site
Process of taking an existing desktop-only website, and “making it responsive”.
Pros: Relatively quick; no new interface for users; less internal wrangling over designs.
Cons: Can’t do “mobile-first”; content is optimised for desktop; reflowing desktop builds for mobile is not always possible – or at least not easy; generally a “band-aid” fix.
2. Making the mobile site responsive
Taking the “m-dot” site and making this responsive, then switching over when done.
Pros: Lower risk; sandbox for learning; can safely test out ideas.
Cons: Has usual problems of “m-dot” site – redirections, content parity, SEO, etc; trickery to get desktop views to develop and test; it can take some time, dissipating enthusiasm; another “band-aid” fix.
3. Starting from scratch
Mobile-first: New design, new build.
Pros: Fresh start – lean markup, optimised for performance; better support for mobile; less emphasis on devices.
Cons: Could take a long time – risk losing customers frustrated with current experience; the risk of big projects at Post is that many parties then want to contribute, which can result in design by compromise.
4. Do it section-by-section
New design, build gradually.
Pros: Mobile experience can improve more quickly; flexible – able to learn; big projects take time and can get bigger and bigger; fits with Agile philosophy.
Cons: Users confused by different experiences; tricky to implement.
We decided that our best approach would be to do it section-by-section, with focus on starting with high priority pages/sections of the site based on customer numbers, business priority, and budget. We are a relatively small team, this approach allows us to focus on one section at a time to make it responsive while we are making other changes to it, improving the overall experience for customers over time.
Where do we start?
Once we had established an approach, the first section of the site we’d tackle was the homepage. But before we leapt into redesigning, we needed to set some visual design constraints that could be used for the entire site.
Obviously, colours needed to align with our company brand/visual identity. The New Zealand Post visual guidelines contain firm advice on the use of our primary colour palette in red, grey and white, with good use of whitespace and clear content to support it.
Expanding on this is the use of the secondary colour palette, this is where the guidance was a bit blurry. On analysing several different secondary colour palettes for online use in the past on nzpost.co.nz (and other New Zealand Post websites), we found that there was little consistency or clear guidance coming through, this also extended into the percentage breakdown of the use of the primary colours.
Our visual identity is summarised in this statement: New Zealand Post is energetic, friendly, warm, authentic, and helpful. The secondary colour palette plays an important role in supporting the identity and injecting energy into the visual design. So we drew reference from the secondary colour palette in the original print visual guidelines, and adjusted the colours to better reflect our brand statement, with consideration for screen use and better visual contrast.
The final colour palette we ended up with is:
The palette is vibrant and warm, giving us a good range of colours to compliment the primary brand palette while staying true to our visual identity.
On analysing existing New Zealand Post websites, we found that there are inconsistencies in the use of fonts, with a mix of Arial, Helvetica, DIN, and Source Sans Pro being used online. While brand guidelines mentioned using DIN for print and Arial for online, we have selected to use “Helvetica, Arial, Sans serif” as the font stack for body copy to cover cross platform devices. Source Sans Pro was selected for headings, it has a similar tone to DIN whilst heading towards a more humanist space to tie into our exploration of a human-interface touchpoint. The typeface is ready for web use and has good cross-browser rendering.
A typography scale was set to restrain the type sizes used, and a six-pixel baseline was introduced to create vertical rhythm and align page components.
In addition to the six-pixel baseline, we added a responsive 12-column grid system to for quick and easy responsive flexibility. This allows the design to adapt to any viewport and device without the need to recalculate widths of elements.
Customer and business needs
Given the time constraints and availability of resources at the time, it wasn’t possible to do in-depth user research to get a full understanding of what, how, and who the people are that are using the website.
Instead we drew from data and information we already had from Google Analytics, several expert reviews of the site and plenty of customer feedback. This ensures we consider the end user’s needs without going to the extent of creating personas and design principles due to time and resource constraints. In particular, we wanted to begin this redesign by looking at the homepage first.
Some homepage usage stats
How visitors get to the home page
- 12% of customers come direct to the homepage
- 7% of customers visit the homepage at some point while already on the nzpost.co.nz website
- 39% of customers come to homepage from a search engine (39% of visitors to any page come from search engines )
- 45% of customers come directly to the homepage (40% of visitors come direct to any page)
Top 10 pages landing page from search engines
- /tools/address-postcode-finder (18.96%)
- /tools/tracking (9.32%)
- / (8.01%)
- /tools/rate-finder (1.36%)
- /tools/postshop-kiwibank-locator (1.14%)
- /tools/youshop (1.06%)
- /tools/rate-finder/sending-nz/parcels (1.06%)
- /tools/rate-finder/sending-internationally/parcels (1.03%)
- /tools/rate-finder/sending-nz (1.00%)
- /tools/youshop/app (0.97%)
- /products-services (0.82%)
Other homepage stats
- 2% of visitors to the homepage use the search feature
- 0.1% of visitors go to About Us from anywhere (you’ll see why this matters later!)
The statistics gave us a picture of how users were coming to the site, where they first land on the website, and where they proceed to from there. This allowed us to make decisions on the hierarchy of information, and establish clear paths to guide visitors quickly and easily.
We also needed to ensure that our business needs were met in the redesign. It is important that the visibility of our products and services are considered, especially on the homepage. Consideration was needed in the paths we lead our customers into, to maximise the exposure of products and services, and minimise confusion around the navigation of the site. The most important paths we need to keep in mind are around Personal, Business and sections where users go to perform actions (non-information sections).
Understanding both our user and business needs assist us in defining the goals for the redesign. Next step is refining these goals through identifying existing issues.
Identifying existing issues
A redesign goes beyond just creating a new skin for the website, we want to improve the overall user experience. We were able to assess from feedback the problems on the existing homepage.
Some of the issues identified
- The section name ‘Home’ vs ‘Personal’ in the main navigation was found to be confusing. The existing site has ‘Home’ and ‘Business’ sections in the main navigation, where ‘Home’ directs you to the ‘Personal’ section.
- Too many navigational blocks on the homepage, customers need look at different areas to find where they want to go. This is inefficient and confusing.
- There are three different blocks of ads on the homepage, and most are taken straight from print campaigns. The homepage’s visual hierarchy is lost in the overload of information.
- The ‘Tools menu’ has only five items, but there are more than five tools in our suite of products/services. The majority of the tools are hidden deeper in the site, and require the use of the promo areas to draw attention to them, so some tools are very hard to find.
- We have varying visual styles throughout the site, with inconsistent graphical treatment on different sections leading to a confusing brand identity (eg different buttons styles used throughout the site).
Which issues to deal with?
Once the issues were identified, we established areas where we needed to focus our efforts, beginning on the homepage. The homepage will set the tone for the rest of the site, with consideration of elements that don’t appear on the homepage but kept in mind to ensure a unified design throughout the site.
It was decided that the redesign would attempt to:
- put customers and content first. The frame of the site (header and footer) is not as important as the content;
- create a clear hierarchy of information and tasks for users to complete;
- create consistency – wherever possible we should use the same language and design patterns to help people get familiar with our services. We can’t imagine every scenario and write rules for it. Every circumstance is different and should be addressed on its own terms. What unites things, therefore, should be a consistent approach — one that users will hopefully come to understand and trust — even as we move into new digital spaces; and
- make all our communications conversational, approachable and direct.
It is important to note that while one of the most pressing issues with our site is the IA, it is out of scope for this redesign, but we have plans to revisit this. For the moment we can work to improve the experience in a meaningful way through better visual hierarchy and delivering appropriate content.
The plan was to create a design that will allow for flexibility in responsiveness, while keeping it very simple for future growth. A better overview of all the online services needed to be available to the users on the homepage, while still allowing the business to promote other products/services and marketing campaigns that will not visually fight with the design. While the initial redesign will be created within the homepage layout, the overall family of elements that make up layouts are kept in mind so we can tackle site-wide issues.
In my next blog post, I will continue with the redesign process and describe some of the challenges we faced as we worked through the responsive redesign of nzpost.co.nz.