Redesigning nzpost.co.nz part 2: How we did it and what’s next

In the previous post, I wrote about the process of identifying and defining issues with the current website, establishing the purpose of the redesign, and mapping out the goals we want to achieve in this redesign. In this post, I will be describing the process we took to produce our new design, the challenges we faced, and the way forward from here.

Wireframing and sketching ideas

Armed with all the information we had and a clear direction of where we wanted to head, we began our design work by sketching out ideas around elements on the page. Wireframes are intended to be very rough sketches to map out the skeletal framework of a page, exploring placement, hierarchy and balance of a page.

Through our previous research, review of feedback from customers, and understanding of the business’ needs, we decided the homepage needed to have:

  • a feature brand/promo area – rather than just use the area for latest ads (as per the current site), we wanted to be able use it as an highlight for an online product/service or the company brand (as a brand statement area);
  • an area showing that we cater to both personal and business needs;
  • quick access through to our range of online tools/services; and
  • promo areas for marketing campaigns that are currently running.

Initial sketches

These initial sketches were bounced around the team and refined, so that we’d have a clearer picture of the visual hierarchy and balance of the page before visual mockups began. Through these wireframes we were able to determine a rough placement for elements that would maximise the location of the elements in the order of their importance on the page.

Visual design conceptualising

We had established in the beginning that the design must be responsive and flexible. This is a major consideration when it came to visual design. Our idea was that the visual design should be kept simple, with the intent that mobile users should not have a different experience than desktop users.

But where do we start the design conceptualisation? Responsive designs are not static, in order to create that living experience, the design process needs to be kept fluid and flexible, but the visual design concept needs to start from somewhere. So where?

Brad Frost wrote an awesome article about a methodology called atomic web design. He talks about designing a system of components that are used to build up pages. This seems to be a great way to move forward and appears to deal with the issue we have with inconsistent visual styles from concept being fleshed out page by page.

Using this method meant rather than designing pages, we could design the elements from the ground up. Putting together a simple list of elements such as buttons, text input fields, typography, links and blocks, applying the colour scheme and a simple yet flexible style, we established a base from which the design concept rapidly grew.

With these base elements established, we moved onto designing the header, footer and the content area. These three areas were designed in parallel to ensure they worked together as a cohesive design. This method of working ensures that the final design concept is flexible enough for different variations while still conforming to the same base pattern.

As we designed each area we would continue to update the base elements until we settled on final designs for the header, footer and homepage content.

Header

We had already decided the header needed to:

  • fit in elements that are in the current header (Logo, Navigation, Search, Cart, Account); and
  • not detract from the content, the primary focus of a page.

Several concepts were drawn up for both desktop and mobile size to test out how the design would sit responsively at either ends of the screen width spectrum. Through testing different ideas, we eliminated styles, sizes, and combinations that were not as flexible as we needed.

Header concepts for large screens

Header concepts for small screens

Final header designs

Final header design for large screens

Final header design for small screens

Footer

We followed a similar approach for the footer, where ideas were tested out and refined through iterations.

Footer concepts

Some of the changes made from the current footer:

  • Removal of duplicated main navigation in the footer as per the current site.
    Analytics showed that the existing repeated navigation in the footer was little used as opposed to the main navigation in the header. We intended to have a fixed header (where the header is fixed to the top of the viewport when vertically scrolling) so that the primary navigation is always accessible.
  • Place “About us” in the footer section instead of primary navigation.
    In part one I mentioned that the percentage of visits to “About us” from the homepage is a whopping 0.1% [insert sarcasm]. Due to this, we decided to remove “About us” as a primary navigational item but still have it on every page in a less prominent area in the footer.
  • Regroup related items in the footer.

Final footer designs

Final footer design

Final footer design for small screens

Homepage concepts

The homepage concepts came together relatively quickly. We had spent a fair amount of time sorting out the hierarchy at the wireframe stage, so the wireframes already defined much of the appearance of the elements on the homepage.

