Optimal Blog

Co-design is a powerful way to improve design processes in two ways: speed and quality. When your work environment allows and encourages people to work remotely in a temporary or permanent way – as we do at Optimal Workshop – we need to get creative if we want to find ways to include everyone.

After a research project, my marketing team was looking at redesigning our Enterprise landing page. We wanted to speed up our experimentation and determined that collaboration was the best approach. Ideation exercises require more than just a team of designers –  we needed to involve the right people with the right knowledge. To generate more diverse, creative and insightful outputs, we invited different personalities as well as different roles. Our team was comprised of a mix of sales, customer success, marketing, developers and designers. All located in different locations around the world, including the United States, New Zealand, France and Ireland.

To make this global session happen, we used Mural, a digital workspace for visual collaboration. It’s a great way to explore ideas in a collaborative space from anywhere with an internet connection and a laptop.

What is a co-design?

A co-design is a fast-paced workshop that generates abundant and diverse ideas beyond what just one individual can produce.

What does it involve?

A clear plan

Define the problem you want to solve, articulate user needs and any pain points you’ve identified. It’s also important to explain why this problem is something worth investigating. This preparation work will help to cut back on inefficient conversations and ensure your team and stakeholders are aligned on goals, opportunities and problem statements.

HMW (How Might We)

HMW questions are a way to frame the challenge you are trying to solve using short, compelling questions to spark creative thinking and discover solutions.

Divergence

Diverging is a quantitative process where you create as many ideas as possible by answering the HMW questions. Each member then presents their ideas while the rest of the team writes their feedback on Post Its in two ways: ‘I like’ – what you like about the solutions and ‘I wonder’ – how you might improve the solutions.

Convergence

Converging is a qualitative process. Once everyone has presented their ideas and looked over the feedback, it’s time to consolidate the best designs into one solution. After presenting their solutions, team members vote on their favorite ideas or the most compelling features by placing stickers on the ones they like. Commonly, each person should have 3 stickers.

What do you want at the end of the co-design?

Once you’ve passed through the divergent and convergent stages for your HMW questions, you’ll hopefully have some key areas of impact to focus on that are worth prototyping in the form of a wireframe or a higher fidelity design. Using this process, you should be able to develop a design that incorporates input from all disciplines and departments.

Tips for running a co-design:

Plan ahead

• 8 people max per workshop
• Prior to creating a calendar invite, ask who would be interested to participate via a message or in person. Allow teams to choose who will represent their team.
• Have your low-fidelity sketching supplies ready: Post-its, markers, blank sheets etc

Setting the context and explaining the rules

• Write a description within the calendar invite to give some context prior to the meeting. e.g “What we are working on?”, What will we do with the output?” and “What if I am busy and can't come?”.
• Send reminders the day before to make sure people are registered to the software you might use, specify if they need to bring anything specific(laptop, tablet, etc).
• Adding a "What’s coming" section to the agenda helps people to stay on track.
• Set a clear presentation to encourage creativity – inspire your team!

A timer

• A mechanism for tracking time down to the minute is crucial for keeping track of the work achieved.
• Schedule a good amount of time for feedback and voting.
• Allow a 5 to 10 min break time.
• Involve a second facilitator to help with time tracking.

How we ran a remote-friendly co-design

What worked well?

True effort  and planning

The classic paper/post-it system isn’t suitable for remote workers. Despite video conferencing, it is still hard to hear everyone or read a whiteboard. I wanted a tool that would allow me to include everyone the same way, and allow easy follow up on the achievements. This system needed to work even for people who couldn’t attend or had to leave halfway through the meeting.

Feedback received:

• "It takes real effort to get these up and running and the use of other software to make use of the time of everyone" 
• "I can’t imagine doing workshops in any other way in the future"

Communication with remote workers

Avoid questions like “please vote if you are okay to come in early” which makes remote workers feel bad.

Feedback received:

• "Remote workers feel like they’re a burden in meetings, but you made us feel super included"

What could have been done differently?

Time and people management

Handling time and people is tricky, you can easily run out of time and be forced to rush through the last steps of your meeting. Don’t hesitate to ask for help facilitating the co-design.

Feedback received:

• "More time to give feedback to everyone's ideas would have been nice"

Remote organization

Find a way to be as inclusive as possible, like finding a remote solution for snacks and drinks.

Feedback received:

• "Consider snacks for overseas people or let us know that we should get something to be included in that"

Tips for running a remote-friendly co-design:

A well-chosen space and time

Involving people from multiple countries or time zones requires preparation and consideration.  Don't be afraid to ask people to arrive earlier than their standard working hours.

