neednexus 2.0

A comprehensive website for a B2B professional service solutions platform that helps clients engage in disruptive innovation.

Project Type

Client Project

Team

Myself

Marketing Manager

Web Developer

My Role

Product Manager

User Research

Wireframing

Prototyping

Tools

Figma

Miro

Duration

9 Months (2023)

OVERVIEW

Project Context

Neednexus is a B2B solutions platform that helps companies engage in disciplined innovation and identify new market opportunities by addressing unmet user needs.

In 2021, I developed neednexus' first web presence, successfully launching a webpage to improve their external marketing efforts and attract a larger share of the client base.

After 2 years of strong business growth, neednexus redefined their service offerings and differentiators, which were no longer reflected in their initial webpage. So in 2023, neednexus asked me to design a comprehensive website that would reflect their updated services and methodologies, and serve as a central repository for their insights and case studies, as well as their growing team of experts and specialists.

Note: The name of the project has been changed to maintain client’s anonymity.

Design Process

KICKOFF

How do we design a website that attracts customers?

I took a goal-directed approach for this project, focused on identifying the expectations of potential users. Understanding the key user groups is vital to the web design process in this instance because the success of the website is based on user traffic, engagement, and ultimately, user conversion.

Before conducting research, I started by asking some initial key questions:

"What features or pages will users expect?"

"Who is the primary client base?"

"How do we retain user engagement?"

RESEARCH

Researching the user should be easy right? Wrong.

Initially, I wanted to survey neednexus' existing and past clients to collect user feedback directly from the customer base in question. Unfortunately, given the often confidential nature of neednexus' projects, I was unable to pursue this option.

Fortunately, neednexus is part of a larger professional services firm with a similar customer base. So, I asked the parent company's Marketing team to provide me with user engagement metrics and direct feedback from their own website in order to extrapolate the information for neednexus personas.

What kinds of customers are we targeting?

I used an affinity diagram to summarise the key characteristics and expectations of users, and I identified two main user groups for the website: executives from traditional and enduring businesses looking for opportunities to innovate, and startup founders seeking rapid growth strategies. Recognizing the conflicts of interest between these two diverging user groups helped me focus on how to shape the user journey and how the user journey would in turn affect the client's goals.

ANALYSE & DEFINE

The Project Vision

Our two main user groups have very different business goals, and neednexus has the experience and expertise to successfully deliver both, but we need a website that communicates these offerings in a way that relates to both traditional businesses and nascent start-ups.

IDEATE

Designing a website: no small feat!

I constructed a user flow of the start-to-finish journey for a prospective client to navigate through the website and submit a proposal for neednexus' services.

The client initially envisioned a website with 4 pages: a homepage, insights and articles, project case studies, and the platform team. I decided to eliminate the case study page and add a contact page because many of neednexus' projects were confidential and could not be made public, and the ultimate goal was to convert users into customers.

So what did we decide on?

First, I sketched some paper wireframes to experiment how the homepage of the website could look. I explored different header options and played around with the order of sections.

[click to open in pop-up]

After brainstorming layouts, I presented the options to the client and we discussed necessary features versus nice-to-have features. We selected our favourite design elements, and I created mid-fidelity prototypes of the screens.

FEEDBACK

Get excited: the client was happy!

I presented the lo-fi prototype to the client stakeholders and asked them to provide feedback on the prototype design and micro-interactions they would like to see in the final product. The consensus was that the overall layout of the lo-fi prototype was easy to navigate and provided multiple opportunities for prospective clients to complete the primary user flow (contacting neednexus).

To conserve costs and time, the client chose not to conduct usability testing until after the initial launch of the website. They intend to evaluate the success of the website using SEO metrics such as organic traffic, user engagement, and user conversion.

PROTOTYPE

It was time to create the final prototype.

The overall layout and page sections remained unchanged from lo-fi to hi-fi. Additionally, the text copy and images were not yet finalised for the website, so I focused most of the hi-fi prototype development on UI — specifically, the use of colour, typography, and macro- and micro-interactions. Consequently, the hi-fi prototype functions like a working website, but leverages some placeholder text and images.

View Full Prototype Here

Header Carousel

Users are introduced to neednexus' thinking immediately in a carousel of the hero banner of the homepage.

The hero carousel allows users to access 5 featured neednexus articles, with accessible CTA "Learn More" links.

"What Questions Can We Help Solve?"

Neednexus' services are presented by directly relating to prospective clients' pain points and nagging questions.

A hover interaction was added to each card so users can drill down to their granular needs and the specific ways in which neednexus can help.

Insights

All neednexus articles and opinions are housed in a central location on the Insights page of the website.

Users can access the most recent and most popular neednexus articles above the fold.

A hover interaction was added to each insight element to maintain user engagement and enhance the user experience as users move their mouse across the page.

Contact Page

A separate contact page was created as the end point of the primary user journey, allowing prospective clients to easily contact neednexus leadership with questions or submit project proposals.

The contact page is accessible via the top navigation bar, as well as via a button just above the footer on every webpage.

DEPLOYMENT

So, what happened ?

I handed off the latest high-fidelity prototype to the developer for deployment, and worked with the marketing manager to define the SEO and meta-tags for the website. The website was launched at the end of 2023 with four main pages: the homepage, an insights page, a team page, and a contact page. Within the first 4 months of launch, the client saw a 150% increase in organic traffic and engagement, and a 120% increase in user conversion.

Takeaways

This neednexus website is a project that is near and dear to my heart. I spent 9 months designing, iterating, and collaborating with my client's stakeholders and teams, and I'm extremely proud of the final product. This was my second project for neednexus, and the website is actually intended to replace the original webpage I designed for them. Given the success and satisfaction of my first neednexus project, my client trusted my decisions, and I was afforded more design freedom and independence.

Ultimately, the final published website looked a bit different than the hi-fi prototype I created because neednexus and their parent company use AEM as their web content manager, and not all micro-interactions in Figma translate to AEM. Should I have the opportunity to work with neednexus in the future, I would likely skip the hi-fi development process in Figma and iterate within AEM directly in order to save time.