Three concepts of the homepage based on the wireframes were presented to product owners and a few other people around the business.

Homepage concept variation 1 Homepage concept variation 2Homepage concept variation 3

The following version was decided upon on as the variation we would move forward with. The concept captures the flexibility and visual hierarchy we had set out to achieve, prioritising the content over graphical elements to allow the content to shine through and reduce the confusion in a cluttered layout.

Homepage concept variation 2

  • the prominence of the search box upon feedback that it wasn’t necessary as a primary call-to-action on the homepage;
  • the seven level deep navigation and how it will work responsively;
  • at what breakpoints the text and icons in the header navigation for “Cart”, “Sign in/out”, and “Search” changed to icons only; and
  • how the design would flow onto other pages.

Prominence of search box

One of the findings from earlier analysis was that customers needed a quicker path to access the information they are after. Our solution for this was to give the search box more prominence on the homepage, but a deeper look into the current usage of search revealed that perhaps this solution wasn’t necessary.

The stats showed:

  1. 0.79% of visitors use search
  2. 86% of searches use search in header
  3. Only 2% of visitor to the homepage use search

Rather than a more prominent search box, what is needed is a better IA and visibility of common pages/tools on the homepage to drive users to their destination. So we decided that the search would only remain in the header as it does throughout the site, still visible, but not using prime real estate on the homepage.

Navigation on mobile

As we were not redoing the IA at this stage, we had to work out how we were to manage our complex navigation responsively (existing navigation is seven levels deep). Starting with the mobile navigation, we examined some resources on navigation patterns and complex navigation patterns, and quickly narrowed it down to two patterns:

  1. The Multi-Toggle – where the the navigation collapses and expands as you tap or click each parent item.
    Multi-toggle navigation
  2. The Ol’ Right-to-Left – where the navigation slides to the left to show child pages.
    The ol' right-to-left

Due the the width and depth of our navigation, the Ol’ Right-to-Left pattern was the one we decided to move forward with, as it allows users to click through and stay focused on the path they selected without overwhelming them with all the other unrelated options.

Navigation on desktop

With the mobile navigation resolved, we looked into the desktop version. During the initial design stage, we had already designed how the primary and secondary navigation will appear statically. The new design has the secondary level listed horizontally on a red bar. This is the opposite of what the current site has as research revealed that this level of navigation was often missed. Search statistics showed that these categories were often the most commonly searched for by users. So by raising it on top of a red bar, we are hoping to increase the visibility and use of these links.

Desktop navigation

We need this navigation to be responsive down to and beyond some tablet sizes before it breaks to the small mobile navigation. With a horizontally listed navigation, it soon became obvious that there wouldn’t be enough horizontal space, causing the text to wrap to another line. The solution was to treat the secondary level navigation as a priority plus menu, so that where there is not enough horizontal space to display all the items in a single line, the least important item/s are hidden from view, with a “+” or “more” link toggling their reveal.

With this resolved, it left the tertiary navigation (level 3+ navigation) to be designed. This wasn’t a problem on a small mobile screen as the full navigation could be catered for within the menu. But on a larger screen, we had to think carefully about how we lead customers and how much information to reveal at each step. The current site has multiple levels of navigation, often the navigation tree was long and with each level the font size got smaller. While this allowed customers to see where they were in the structure, it presented an overwhelming amount of information that over complicated their journey.

We spent much time digging through our analytics and were aware that the majority of our traffic came directly to a page from a Google search. Understanding this helped us decide how the tertiary navigation was likely to be used.

We moved the tertiary navigation to the right of the content (originally on the left), to drop its visual importance and allow the user to focus on the content.

Example of current content page navigation Proposed content page navigation

We would show the tertiary navigation items for the current page, its children, and any siblings of the current page. On deeper levels (level 4+), an additional link at the top of the tertiary navigation will be added to take the user up to its parent level. The breadcrumbs would also aid the user to jump directly up to its ancestor pages. This method of revealing only two levels of navigation items at a time reduces the likelihood of users being overwhelmed or becoming lost in the complex structure.

