Knockri

Phase 1: Defining the Problems & Goals

Problems

Website:

The biggest problem the Knockri website faced was the lack of clarity, awareness & communication. Through doing user research (using tools such as UserFeel and HotJar), we discovered that many users lacked understanding about what Knockri is and the services it provides. This was due to both the copy and the structure/organization and flow of the site. This caused the company to have a high bounce and low conversion rate resulting in a low number of customer leads.

Branding:

The problem with the old Knockri branding was that it was not reaching the right target audience. Its look & feel represented a typical tech startup and was more targeted towards a younger audience.

Goals

Website:

The main goal for this website project was to get more leads and to increase conversions. To do this, the website needed to clearly communicate what Knockri is and provides - with clear copy, relevant pages and easy navigation for a great user experience.

Branding:

The goal for the rebrand was to have a distinct visual identity and voice that the right target audience would resonate with. Instead of a generic startup SaaS look, we needed it to feel like it was a bigger, more established (but still innovative) company -specifically within the HR tech space.

Phase 2: Defining the Target Audience

The marketing team set out to research and define our ICP (ideal customer profile), so we know who we are targeting with our rebrand and website.

Phase 3: Brand Strategy & Research

I began the rebrand process by conducting a brand strategy session with internal stakeholders within Knockri, which consisted of marketing, sales & customer success team members. I walked them through what a brand strategy is and why it was important for both the brand perception (reaching our target audience), as internal alignment (making sure every team was on the same page) and knowing how to structure our website in terms of priorities.

Some of the exercises I facilitated were to define our vision, brand personality and competitive differentiators.

Next, I gathered inspiration for the look and feel. I researched and analyzed competitors' branding, current trends, as well as big industry players who are doing well (established and reaching their target audience well.)

Phase 4: Brand Design (visual identity)

From the research and outcomes of the brand strategy session, I summarized the attributes and messaging we wanted the brand to have.

From there, I created a mood board showcasing the direction of the look & feel, reflective of the research and strategy. I gathered images from various sources such as behance, dribbble, pinterest and more for inspiration.

I took the design styles from the mood board and mocked up some example use cases of how the new branding would look in the context of potential marketing materials along with our new messaging.

Phase 5: Website Strategy & Research

Before starting on the website design, I conducted a website analysis of the existing site in order to assess what worked well, what needed improvement, and if there was significant information that would help in restructuring the site architecture and content.

Through Google Analytics I discovered what target audience demographics we were reaching (age, gender, location etc.) - this helped confirm the hypothesis that our branding was not reaching the right target audience. I also saw which pages were the most viewed, the session durations of the different pages, and the flow of pages users were navigating to and from. This helped me note down what information would be relevant to keep in the new website.

The HotJar results showed which buttons were being clicked on and where users were dropping off while scrolling through the pages - giving me insight into how to order information better on individual pages (for instance, many users were clicking on buttons to read candidate testimonials).

Through user feedback we received from UserFeel, we confirmed that most users were very confused about what Knockri actually is and its services, and that the messaging and site structure was generally unclear.

Lastly, we reviewed lighthouse report to see where we could improve SEO, accessibility and performance. The insights showed we needed to focus on improving mobile performance.

Website Structure (Information Architecture)

After gathering insights and recommendations of our current site, the next step was to create the information architecture of the new website. Some additional steps I took was researching competitor companies' site structures (both direct and indirect), as well asB2B and SaaS companies that had were very successful. I took inspiration from websites such as greenhouse, brighthire, asana, intercom, and miro.

Another part of my research included inquiring into best practices in structuring B2B SaaS websites and pages that convert well.

Here are some examples I utilized in my research from octopus.do and marketingexamples.com respectively.

Taking all of the research and analyses, I created the website architecture.

Iterations:

After starting on creating the content for these pages, we decided it makes more sense for messaging and prioritization to change the re-organize the product and solution pages.

We also decided that it was not realistic to design, build and launch all of the pages within a certain timeline, prompting us to categorize the pages by priority so we can launch the site in 3 phases and get at least the most important pages out quicker.

Phase 6: Website Design & Handoff

Wireframes

The next step was building the wireframes for each of the pages outlined in the website structure, working alongside the copywriter.

Iterations:

A few of the wireframes needed some tweaks, both for better messaging and for re-ordering sections make the page flow in terms of prioritization.

For instance, the homepage needed a section linking to read about the science behind the AI, with the goal of establishing better trust with the customer. Also, one of the solution pages was completely redone as the first iteration focused more on providing information from the perspective of the knowledge expert within the company, rather than providing the clear value and benefit to the customer.

High-Fidelity Mockups: Putting it All Together

The final step of the design process was applying the new branding to the wireframes, as well as adding images and creating graphics accordingly.

Homepage Animation

To add some more life to the hero section of the homepage, (since it would be the first impression of the website), I decided to create an animation showing the process and outcome of using the product in a fun and intriguing way. To do this efficiently, I found the intuitive online animating tool Jiiter.video and taught myself how to use it in order to make the animation come to life.