top of page

The Context:
Spark, a leading telecommunications and digital services company in New Zealand, aims to enhance the user experience of its large business and government customers by revamping its website and introducing an improved mega menu. The project focuses on streamlining access to information and services, making it easier for these customers to find the resources they need. 

​

The Challenge:

To redesign Spark's website and implement a mega menu that effectively caters to the specific needs of its large business and government customers. This entails creating a user-centric design with logical information architecture, customised content, and responsive design while maintaining brand consistency. User testing and feedback are vital to ensure an optimal user experience.

​

Solution:

The solution to the case study involves the redesign of Spark's website and the implementation of an improved mega menu for large business and government customers. After going through the design process and ideating a number of solutions, testing these with customers, and numerous reiterations we landed on final designs which have been added to Spark's design system. 

Designing Spark's large business and

government website and mega menu

SPARK WEB

2022 – 2023

User Story

As a visitor to the site, not sure what I'm looking for, I want to explore what solution areas Spark covers that are relevant to me; So that I can understand what offerings might help me solve the problem that has brought me to Spark's website. 

Project goals

Enhance usability and accessibility for large business and government customers.

Improve information architecture to streamline content discovery.

Develop an intuitive mega menu for efficient navigation - that works across web and mobile.

User Interviews

We conducted one-on-one interviews with a diverse group of large business and government customers to capture their experiences, needs, and frustrations when interacting with Spark's existing website. These interviews were instrumental in identifying the following key findings:
 

  1. Information Accessibility: Users expressed frustration in finding relevant information. They often had to navigate through multiple pages or sections to locate the resources they needed, leading to inefficiency.

  2. Support and Resources: Users highlighted the importance of access to support channels and resources such as documentation, case studies, and whitepapers. They wanted these resources to be readily available and easy to find.

  3. Complex Navigation: The current website's navigation was often described as complex and confusing. Users suggested the need for a more intuitive and user-friendly menu structure.

UX Research

DISCOVER AND DEFINE

Competitive Analysis

We conducted a comprehensive analysis of competitors' websites and websites from industry leaders. This analysis helped us gain insights into the best practices and innovations in the telecommunications industry. Some key findings:

  1. Mega Menus: Many competitors were successfully using mega menus to present a wide range of options to users while maintaining a clean, uncluttered interface.

  2. Information Hierarchy: Industry leaders focused on a clear and logical information hierarchy, enabling users to find what they needed quickly and efficiently.
     

Card Sorting

To further refine the information architecture of Spark's website, we conducted card sorting exercises with potential users. We provided participants with a set of content categories and asked them to organise these categories into a structure that made the most sense to them. This exercise helped us create an information architecture that closely aligned with users' mental models.

​

Surveys and Analytics

We also analysed website usage data and conducted online surveys to gather quantitative insights. These methods allowed us to understand the most frequently accessed content, the pages where users dropped off, and gather additional feedback on pain points users faced while navigating the site.

_

_

The key users for Spark's website and mega menu for large business and government customers include:
 

  1. Government Decision Makers and IT Managers: This group comprises government officials, department heads, and IT managers who are responsible for critical communication and data connectivity services. They require access to government-specific solutions, compliance resources, and efficient support channels.
     

  2. Enterprise Telecom Procurement Officers: Procurement officers and professionals in large enterprises play a vital role in sourcing telecommunication services and ensuring cost-effectiveness. 
     

  3. Business Solutions Analysts: Individuals in roles like solutions analysts within large business corporations are responsible for identifying and implementing innovative telecom solutions to enhance business operations and productivity. They seek comprehensive information on business solutions, case studies, and expert insights to support their decision-making and implementation processes.

Key Users

Data Insights

  • Over 9000 visitors per month

  • Nearly 50% are direct visitors

  • 75% are viewing the website via desktop

  • Organic search is ranking higher than competitors

  • High bounce rate of 76%

  • Low average time on site of 56 seconds

​

Customer Insights

  • Their visit is driven by an event or trigger i.e. identified a problem.

  • Two primary paths identified - looking for a solution or have a pre-identified solution and are comparing offerings.

  • Often looking for evidence that we can help solve their problem, once they have confirmed we are qualified they want to make direct contact quickly.

​