Collaborative tools

• Use inclusive tools during meetings that allow everyone to follow the work being done. Also making sure that the tool makes it easy for people to come back and review the work later if they can’t attend the meeting.
• Set up a Mural board that will replace your slide presentation. Everything should live in same place including Context, HMW, dedicated places to upload images etc.
• Make sure everyone knows how to use all of the tools needed. It might help to start with a small exercise to help everyone get familiar with it. If there’s not enough time for it, set that exercise prior to the meeting (maybe as part of your reminder).

Manage noises

Depending on the number of participants, background music can prevent remote workers from hearing and understanding conversations.

• Avoid background music.
• Manage people and time to avoid banter and chit chat where possible..

Be inclusive

Make sure everyone feels like they’re part of a team rather than a burden for being remote. Allow time for questions, repetition and clarification.

• Avoid questions that make remote workers feel bad like “please vote if you are okay to come in early”.
• Allow time for questions, repetition and clarification.
• If you plan some snacks and drinks, either include it in your workshop budget or let the remote workers know they can bring their own food (depending on timezone).

Note: This is part 2 of our series on great website navigation. You can read part 1 here.

Early on in my career, a wonderful mentor of mine shared what I consider to be my all time favourite analogy for describing the difference and relationship between information architecture (IA) and navigation. She called it the warehouse and the department store.

A department store is a beautiful space with many different product category based departments joined by clear, wide and well lit pathways. These pathways are lined with featured products highlighting the best each department has to offer and the order and placement of each department makes perfect sense to customers.

Women’s clothing is the largest department and adjacent to it, you will find the women’s shoe department and a little bit further down, women’s handbags and accessories. It flows intuitively allowing customers to find everything they need without having to hunt for it.

As for the warehouse, it’s out the back of the store but it’s also hidden in pockets throughout it supporting the department store experience every step of the way by making it easy for staff to access extra stock or store special orders for customers. It’s not that nice to look at it, but without it there wouldn’t be a beautiful department store to shop in. The warehouse is the IA and the department store is the navigation.

I’ve written about and have worked with IAs a lot throughout my career and today I am especially excited to step out into the department store and share some examples of great website navigation. I’ve trawled the internet and have pulled together (in no particular order) what I think are some great website navigation examples, so let’s take a look at them and why they’re awesome.

6. Walmart

Speaking of mega menus, Walmart’s approach to guiding website visitors through its gigantic IA is quite clever. Hidden neatly away under a hamburger menu, Walmart’s mega menu uses vertical navigation instead of a horizontal dropdown that many websites with large IAs use (see below image).

A website visitor can easily see all the categories and all the content labels below either by hovering over the level 1 labels or by clicking on them — clicking results in a pink line appearing under the label (see below image) making it easy to see where you are in the menu.

Selecting ‘See All’ next to ‘Departments’ takes the website visitor to a clear and simple site map-like page allowing them to see the whole IA on one page with no visual distractions at all (see below image).

Overall, Walmart’s simple and structured approach to surfacing a mega menu through vertical navigation is pretty awesome.

7. Android

Android’s website has quite a few great navigational elements. Like a lot of technology websites, the home page is clean and simple and has a top navigation bar that hides when a website visitor scrolls down and reappears when they scroll up. The content carousel that sits at the top of the home page on opening is manually driven by the website visitor and doesn’t autoplay which is an awesome thing to see from an experience and accessibility perspective for all users. The rest of the content on the home page is sectioned off into clear horizontal groups and each one features its own manually driven carousel and filtered navigation by device type which is consistent, easy to understand and visually engaging (see below image).

8. Disqus

Disqus’s navigation menu is simple and flat. It has a universal top navigation bar with just four labels and only one of them (‘Features’) has suboptions to choose from. It works well because there’s nothing that doesn’t belong there and the labels clearly indicate what lies beneath. The dropdown menu that appears on ‘Features’ is quite interesting. If a website visitor hovers over it, the menu showing four suboptions appears and stays in place until the cursor is moved away from that space and then it hides. If ‘Features’ is clicked, the menu stays dropped down in place regardless of where a website visitor moves their cursor to until another link (that could be anywhere on the page) is clicked on. This is great because it responds to two different types of visitor behaviors where hovering might temporary and clicking might be ‘I want to take a closer look’ — it doesn’t matter what the visitor does, the menu is presented in a natural and intuitive way. And it’s worth taking a closer look because regardless of whether ‘Features’ has been hovered over or clicked on, when a website visitor hovers over those four options underneath, cute and friendly colour coded illustrations appear providing a nice human touch to the navigation experience (see below images).