Content navigation Content page navigation

This navigation will need further user testing to show whether it is an effective solution. Our intention to revisit the IA will also drive us to improve this navigation over time.

Other header elements

Responsive design pushes us to think harder about the priority of information, and the importance of not cluttering the screen as information is revealed. Aside from the navigation, we also had several important elements that needed to reside in the header to give them prominence.

Header – signed in vs not signed in

The ability to sign in to a nzpost.co.nz user account is crucial to our customer experience, so the visibility of user account actions needs to be a top priority. But we also have to account for the limited horizontal space we have, so the reveal of information has to be relevant for user actions. For a non signed-in user, the register and sign in buttons are hidden on a small mobile screen to save space, these display as a dropdown with the icon is tapped, while on a larger screen the buttons are visible at all times.

header - not signed in on a desktop

Header - not signed in

For sign in, we decided account information could be treated as a drop down menu, with the words “Your account” as a link to trigger the menu. This solution allows for future expansion in the menu and also keeps the experience consistent across devices.

Header - signed in on a desktop

Header - signed in on a small screen

Search

The search in the header is reduced to a link in this design, which reveals a drop down with an active search form. Hiding the search form reduces the space without compromising on the amount of user action required to perform the function.

Search on a desktop

Search on a small screen

Cart

On the current site, the user is shown number of items in their cart, total cost, a link to the shopping cart, and a check out button.

Cart in the header on a desktop

Our statistics reveal only a handful of customers have more than five items in their cart, so instead of keeping to this model, we have simplified it to just the number of items on the desktop, with a reveal showing an overview of items or an empty state message. The small mobile screen version is simplified down even more to just the cart icon and a reveal drop down.

Header

Cart on a desktop when viewing item details

Cart on a small screen with no items in the cart

As we continue to learn more about our customers and their shopping behaviours over time, we will revisit this design to better cater to the customer’s needs.

The simplification of the header reduces the amount of clutter, removes the distractions of too much information, but allows easy access to detail.

Design across the site

As mentioned earlier in this post, we chose the atomic design methodology of building up the design through a pattern library of elements. Through the process of designing the homepage, we established a number of common elements that are used throughout the site. To capture outstanding elements that need to be designed, we reviewed the existing site and identified a basic list of elements and their uses.

With this list we were able to flesh out the design further and expand it to cover a wide range of elements, creating a pattern of styles, and applying specific usage rules around each element to clarify their uses across the site. We also looked into the relationship between elements and how they would act responsively if actions differ on touch devices. The pattern was tested out on various pages of the site, and elements adjusted to allow for flexibility to adapt and grow as needed.

Site elements for a small screen Site elements for desktop

Get it built

As the design was being created, front end development work also began so elements could be reviewed in its working state in a browser. This gave us the ability to solidify the pattern library in a “live” and adaptive way. All elements are documented in a live pattern library in HTML and CSS, so that eventually there is a clear reference for every element and pattern, reducing the need for individual pages to be designed visually and allowing more time for us to improve the overall user journey. This pattern library will also serve as a gauge of consistency, helping developers to understand the uses for elements and develop better user experiences through consistent visual cues.

Going live and beyond

The next step is getting the new homepage live, so that we can begin the process of rolling out our simplified design across the site, and focus on improving the functionality of the website for our customers, regardless of the device they choose to interact with the site on. We are excited by the prospect of creating a better user experience through this simplified interface, and will be looking to our customers to help guide us in improving the design over time.

The design only covers the base elements and homepage at this stage, but it establishes the foundation to which we can build upon. Customised elements will be needed as we go through section-by-section in implementing this new responsive design, but with a solid foundation, new elements will likely follow the set patterns.

We’re building and testing the new homepage now, so expect to see it in the near future. Thanks for reading, and we would love to hear your feedback on what we have come up with.

Complete homepage design on the homepage Complete design on a small screen

About jarridb

@jarridb
This entry was posted in Uncategorized and tagged . Bookmark the permalink.