Branding and Website

Navigator Networks

NavNet Rebranding

Products

Branding Design and Website Design & Development

Timeframe

6 weeks

My Role

UX Designer and Web Developer

My Responsibilities

Project Management, Competitive Analysis, User Research, Brand Design*, Information Architecture, User Flow, Website Design and Development, and Usability Testing

*This case study focused on the design and development process of the website.

Project Overview

The Problem

How might we connect NavNet’s brand identity with users to generate a positive perception in the market?

Background

Navigator Networks is an IT Solutions Provider specializing in Network Security and Architectural Services for Enterprise Infrastructure.

Navigator Networks has grown rapidly in recent years and has expanded its share of the cybersecurity marketplace. In this new phase of development, Navigator Networks identified the need to rebrand itself in order to convey an image that better matches the company’s new marketing strategy. This included changing their name to NavNet and rebuilding their website from scratch.

The Brief

«We need assistance creating a clear and concise brand identity that conveys our company’s expertise and core values.

Our goal is to build a website to provide an enterprise-ready look and feel while giving a straight and to-the-point idea of what we do and providing people with an easy way to engage us.»

NavNet Managing Partner

Target Audience

Customers: IT Managers of companies with 100-500 employees
Partners: Cutting edge technology providers

Process & Methodology

The design process follows four stages: Discover, Define, Deliver & Develop to validate and review the design decisions throughout the process.

Discovery

The discovery phase allowed me to define project milestones, audit the existing work, review the competitor landscape, understand our client’s vision and begin research into user needs, behaviors and pain-points.

Competitive Analysis

I performed a competitive analysis by taking a critical look at every aspect of competitors’ brands, from logo design and tagline to brand voice, messaging, and website. For the websites, I focused on UX analysis to evaluate their navigation, layout, and general usability.

The competitive analysis revealed the strengths, weaknesses, similarities, and differences between competitors and the opportunities that NavNet could benefit from.

Key Insights:

It is important to unify the visual identity of the company in order to convey its image in a more consistent way.
NavNet’s website needs to provide detailed information about the company and its services and products to attract potential clients.
It’s essential to improve the website SEO to make it better ranked and easier to find on search engines.
When navigating through the website, users should be provided with enough information to enable them to take action.
It’s essential to highlight on the website NavNet’s single-vendor approach and the Free Consultation option, giving NavNet an opportunity to stand out from the competition.

User Research

In order to build a concept of NavNet’s new visual identity and website, I conducted some user interviews.

I interviewed NavNet’s employees and clients to gain a better understanding of what they saw as the main issues and potential solutions to NavNet’s new branding and website.

Interviewing NavNet’s employees

I carried out a group interview with four employees from different departments. I was able to discuss their needs when approaching potential clients and partners. I learned what information and features are lacking on the website in order to support employees in performing their role for the company.

Interviewing NavNet’s clients

I separately interviewed two of NavNet’s clients and two potential clients. This helped me to understand users’ behavior, needs, motivations, and goals. In addition, I was able to evaluate what visual elements and colors could convey the best identity for NavNet and potentially generate a positive perception among the target audience.

Research Analysis

After the Discovery phase, I synthesized data from the research to map out the business needs and opportunities and users’ goals and pain points.

Key Insights:

The interviewees do not associate the company’s visual identity with its industry segment. Some think that NavNet’s logo and website do not convey confidence and the company’s expertise in IT and cybersecurity.
When looking for a cybersecurity service provider, customers expect to be able to find information about services that solve their needs in a friendly and easy-to-understand language.
For some customers, it’s important to be able to talk to an expert or a consultant to get personalized assistance regarding technical details before requesting a quote.
Customers that have technical knowledge prefer to buy products and services directly on an e-commerce platform.
Customers consider it important to have access to a dashboard to find information regarding their contracted products and services, as well as support tickets they have submitted.

Define

Empathizing with the User

With the information from the interviews, I started narrowing down the scope of the project, creating a user Persona. That ensured that further design decisions stayed user-centric.

User Flow Diagram

I mapped out the path(s) the user can take, in order to complete tasks to achieve their goal. This step helped me keep the design user-centered, by showing me what pages will be needed in the website from the perspective of my user persona.

Information Architecture

By analyzing the data from the Competitive Analysis and the user paths displayed in the User Flow, I held a brainstorming session with the client to map out and list the content that is needed on new the website.

We categorized the content and organized it hierarchically, determining the website menus and page labels. This allowed me to create the initial version of the Sitemap.

Develop

Ideation

My ideation process started with website sketches and low-fidelity wireframes. This was essential to validate the new website structure and user flows with the client.

Once the new website structure and usability were approved, I worked on the visual design, building high-fidelity wireframes to present to the client, and validating the new UI with two of NavNet’s clients through a video call.

Website Development

I developed the site in WordPress and uploaded it to the webserver with a temporary domain so that we could carry out usability testing.

Usability Testing

The usability test was performed remotely with individual video calls with each participant, three in total. The participants were given three different scenarios, each with a task to complete. I synthesized the responses and observations in a report. All participants were able to complete all tasks; however, they experienced some navigation difficulties when accessing the website from cellphones.

Based on these results, I made changes to the mobile version to improve usability and access to information.

Usability Test Objectives

Test website navigation
How easy/hard is it for users to navigate through different pages on the website?
Is it easy for the users to find the information they are looking for?

Measure content approachability
Are users able to find information about services in a friendly and easy-to-understand language?

Test call to action functionality
Is it easy for users to request free consultancy?
Is it easy for users to place an order? Is it easy for users to get in contact with NavNet?

Deliver

Website Deployment and Launching

See live website

Upon approval of the final product, I performed the following functions to launch the website:

Website compression and optimization.
Configuring the DNS and web server for upload.
Adding meta tags for SEO and indexing the website at Google Search Console.
Validating website performance with PageSpeed Insights.
Installing the website SSL certificate.
Thoroughly testing and verifying all website functionality.

Outcomes

Tanglible Results

The NavNet website redesign proved to be successful. Having listened to the end-users and understanding their needs enabled me to achieve not only high levels of user satisfaction, but also to deliver great value to the business.

From the UX standpoint, we had the opportunity to address users’ paint-points and deliver a fully responsive, eye-catching, and functional website.

Old website

New website

From the Analytics base results, I captured data from one year after the go-live date which shows that:

Website Traffic

Increase of 74% in the number of new visits to the website.

Engagement

Increase of 88% in page views per visit, 92% in time spent per visit, and 89% in clicks per visit.

Bounce Rates

A decrease of 88% in the number of visitors that immediately left the website.

Conversion

Increase of 95% in the conversion rate.

What is Next?

The new website meets the needs of NavNet and its clients and potential customers, however, there is always room for improvement. In the second stage of development, NavNet wants to implement e-commerce for customers to buy their products directly from the online store.

In addition, there is the need to build an online portal for customers to access their account info, hardware list, ticket history, best practices guidance, and other pertinent info regarding what NavNet provides.

Brand Image

In addition to creating the logo and brand guidelines, I also designed marketing materials, stationery documents, business cards and social media visuals.