9. Purple Orange

Purple Orange is a creative agency with a single page website that has a fixed vertical navigation menu that works really well. When a website visitor scrolls down the page, the text labels in that menu which is designed like a table of contents are highlighted in orange to show them where they are on the page (see below image). Website visitors can also navigate the content by clicking on the menu labels.

The thing I really love about this navigation experience is the layered approach to the visual design of the page. The content sections are visually divided by full width image banners and the fixed vertical navigation bar sits at the very foreground of the page. As a website visitor scrolls, all the content just passes behind it. It’s really beautiful. Navigation on single page websites can be tricky and many often end up just being a long scrolling page. This example highlights a great way to maintain that nice flat and uncomplicated one page feeling and add in an intuitive handrail to guide visitors.

10. Angry Bear

For our tenth and final example this time around, another single page agency website, Angry Bear, caught my interest due to its wonderful use of visual storytelling in its navigation experience. Upon arrival at the website, the visitor is presented with the image above. They land on the page standing at the top of a waterfall with a sign warning them to ‘beware of cliff falls’ as a howling bear shaped rock looms in the distance. The visual illustrations that form the backbone of this website make for an intriguing experience that transports the visitor to a far away forest - it doesn’t feel like a website and it’s awesome! The navigation menu is hidden under a dark red pull out tab with the logo on it on the left hand side of the screen and can be opened either by clicking on it or by scrolling down the waterfall (AKA the page). Once opened (see below image) the visitor is delighted with cleverly worded labels that clearly indicate the type and intent of the content but keep the story and the bear theme going. Instead of ‘Contact us’ it says ‘Yell for help’ and ‘Awards’ are ‘Trophies’.

The further the visitor scrolls down the page, the deeper they descend down the waterfall and into the darkness of the forest below. Angry Bear’s portfolio of work with the label name of ‘Public Works’ has a really interesting filtered tile navigation system (see below image).

A website visitor can view all or can filter by type which eliminates all the tiles that don’t match the selection and clearly shows what has been selected by the animated filter which removes the background behind the label and has two arrow shapes pointing at it from either side (see below image showing the ‘Design’ filter in action).

Finally, as the website visitor scrolls all the way down to the bottom of this one page website, the waterfall has become a tree lined stream trickling across the forest floor and the ‘Yell for help’ contact form does not disappoint with its note about how ‘bears can be difficult to track’ (see below image).

There’s just ten examples of great website navigation — what are your favourite examples?

At Optimal Workshop, we're always looking to further the practice of user research. That's why we developed a powerful set of user research tools focused on quantitative and qualitative user testing.

This past year was a big one for us. We attended UX conferences all over the globe and met with researchers and designers in all sorts of organizations. We also continued to build up a solid list of best-practice tips from our community.

That’s what this article is all about – sharing our top user research tips. Some of these are as time-tested and true as the practice of user research itself, and others are starting to take off. Let’s dive right in, but if you’ve got any of your own, feel free to let us know!

1. Extend an olive branch to those unfamiliar with user research

In an ideal world, user research would sit at the heart of every organization. It’s a practice that benefits other teams and specializations and improves itself thanks to outside input. But, building those bridges isn’t always easy – especially if the practice of user research is still quite new within a company.

So what’s the best approach? It’s as simple as extending an olive branch to relevant areas of the organization. Typically, this means product, marketing, sales and data science teams. At Optimal Workshop, we’ve found that a great way to break these inter-team barriers down is simply by going out for a coffee and talking about the ways in which your two disciplines can collaborate.

If you’re interested in learning how to explain the value of user research, check out this article we wrote here.

2. Understand the value of a combined research and data science team

Research and data science are often siloed within organizations, but this is a missed opportunity. Data allows you to identify problems and dismiss assumptions, helping you to figure out what to do next. Sound familiar? User research and data science use different methodologies to answer the same questions, and when combined together the outputs can be much more fruitful. As speaker Mila Dymnikova said at UX New Zealand this year: “Data science can add a competitive edge to your UX team”.

We don’t have an actionable point for this research tip, other than to head over to your colleagues in data science and start up a conversation. If you don’t have any data scientists, think about the areas of your organization where people are utilizing data on a regular basis and start there.

3. Always establish clear research questions

Before you even think about running a usability test, it’s important to establish your research questions. Creating these at the beginning of your project will help you identify which methods to use, what you’ll discuss with stakeholders and where you’ll be able to uncover existing data.