Stakeholder Insights

  • Make the customer the focus - their needs and language.

  • Bring our brand story to life.

  • Provide content for a range of decision makers at each stage of the buying journey.

  • Regular content creation is vital to keep us current and relevant.

  • Smooth the transition from online to offline.

Key Findings

The information architecture for Spark's website and mega menu redesign is designed to provide a streamlined and user-centric structure for large business and government customers.

​

  • It includes well-organised main categories, clear navigation paths, and logical hierarchies that allow users to access information, services, and resources tailored to their specific needs and goals.
     

  • We broke the product information down into five main categories: Connect, Protect, Monitor, Empower, Manage.
     

  • The mega menu is separated into these five key categories with further submenus revealing the specific product offerings.
     

  • The overall design is responsive, ensuring a consistent and user-friendly experience across different devices.

Information Architecture

IDEATE

Wireframes and prototypes were created to visualise the user interface and test different layouts and functionalities. These were iteratively refined based on feedback from users and stakeholders.

Wireframing and Prototyping

We incorporated Spark's brand guidelines to ensure visual consistency, employing a clean, modern design with an emphasis on high-contrast and accessibility.

Visual Design

Using the iterated version of the website and mega menu we conducted user tests over multiple days with both new and existing customers. 

Validating the designs

TESTING

  • 8 x 30min interviews with current and new users of the Spark website to test the website structure.

  • 10 x 15min interviews/ user scenario tests to focus on the mega menu - testing both desktop and mobile.

Methodology

  1. Usability Evaluation: Assess the overall usability of the website and mega menu to ensure that users can easily navigate, find information, and accomplish their tasks efficiently.

  2. User Satisfaction: Measure user satisfaction and gather feedback to understand how well the website and mega menu meet the users' needs and preferences.

  3. Identify Pain Points: Identify any specific pain points, obstacles, or frustrations that users encounter during their interaction with the website and mega menu.

  4. Effectiveness of Navigation: Evaluate the effectiveness of the menu structure, information architecture, and navigation pathways to ensure users can locate desired content or services.

  5. Content Relevance: Assess whether the content presented in the menu and on the website aligns with the users' expectations and requirements.

  6. Responsive Design: Confirm that the website and menu display correctly and function seamlessly across different devices and screen sizes.

Research goals

  • Most users easily located the mega menu, thanks to its prominent placement.

  • A significant portion of users found the labeling and categorisation of menu items intuitive.

  • Many users expressed satisfaction with the website's navigation, praising its ease of use and clarity.

  • Users who quickly found and accessed relevant content reported high satisfaction levels.

  • Several participants appreciated the website's clean and professional design.

  • The majority of users found the content within menu items and submenus relevant to their needs.

  • Responsive design performed consistently well on mobile.

  • While some users couldn't find specific information, most appreciated the availability of a search feature as a helpful backup.

  • Participants who struggled initially often adapted their navigation approach and improved their experience as they became more familiar with the site.

Our findings

After further rounds of iteration and testing we landed on final designs.

 

The final solution for the Spark website includes the following:

  • Simplified Information Architect: Restructuring the sitemap to simplify content access and ensure user-centric organisation

  • Mega Menu: Implementing mega menu with the five key categories and submenus beyond this.

  • Mobile Responsiveness: Ensuring mobile responsiveness with an accordion-style dropdown on the mega menu for users on mobile devices.

  • Visual Design: Incorporating Spark's brand guidelines to maintain visual consistency, accessibility, and a clean, modern design.

  • Component Library: Creating the necessary documentation and adding the mega menu to Spark's global navigation section of the Figma component library so that it can be used across the personal and small business sites also. 

Clear and concise navigation

SOLUTION

The website and mega menu are currently in the final design stage. The next steps for implementation would be as follows:

​

  1. Collaborate with the development team to build the new website with the revamped mega menu. This involves building the individual components and creating templates of each page. 

  2. Working alongside the content teams to produce all the necessary content (text, images, videos, case studies etc) needed for the website. This is to be added to the templated designs once built.

  3. Once built then it is vital to conduct thorough testing to ensure proper functionality and responsiveness across various devices.

  4. Roll out the updated website in stages, seeking feedback from users and making necessary adjustments.

  5. Continuous Improvement: Ongoing monitoring, user feedback collection, and iterative improvements to ensure the website remains a valuable resource for Spark's customers.

Implementation

 

bottom of page