Redesigning cybersecurity website

Problem space

At that time, we had a WordPress-based website designed and built by internal staff without sufficient research or consideration. The website showcased generic product features without targeting the main audience and lacked brand personality. As the company's first step towards its globalization strategy, we needed a website that presented a more professional look and functionality. As a relatively small company, we decided to seek professional help from agencies for the redesign. After several initial meetings, I hired UX/UI design and development agencies.

Think

To begin the project, we first needed to understand our primary target audiences and competitors in order to establish the foundational structure. We conducted both internal and external research simultaneously, gathering valuable insights.

Interviews / Meetings

I interviewed key stakeholders from Sales, Product, Support, and Executive leadership to understand their needs and concerns for this project. Additionally, we gained valuable feedback on our current website through a few initial consultations with UX agencies as part of the agency hiring process.

Analytics review

Using Google Analytics and Freshsales, we identified our main target audience (analysts, IT professionals, and CXOs) and their behaviors. We found that only XX% (NDA) of sales leads were generated through the website, highlighting the need to increase inbound leads through a well-designed traffic flow instead of relying on direct sales channels.

Competitive analysis

We conducted a competitive analysis to identify areas for benchmarking, including site structure and navigation. We analyzed their messaging and positioning to understand the language they use, and to define core messages that highlight our unique selling points.

Workshop

Using the data we gathered internally, we started a discovery session with a UX agency, conducting a workshop to create personas and customer journey maps for both B2B and B2C segments.

Define

Through the research, we identified the following issues with our current website:

Poor product presentation and navigation
Users find it difficult to identify the main product offerings and relevant content, resulting in a frustrating navigation experience.

Not considering target audience
The website lacks tailored content and features for IT professionals, resulting in a disconnect with the primary users.

Lack of brand personality
The website does not effectively communicate the brand's messaging, value proposition, or visual identity, leading to a weak brand presence and user engagement.

Brand confusion
There is a clear disconnect between the B2B and B2C websites, with different design languages and user experiences, causing confusion among users.

Business goals

Here are the goals for this redesign project from the business side, defining the success of the project:

1) Build brand awareness and trust
2) Generate quality leads

Redesign goals

We then defined the final goals of this redesign, considering the issues identified and our business objectives:

1) Enhance user experience by improving navigation and product presentation.
2) Build brand identity and trust through messaging and visuals aligned with core values.
3) Improve user engagement by providing optimized content for the target audience.

Make

Information Architecture/Wireframes

Based on the goals defined above, I collaborated with a UX designer from the agency to develop the information architecture and wireframes.

My role

• Provided feedback on wireframes created by the agency's designer and occasionally created wireframes myself.
  
• Conducted workshops with these wireframes to gather feedback from internal and external stakeholders, including the CMO, product managers, and the content writing agency.

Visual design

To achieve a strong and cohesive brand identity, I began the process by focusing on the company's core values: Honest, Simple, and Non-intrusive. Following several mood board brainstorming sessions and multiple meetings with revisions, we created the final design.

My role

• Conducted a brand sprint to define brand personality, key visual elements, and mood board ideas.
• Shared insights with the UX and content writing agencies for visual direction and writing guidelines.
• Collaborated with the agency designer, providing feedback on website designs, creating design ideas, and defining icon styles.

Final design

Improve product presentation

In an effort to enhance user experience and better align with business goals, we improved product presentation and restructured our product categories.

01. Product navigation
We improved product navigation by highlighting our main products and reducing the prominence of hardware products.

02. Product presentation
We added product overview page to clearly communicate the relationships between products and the services we provide.

Introduce ‘Solutions’ tab

We added a ‘Solutions’ tab with our target audience in mind, presenting solutions by industry, size, and for compliance.

01. Solutions by industry and size
This page is designed to cater to businesses of varying sizes and industries. Also we provided detailed use cases and whitepapers here to offer the insights into how our products can address specific industry needs.

02. Solutions for compliance
This page is to address compliance concerns such as GDPR and HIPAA, we explained how we can assist in ensuring adherence to these regulations.

New 'Our Technology' page

The page is designed to cater to our primary audience by offering detailed content. We introduced an "Our Technology" page for those seeking a deeper understanding of our core technology, providing comprehensive insights into our main technological offerings.

Integration of B2C website

We integrated the separated B2C website into the main website to reduce brand confusion, consolidating all offerings under a single platform that facilitates cross-selling of our main products.

01. B2B and B2C product tab at the top
Replaced the previous separation of B2B (SecureAPlus Business) and B2C (SecureAPlus Home) products with tabs at the top of a single page.

02. Replaced illustrations/texts with actual product UI screens
We replaced the previous cartoon-style illustrations of products with actual UI screens to provide a more intuitive experience.

03. Created FAQ section
Added an FAQ section to enhance usability by providing easy access to various information.

Result

The website traffic increased by 109.2%, inbound leads by 133%, and content views by 54% within 3 months (Mar 2021 vs Mar 2020). Additionally, we saw a 26% increase in backlinks and a 35% improvement in website performance compared to the previous year.

Iteration

Right after launching, we continued to improve the website by testing new landing page messages, introducing new CTAs, and enhancing the form submission flow. We monitored these changes using Google Analytics and Freshmarketer for A/B testing, heat maps, and screen recordings. For example, I used Screen Replay in Freshmarketer to identify that users were spending too much time selecting their country of residence when submitting forms, and we fixed this issue by adding a search function.

Learning

Process: This project provided an excellent opportunity to learn about the entire website redesign process from the ground up. It allowed me to understand how various tasks, including UX/UI design, development, content, and SEO, come together at different stages to create synergy.

Communication: Taking on a leadership role in guiding the overall project and bridging external agencies with internal teams made me realize the importance of effective communication.

Dealing with uncertainty: Managing product renaming, product and logo rebranding, all while dealing with a complex schedule, taught me valuable lessons in handling uncertainty.