As for example research questions, here are 2 to get you thinking. Remember: research questions should be both actionable and specific.

• “How do people currently use the wishlist feature on our website?”
• “How do our current customers go about tracking their orders?”

4. Focus on facts, not opinions

Whether you’re having a discussion with a stakeholder, a designer or a user, it’s all too easy to interpret opinion as fact. Steve Krug, in a 2005 interview with BoxesAndArrows, explained this quite well: “One of the problems web teams face is that we all have a lot of personal experience as web users, so we all think we know what makes a site good”.

“As a result, most design discussions are full of strong personal opinions, usually disguised as facts… it’s very appealing to have someone you can turn to for definitive answers”.

Being able to discern between a fact and an opinion isn’t always easy, and it's something that takes time to master. Before you head into your next stakeholder consultation, try to recognize when someone may be voicing a personal opinion instead of an impartial statement.

5. Reassure your interviewees

Before you start an in-person user test, one of the best things you can do for your participants is to make sure they’re comfortable. You can do this by explaining what’s expected of them, that you’re not testing them (you’re testing the design/product) and to ask questions if they need to. After all, the user testing process is a two-way street.

This is partly why we recommend all user researchers take a turn in the
participant seat and go along to a user testing session.

This is a great video from Google Ventures on the user interview process.

6. Figure out the correct location

Before you book a meeting room for your next usability test, consider the importance of location. You may not want to book a quiet meeting room if the thing you’re testing is often used in a loud or otherwise distracting environment. Take an app for construction workers as an example. You may find that you get much more useful data by carrying out your usability test on a loud construction site, so you can see what your users will typically have to deal with when using your app.

7. Combine OptimalSort and Chalkmark

There’s no overstating the importance of card sorting when building an IA or testing first impressions when reviewing designs. That's why OptimalSort and Chalkmark are so useful. But, did you know you can use these tools together too?

Here are 3 of the ways you can combine OptimalSort and Chalkmark:

1. Test the viability of your concepts and find out which one your users prefer most
2. Test your IA through two different lenses: non-visual and visual
3. Find out if your labels and their matching icons make sense to users.

Check out the expanded article here where we explain each of the above approaches.

8. Use Reframer to make sense of your qualitative user research

Most qualitative research is, by its very nature, messy. Unlike the relatively clean, number-focused world of quantitative research, the world of qualitative research is all about the ‘why’. It’s exploratory, focused on reasons, opinions, behaviors and motivations. So how do you make sense of all this ‘messy’ data? Our qualitative research tool Reframer is one of the easiest ways.

Here’s how it works: When running a user test, store your observations in Reframer. Then, add tags to classify each observation. Tags might be things like sentiment (happy, sad, frustrated, etc) or based on actions or progress (succeeded or failed).

9. Understand the value of observers

Forget about lengthy presentations to your organization. Bringing people into your user testing sessions as observers (or notetakers) is one of the best ways to show the value of user research to others. Think about it. You’re able to:

• Put other people within your organization in front of your users
• Demonstrate the value of talking to users about how they use your products and services
• Build up a common understanding of what research is and why it’s useful.

Getting these people into your research sessions is as easy as asking. The next time you come across someone from sales, marketing or your product teams, ask if they’d like to come along to your next user test.

10. Share your findings within your organization

Research for research’s sake is only viable in certain organizations – typically institutions like universities and colleges. In most other instances, research should be socialized with the wider organization.

Of course, it’s also worth noting that research should be carried out with the support of other teams from the outset. That is to say, you don’t want to turn up to a meeting and drop 3 months’ worth of research on your marketing team. Ideally, you’d work with those other teams to figure out their needs, carry out the research, then communicate it back to them.

11. In a user interview, just listen

A user interview is an opportunity to hear real peoples' thoughts on your product or service or a particular problem you’re studying. To that end, listen! Of course you’ll need to ask your questions, but remember to sit back and let them speak as much as they need to. Jumping in whenever there’s a lull in the conversation will only mean you’re potentially cutting them off when they may have more to say.

12. Recruit diverse participants

It’s always a good idea to recruit a diverse range of participants when you’re running your user tests. Try and get a good spread of jobs or roles, experience with what you’re testing, ethnicity and gender. You may also want to consider recruiting people whose native language is not what you’re using in your product or service. Using recruitment services is a good way to capture a spread of people if you’re struggling within your traditional circles.

13. Take time to unpack testing sessions with your team

