Horangi Blog
Transforming a Static Blog into a Strategic Asset.
Horangi, a leading cybersecurity company, possessed a wealth of expert content that was being let down by an outdated and unengaging blog design. The existing platform had a high bounce rate and failed to reflect the company's cutting-edge brand identity.
As the product designer on this project, my specific task was to design a new, user-centric blog page. The goal was to create a visually compelling, highly readable, and intuitive layout that would hold user attention, encourage content discovery, and provide clear pathways for lead generation. As this was a marketing-led initiative in a small, fast-moving company, my role required me to wear many hats, blending core UI/UX skills with a strong understanding of marketing goals to bring the vision to life.
The Challenge
The primary challenge was to design a single page template that could solve several problems at once:
Combat High Bounce Rates: The existing design was cluttered and uninviting. The new design needed to immediately capture user interest and establish credibility.
Improve User Engagement: Users weren't exploring the site. The new page needed features to guide them to related articles and keep them on the site longer.
Strengthen Brand Perception: The page had to look and feel professional, modern, and aligned with the technical nature of the cybersecurity industry.
Introduce Lead Generation: The page was a dead end. I needed to integrate clear, non-intrusive calls-to-action (CTAs) to convert interested readers into potential leads.
Research & Analysis
Competitive Analysis: I analyzed over 10 competitor blog pages to identify best practices for article layout, typography, content discovery modules (like "Related Posts"), and CTA placement.
Content Structure Analysis: I worked with the marketing team to understand the key "content pillars" (e.g., Cloud Security, Threat Research). This informed my decisions on how to design filtering and categorization features for the page.
Defining User Needs: Based on the project brief, we knew our target audience was technically savvy. This meant the design needed to prioritize clarity, information density, and readability for long-form technical articles.
Understanding Our Users
To create an effective design, I first needed to understand the blog's audience. I started by asking fundamental questions:
Why do people visit our blog?
Where do they come from?
What are they looking for?
What kind of impression do we want to leave them with?
For the last question, the answer was clear. The design needed to evoke the same impression I had when I first visited Horangi’s main website: "Young, smart, and fast-moving." This theme became a guiding principle for the visual identity.
My analysis of traffic sources led me to identify two primary user groups:
The Purposeful Researcher: This user arrives with a specific intent, typically from a Google search or a link on LinkedIn. They know what they're looking for and need to find credible, in-depth answers quickly.
The Curious Explorer: This user is already browsing the main Horangi website and navigates to the blog out of general interest. They don't have a specific question and need to be guided toward interesting content.
Designing for User Needs
Recognizing these two distinct user journeys was critical. To satisfy both groups, I tailored my design approach:
For the Purposeful Researcher: Since they link directly to an article, the page must immediately assure them they're in the right place. This meant designing a clear title and using categories to provide context. Crucially, a polished visual design would establish brand credibility and trust.
For the Curious Explorer: To cater to those without a specific goal, the design needed to guide them. This led to the decision to feature a curated list of spotlight articles at the top of the main blog page, immediately presenting them with valuable content.
This dual focus became the foundation for my design strategy.
Ideation & Design
Wireframing: I created low-fidelity wireframes in Figma to map out the core structure of the blog page. This included establishing a clear visual hierarchy for the article title, author information, body content, and supplementary modules. This allowed for rapid feedback cycles with the project stakeholders.
Visual Design & Component System: To create a modern, technical feel, I developed a "dark mode" UI. This choice enhanced the aesthetic and improved on-screen readability. I created a small component library for the page, defining the color palette, typography scale, buttons, and content cards to ensure a consistent and polished final design.
High-Fidelity Prototyping: I built an interactive, high-fidelity prototype of the blog page. This allowed the team to experience the reading flow, test the placement of CTAs, and visualize how the final design would look and function before development handoff.
Final Design Solution
My final design for the blog page introduced several key features to solve the initial challenges:
Enhanced Readability: A clean, single-column layout with generous white space and a carefully selected typography scale makes long articles easy to read.
Author Credibility: I designed a prominent author bio section with a photo and professional link to build trust and showcase Horangi's internal expertise.
Strategic CTAs: I designed and placed clear CTAs within the page flow—one for "Booking a Demo" and another for "Learning More"—to guide users toward conversion without disrupting the reading experience.
Content Discovery Modules: To keep users engaged, I designed "Explore: Featured List" sections that appear at the end of each article, encouraging further exploration of the site.
Robust Search & Filtering: My design included a persistent search bar and a clear filtering system, allowing users to easily find content by category.
Final Thoughts
I really enjoyed this project, from the initial ideation to seeing the final, live product. Working closely with the front-end developer was particularly insightful and helped me better understand the problem-to-solution space. Seeing the redesigned blog go live was a rewarding culmination of our collective efforts.