Branding and Website
Branding Design and Website Design & Development
UX Designer and Web Developer
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.
How might we connect NavNet’s brand identity with users to generate a positive perception in the market?
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.
«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
- 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.
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.
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.
- 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.
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.
After the Discovery phase, I synthesized data from the research to map out the business needs and opportunities and users’ goals and pain points.
- 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.
Empathizing with the User
User Flow Diagram
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.
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.
I developed the site in WordPress and uploaded it to the webserver with a temporary domain so that we could carry out 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?
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.
From the Analytics base results, I captured data from one year after the go-live date which shows that:
Increase of 74% in the number of new visits to the website.
Increase of 88% in page views per visit, 92% in time spent per visit, and 89% in clicks per visit.
A decrease of 88% in the number of visitors that immediately left the website.
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.
RGBA 242 174 29 1
HSLA 39º 87% 94% 1
RGBA 0 89 139 1
HSLA 200º 100% 54% 1
RGBA 2 73 113 1
HSLA 200º 98% 44% 1
RGBA 8 56 87 1
HSLA 203 90% 34% 1