Once you’ve wrapped up a testing session, take the data back to your team and unpack it as a group. Analyzing the results of your test in a roundtable format will mean you’re more likely to pick up on more themes and patterns than you would alone. Of course, this can be a hard thing to do, especially if you’re used to working through your results alone.

We find it’s helpful to ask a range of different people within your organization, such as data scientists, sales staff and designers, in addition to user researchers.

14. Run a survey within your organization

User research is often about turning outwards to gather opinions from the people using your product – but it’s also a useful internal tool. Use the same methods and processes you practice on your users to gather internal data. For example, run a survey about the way research functions within your organization, with a focus on how other people think research should operate.

15. Don’t rely on your memory

It’s all too easy to get caught up in the moment during a research session and forget to take notes. But don’t rely on your memory for anything! Whenever you hear an interesting point or think of a good next step, note it down. This is partly why we recommend bringing along a guest notetaker to take over this job for you.

16. Get your users to tell you a story

Instead of asking your users direct questions, get them to tell you a story. This is a great way to learn about how they think about something from start to finish. It’s quite a simple concept. For example, imagine you want to better understand how your users buy projects from your online store. Instead of asking them a direct question about the checkout process, ask to explain how they go about purchasing a product online. Besides learning more about the area you’re interested in, you’ll find that they give you useful background information on the process that you can use as part of your research.

17. Get a mentor

This isn’t a user research-specific tip, but it’s one that’s worth mentioning all the same. Getting a mentor is one of the best ways to progress your career, as they’ll be able to help you figure out where you want to go and how to get there. A good mentor will also be able to point out development opportunities and even keep an ear to the ground for potential new jobs that might suit you. In a nutshell, a mentor will help you to improve.

18. Get a mentee

On the flip side, it’s also a good idea to consider taking a mentee under your wing. This type of relationship can be fruitful for both parties, with mentees able to gain much of what we discussed above, and mentors able to reinforce their own learnings by teaching them to someone else.

19. Remember: You are not your user

Back in 2010, in the early growth days of social media, Google launched a new product called Google Buzz. Everything seemed set for a great launch. The product had gone through internal testing 20,000 Google employees and it had significant buy-in. Unfortunately, Google Buzz launched with a feature that generated a number of complaints and had to be quickly taken out. Shortly after that, Google Buzz was shut down entirely.

There’s a key lesson here for anyone involved in product development: You are not your user! Also known as the false-consensus effect, Raluca Budiu explained it best writing for Nielsen Norman Group: “Designers, developers, and even UX researchers fall prey to the false-consensus effect, projecting their behaviors and reactions onto users.”

Avoiding this bias isn’t too difficult. Always keep your users front of mind, involve them in the design process and make a point to interact with them regularly.

Try our powerful UX research platform

Understanding the importance of user research is just the first step. To get usable insights that you can use to make decisions you need the right set of tools – and that’s why we’ve developed a suite of 5. OptimalSort can show you how people think the pages on your website should be grouped, and Treejack can show you where people are getting lost. Try them all for free here.

Early on in my career, a wonderful mentor of mine shared what I consider to be my all time favourite analogy for describing the difference and relationship between information architecture (IA) and navigation. She called it the warehouse and the department store. A department store is a beautiful space with many different product category based departments joined by clear, wide and well lit pathways. These pathways are lined with featured products highlighting the best each department has to offer and the order and placement of each department makes perfect sense to customers. Women’s clothing is the largest department and adjacent to it, you will find the women’s shoe department and a little bit further down, women’s handbags and accessories. It flows intuitively allowing customers to find everything they need without having to hunt for it. As for the warehouse, it’s out the back of the store but it’s also hidden in pockets throughout it supporting the department store experience every step of the way by making it easy for staff to access extra stock or store special orders for customers. It’s not that nice to look at it, but without it there wouldn’t be a beautiful department store to shop in. The warehouse is the IA and the department store is the navigation. I’ve written about and have worked with IA's a lot throughout my career and today I am especially excited to step out into the department store and share some examples of great website navigation. I’ve trawled the internet and have pulled together (in no particular order) what I think are some great website navigation examples, so let’s take a look at them and why they’re awesome.

1. Mailchimp

There’s a lot to love about Mailchimp’s website navigation. The overall navigation experience is simple and clean with beautiful illustrations accompanying each content category which makes them all feel just that little bit more human. The unexpected animation that appears on hover on the logo is a nice touch that engages visitors and winks at them as if to say “Yes, this will take you back to the home page”.

The universal navigation bar at the top of the page hides when a website visitor scrolls down the page and reappears when they hover over the top of the page or scroll back up. It hides when you’re moving away from it and it reappears when you’re moving back towards it. I also find Mailchimp’s take on a fat footer (see below) especially interesting — it fills an entire page view and works quite well.

A footer has many jobs including: communicating to website visitors that they’ve reached the bottom of the page, housing content that doesn’t belong anywhere else (e.g., privacy policies, social media links etc) and it serves as a safety net for people who might be feeling a bit lost. Mailchimp’s fat footer has five sections that are not overwhelming at all and is consistent with the rest of the website through its clear and simple content groupings and functionality.

2. Mosster Studio

With a riot of colour and delightfully animated illustrations, Mosster Studio’s website is amazing to look at. It also takes that animation one step further through a really cool navigational feature that helps orient website visitors. The top navigation bar is sticky on scroll and the building block-like shapes for each page are animated — on hover they push out and on click they push in as shown in the below image for the ‘Info’ page.

This is a really nice way to show people where they are on this website and it’s definitely consistent with the overall experience. This website also has a sticky minimal non-footer footer that can be seen at the bottom of both the images above. It works because it only has two items in it — copyright information and the privacy policy — and no matter where you are on the website, it’s always there within easy viewing and reach. I feel that it’s just right for this particular website. The IA is quite shallow and the sticky top navigation menu ensures that the footer safety net isn’t really needed in this case.

3. Brit + Co

Brit + Co is a media company and the thing I really love about their website navigation is what happens when a website visitor clicks into an area called ‘So Spring’. It’s a single page space with seasonal specific content where the main website top navigation bar is replaced by a single label in the header. It feels like a website within a website — it’s connected to the main website which is easily accessed through the link on the logo and the subscribe call to action (CTA) is still there, but it definitely has its own architecture and navigation style.

When first opened (see below image), the label at the top says ‘So fresh + So Spring’ and the visitor is presented with a gorgeous wide, animated banner with a woman walking across the page and turning around while carrying an enormous bunch of flowers.

Then, when the website visitor scrolls down the page to the next content section, the header automatically changes to show them where they are in this mini website as shown in the below image when I scrolled down to the ‘Gardening’ section — awesome!

This dynamic navigation feature also contains a dropdown menu allowing website visitors to see all the other topics at a glance and directly navigate between them (see below image).

I feel that these navigation choices make this presumably temporary online space even more immersive and really well thought out.

4. Mental Floss

Mental Floss is a long time favourite website of mine. In addition to its fun articles, quizzes and amazing facts generator — did you know that the national animal of Scotland is the unicorn?! — it also has a super cool transforming navigation menu. It starts out as shown in the image above with a big orange square in the top right hand corner that’s simply labelled ‘Menu’ that when clicked, opens a large, full page menu as shown in the image below.

When a website visitor scrolls down the very long home page, the header transforms into a sticky top navigation bar (see below image). The original menu tile is still present and produces the same menu shown above when clicked, but has been shrunk down and attached to the newly transformed sticky navigation bar.

As the website visitor’s journey progresses further down the home page, clearly sectioned groups of content with their own micro navigation menus start to emerge — funnily enough, there’s one called ‘Sections’ that has a mini vertical side navigation (see below image) and this group of content also appears under the menu tile we saw a few moments ago.

Mental Floss is like a rabbit hole in the best possible and most immersive way. Its transforming and intricately connected navigation works because it’s completely consistent with the experience of having a place to go and just get lost in interesting content. I love it.

5. Airtasker

The category section on Airtasker’s website is — as expected — quite the mega menu. The overall website navigation is fairly simple with a fixed header running along the top of the page and the ‘Categories’ label does not lead to a landing page — it exists purely to launch that mega menu. What I really like about this navigation example is the way a website visitor can filter the category content at that very high level of the IA through the mega menu with one click by indicating if they are looking for work or looking to hire someone (see below image).

The categories themselves don’t reduce, increase or change in any way at this level, but the content below them is filtered to match the selected view so that when a visitor clicks into their category of choice, they’re only shown the perspective that matters to them. For example, if a website visitor selects ‘I’m a poster’ and then selects the ‘Catering’ category, they will be taken to the below screen.

And for the same scenario in reverse where ‘I’m a tasker’ is selected before selecting ‘Catering’, this is the screen that appears (see below image).

I think it’s a really cool way to chart that navigation course upfront and completely avoid content that holds no relevance in that moment.

Read part 2 of this series here

Note: We recently updated this post after receiving some feedback from our community.

There’s a long-held myth in the world of web design that search solves all problems. That, instead of needing to build out useful navigation that makes sense, you only need navigation that’s ‘good enough’ as people will just tend to use search anyway.

This isn’t actually true.

Back in 1997, Jakob Nielsen ran a series of usability studies and found that over 50 percent of users were “search-dominant”. Basically, these people would go straight for the search button on a website without paying much attention to the navigation. This was a by-product of the time. The internet was really just starting to grow, and search was the best way to cut through much of the chaff of early websites.

But times have changed. In this article, we’re going to take another look at the search versus navigation argument through the fresh perspective of another year, and then dive into some of the ways you can improve your own website’s navigation

Search versus navigation: No easy answers

As we saw in the example from Jakob Nielsen, users were largely search-dominant at one point, but this was over 20 years ago. A lot has changed since then, especially in the way that people seek information.

In 2003, Katz & Byrne found that most users preferred navigation over search, although this depended on "the layout of the home page and the site’s information structure". Gerry McGovern found something similar, with his team running task tests with a technical audience. The result? 70 percent started the task by clicking on a link, and 30 percent started with search. He noted that people use navigation first because it’s both easier and faster to click on a link than to use the search box.

Interestingly, even Jakob Nielsen acknowledged in 1997 that, despite the obvious tendency for users to head straight for a search button, navigation was still key: “Despite the primacy of search, web design still needs to [be] grounded in a strong sense of structure and navigation support: all pages must make it clear where they fit in the larger scheme of the site”. He noted that there were a couple of primary reasons behind this thinking. Firstly, web design still needed to account for those people who didn’t use search, and secondly, users who arrive on a page still need structure in order to understand how the page fits into the rest of the website.

Of course, if the navigation in place is poorly organized or doesn’t accurately reflect the content of the website, you’re likely going to see an uptick in search usage or just lose users entirely. In other words, if the navigation isn’t up to standard, people will be pushed away from using links. In Gerry McGovern’s article, he states that: “Clear menus and links are the foundations upon which all great websites are built”.

Other research supports the view that while in-website search is still a popular option for many users, the navigation cannot be an afterthought. An article from Kissmetrics points out that, in a survey of over 100 survey respondents, over half preferred to use navigation over search. Interestingly, 47 percent of respondents said they preferred to filter down to specific product details rather than use search functionality on the website.

Much of how people use websites comes down to the purpose of the site itself. With retail websites, for example, you’ll likely have a large subset of users who know exactly what they’re looking for and will subsequently use the search function to quickly find their item. Using the example of a website that sells books, a user looking for a particular book is far more likely to use the search functionality than go through pages of titles.

There’s really no easy answer to the question of search versus navigation – but there also shouldn’t be. In 2019, website design needs to account for different user journeys and information-seeking approaches. You need to account for the search user and the navigation user – as well as the different ways they’re likely to use these 2 approaches together.

Understanding levels

For many designers, the idea of a website with multiple, deep levels may run counter to the idea of a website that’s easy to navigate – but this isn’t the case. It’s true that broad-and-shallow architecture makes it easier for users to find content, but a significant portion of Google’s visits are via a mobile device – meaning there’s real value in migrating to a narrow-and-deep architecture. If you’re wondering how to go about this, a closed card sort is the most relevant testing approach.

The key thing to keep in mind here is that there’s nothing wrong with having multiple levels, even multiple deep levels, as long as the navigation (supplemental and contextual) is suitable.

Two ways to improve your website's navigation

Include a proper footer

The website footer is an often overlooked part of a website’s design, thought of as merely an afterthought to drop at the bottom of the page. Despite just how underrated they are, footers are an essential part of a usable, accessible website. For people scanning your website, a footer is a great place to showcase other interesting pages, and it’s also a useful way to point people to pages they may not know they’re looking for.

Run a tree test

If you’re looking to improve an existing website, you should start by looking at your information architecture (IA). Your IA informs the navigation on your website, so if you want to address navigation issues, it's best to start there. As for actually fixing your IA, it's best to start with a tree testing tool like Treejack, which can identify bottlenecks and other issues. Then, you can use a card sorting tool to brainstorm possible fixes and then run the tests again to measure any improvements.

Keep in mind that tree testing works best the more you do it. You should test, make changes, test again and keep repeating the cycle for best results.

If you’re interested in diving into more navigation resources, Nielsen Norman Group has a great section here.

Welcome to another UX New Zealand 2019 speaker interview. In the lead up to the conference (which is just around the corner!), we’re catching up with the people who’ll be sharing their stories with you in October.

Today, we chat to product design managers Sophie Taylor (ST) and Julie Jeon (JJ).

Thanks for taking the time to talk to me Sophie and Julie. Let’s start off with your history. How did you get started? What originally got you into product design?

JJ: It was a surprise! Throughout my time at university, I was gearing up to become a book/publication designer. After a sequence of unanticipated events, I found myself working at Trade Me on the mobile apps. I had a pretty solid plan around what I’d do after my studies at the time but it was the first unplanned decision I made, probably in my whole life, and I’m really glad I took this path. In hindsight, a lot of things I’d think about when designing a book (like how a reader would interact and navigate through the book and presenting the information clearly) were all very relevant to product design. I was also a big stats nerd during school, and I was happy I could revive that through the measure and learn approach you’d take working in product.

ST: My pathway to design was via some pretty nasty homemade cards. You know the ones; all three primary colors and too much glitter? As a kid, I couldn't get enough of the stuff, and despite the questionable taste of my creations, I was captivated by the process of making things. As I grew up this stuck with me. When I landed at university I still wasn't sure what I wanted to do and it was in the design department where I found I could learn about an endless range of topics while solving problems and making things. That in combination with a computer science paper landed me squarely in the digital world and that is where I have been ever since.

Can you speak to product design at Xero? How has it evolved in the time that you’ve been there? How do you see it changing?

ST and JJ: As the company has grown, so has the size and number of teams we are working with. Going from collaborating with a few people to a whole room of people has changed our approach. We’ve adapted and made new ways to share knowledge and work together as a bigger team, from plain old documentation, to sessions that focus on improving the design process and how to best work with development teams as designers.

Julie – You say you aspire to be a good coach to others. How does this manifest in your day-to-day?

JJ: For me, it’s been about spending time with people to encourage but mainly to listen. It goes for the talented and smart designers I’ve had the pleasure of working with, but also with the development teams and product people. I don’t think I approach people with an intent to ‘coach’ them, it’s more about working and getting better together as a team or discipline.

Julie – What are you passionate about outside of your day-to-day in product design?

JJ: In my spare time I exchange letters to my pen pals who are scattered all around the world from Tokyo, San Francisco to Toronto and more. It’s a privilege to be able to be a part of and get a glimpse into the various life stages that my friends are at. I’m also very much obsessed with my small indoor garden and making sure my kitten doesn’t eat any of it.

Sophie – Working at both TradeMe and Xero you’ve worked in two of the biggest tech companies in Wellington. How do they differ?

ST: I think the main thing is the subject matter, both were fascinating dives into domains with very different users. It was such an amazing opportunity at Trade Me to work on a local product that so many of our family and friends use and care about. At Xero it has been a real treat getting work on a global product and all of the challenges that come along with that.

Sophie – You’re a self-described tinkerer. What do you like to tinker with?

ST: I like a good project, anything from our vege garden, house renovations through to a fiber optic light dress my friend Lisa and I made for the LUX light festival a few years back.

What do you think is the single biggest challenge for multidisciplinary teams?

ST and JJ: Finding productive ways to solve problems together from start to finish is a big challenge which requires a lot of thinking ahead and preparation. But when it happens, it’s well worth the effort. Coming to agreement around what’s most valuable to solve first, making sure everyone is getting the opportunity to be part of the process to define the solution, deciding what to ship and evaluating if it actually solves the problem are some of the things that benefit from teams working together on. All of these steps need to be done in a way that’s right for the team to get the best outcome.

What do you think is the biggest mistake that organizations make when assembling multidisciplinary teams?

ST and JJ: It can be really difficult for a team if they don’t have a shared purpose. When a team is clear on the problem they are faced with, they can figure out a way to solve it that makes the best use of the strengths of the team, as well as the individuals within it. If a shared purpose is the foundation, a team with diverse perspectives ensures there are a wide range of ideas, approaches and risks identified during the process. This is more than just different disciplines too – this could be things like personality and working style as well as gender, age, and ethnicity.

Favorite thing about living in Wellington?

JJ: The easy access to nature is my favourite thing about Wellington. There’s always a hilly walk nearby, whether you’re in the city or out in the suburbs. I live near Wrights Hill out in Karori, so we’re always in the company of tūī and kākā out in our garden.

ST: Mine too! We are so lucky to live in a city where just down the road there are a number of beautiful walks to choose from. I am also a big fan of food and here in Wellington we are spoilt for choice.

Thanks for your time both, and see you at UXNZ!

UX New Zealand is just around the corner. Whether you're new to UX or a seasoned professional, you'll gain valuable insights and inspiration - and have fun along the way! Learn more on the UXNZ website.