How I used storytelling to elevate the brand experience of Omnia Safety

Quick summary This article is part of a deep-dive case study showing how I redesigned Omnia Safety’s website by clarifying the messaging, applying storytelling techniques, and using creative direction to elevate the user experience.

Omnia

Over the past six months, I redesigned the website for Omnia Safety, a consultancy specialising in safety regulations. I used this project to apply storytelling and creative direction, turning a confusing site into a clearer, more distinctive experience.

Like many corporate websites, the original Omnia Safety site suffered from unclear messaging and a lack of personality—issues that made it hard to attract clients and build trust.

Screenshot of the original Omnia Safety homepage (old site).
Original Omnia Safety landing page 1.
Original Omnia Safety landing page 2.
Screenshots of the original Omnia Safety website.

To solve this, I applied storytelling and creative direction to deliver a site with clearer communication, a stronger identity, and a user experience designed to inspire confidence.

In this case study, you’ll see how narrative, structure, and visual storytelling can transform a confusing website into one that connects with users, builds trust, and supports business growth—an approach you can adapt to your own projects.

Content and Storytelling

When visitors landed on Omnia Safety’s website, many arrived anxious—worried about inspections, penalties, or compliance. They were looking for clarity and reassurance. Instead, the old site greeted them with complex, third-person copy that felt distant and bureaucratic.

The main issue lay in the writing style: pages were long, full of jargon, and difficult to scan. Visitors had to work too hard to find what mattered. And when people work too hard online, they leave.

Old Omnia Safety hero with the headline ‘Safety is not optional!’ and generic 360° consultancy subtext.
Old hero. The headline “Safety is not optional!” and 360° services subtext remained vague and technical, leaving the offer unclear.

Reframing the Story Around the User

I used Donald Miller’s StoryBrand (SB7) framework to rewrite each page as a clear, customer-centred narrative. The goal: help users immediately understand how Omnia Safety helps them survive and thrive.

The company is positioned as a trusted guide, not the hero. The user is the hero—the one facing challenges and seeking peace of mind. Omnia Safety provides the expertise and direction to get there.

New hero with consultants in safety gear and headline ‘Bring your company in line with safety regulations.’
New hero, redesigned with SB7: “Bring your company in line with safety regulations.” Subtext clarifies the guide role and the user transformation—from fear of fines to confidence.

Every page was re-engineered to be easy to scan and effortless to read. I broke down large blocks of text into focused sections, added clear headings, and used concise paragraphs with logical flow. The result: content that feels more human, efficient, and actionable—so visitors can quickly find answers without burning mental energy.

To support this, I followed Paul Boag’s content-block approach, mapping each page into modular sections designed to answer user questions and drive conversions. Complex information became a clear, trustworthy story that naturally leads users toward booking a consultancy.

Diagram of content-block planning used to structure pages.
Content-block planning: modular sections that answer user questions and support conversion.

What Changed and Why It Works

  • Address the user’s internal struggles: fear of penalties, confusion about regulations, and the stress of doing everything alone.
  • Position Omnia Safety as the expert guide who simplifies compliance and builds trust.
  • Introduce a simple 4-step plan to move from anxiety to confidence.
  • Add clear calls to action so visitors know exactly what to do next.
  • Paint an aspirational vision of success—safety and peace of mind embedded in daily operations.
  • Make the consequences of inaction explicit to add urgency and clarity.

By humanising the message and improving the structure, each page now connects emotionally while staying practical. Users see themselves in the story, understand the value immediately, and feel confident reaching out for help.

Identifying Clear Calls to Action (CTAs)

While rewriting content, I also refined how the site guides users toward action. Every page now includes a clear primary CTA“Request a Consultation.” The next step is obvious the moment visitors are ready.

For users who need more time, I added secondary CTAs such as “Learn More About Our Services.” These lower-commitment options keep users engaged while moving them forward.

CTAs are placed intentionally within the reading flow—after key benefits, proof points, or reassurance. Visually, buttons stand out with clear contrast, generous spacing, and consistent wording that reinforces trust and professionalism.

Top page section with a lead character introducing the message.
Styles of call-to-action used accross the website.

Layouts

My goal was to use distinctive grids that tell a clear story, evoke emotion, and drive action. The previous layouts felt heavy and uninspired; dense structures buried key information and made it hard for users to read, focus, or know what to do next.

I rebuilt the structure using compound grids to enhance storytelling, add rhythm, and bring clarity. Each page now flows naturally, helping users move confidently through the content.

Sketching Ideas

I always start with pen and paper. Quick sketches help me explore ideas freely and find the best way to structure the story. It’s a fast, intuitive step that lets me think creatively without technical limits.

A rough homepage sketch showing the initial content flow and section hierarchy.

Low-Fidelity Wireframes

Once the concept feels right, I move to black-and-white wireframes. This is where I test different structures, experiment with pacing, and try multiple variations. Without colour distractions, I can focus on flow—how the eye moves, where to pause, and what should stand out. I multiply ideas until I find the version strong enough to develop further.

Low-fidelity homepage wireframe exploring content flow and spacing 1.
Low-fidelity homepage wireframe exploring content flow and spacing 2.
Low-fidelity homepage wireframe exploring content flow and spacing 3.
Low-fidelity wireframes exploring content flow, rhythm, and spacing.

High-Fidelity Design

With the foundation in place, I added emotion through colour, typography, and imagery to bring personality and clarity—turning structure into experience. These elements work together like a rhythm: grids provide balance, hierarchy guides focus, and asymmetry adds movement and energy to keep users engaged.

Art-directed homepage layout (high fidelity).
Art-directed consultancy page layout (variation 2).
Art-directed consultancy page layout (variation 3).
Art-directed layouts for homepage and consultancy pages, using different grids to create visual energy and rhythm.

The art-directed approach made the design distinctive, easy to use, and memorable. Each layout now guides users naturally, combining clarity with personality and helping them move through the content with confidence.

Imagery / Lead Characters

To enhance readability and engagement, I introduced lead characters for each page that represented the specific role or sector addressed in the content.

These characters act like visual “narrators,” guiding users through the page and giving each section a unique personality. Instead of faceless regulations, users see relatable figures who bring the subject matter to life.

For example, on the RLS training page, a worker in high-visibility gear sets the tone and makes the subject clear at first glance. On the HACCP course page, a chef character highlights the food safety context, ensuring the page feels tailored to its audience.

Top page section with a lead character introducing the message.
Lead character anchoring the page message and tone.

Imagery is scaled to add rhythm and emphasis, similar to a large panel in a comic that slows the reader to absorb a key moment. Larger images highlight CTAs, key messages, or forms; smaller visuals create pace and balance.

Hero section with consultants in safety gear, reinforcing clarity and trust.
Top page section with a lead character introducing the page messaging.

Faces convey emotion instantly, helping to build a stronger connection and making the brand approachable. Images are treated as storytelling assets—emotional cues that clarify the message and make the experience memorable.

Blending imagery with narrative structure gives the site personality, emotion, and energy—turning heavy, complex information into something accessible, human, and engaging.

Iconography

Icons play a key role in shaping clarity and storytelling. Beyond decoration, they act as visual cues that help users quickly grasp services—from consultancy to training.

Consultancy services represented with custom icons.
Consultancy services highlighted with custom icons.

I built a consistent icon library aligned with Omnia Safety’s visual identity. Each service has its own recognisable symbol, turning complex information into clear and intuitive messages.

Example set from the Omnia Safety icon library.
Example icons from the library.

Combined with imagery and layout, icons add personality and accessibility. The brand voice becomes both authoritative and warm—ensuring the content is understood and remembered.

Color Palette

The earlier palette felt cold and flat. To add personality and energy, I expanded the original colours with fresh tints and shades. The new spectrum of blues and greens, balanced with neutral greys and bright accents, created consistency across text, surfaces, backgrounds, links, and calls-to-action.

New colour palette applied to light and dark themes.
The new palette applied to light and dark themes.

To enhance user experience and accessibility, I implemented both light and dark themes, giving users a choice of interface.

The light theme evokes clarity and trust with crisp blues, soft greys, and green tones. The dark theme uses deeper shades of blue and grey to create focus and atmosphere. Together, they define a unified brand identity across contexts.

Light theme interface example.
Dark theme interface example.
Light and dark theme examples.

By creating an improved palette and two complementary themes, the design now supports storytelling, improves usability, and makes the brand more memorable.

Typography

The previous site had a weak hierarchy with low contrast and shallow scaling, which made scanning difficult.

Original typography with shallow hierarchy and low contrast.
Weak hierarchy and low contrast made the content hard to scan.

I introduced a larger visual scale to create stronger contrasts between headings, paragraphs, and lists. This improved readability, strengthened narrative flow, and gave the design more character.

Improved typographic scale and contrast.
Stronger contrast and larger scale improved readability and pace.

I selected Outfit for its range of weights and modern character. Its generous x-height improves paragraph readability while keeping headlines sharp and noticeable.

To add more personality, I designed custom headline styling. Underlined headlines act as graphic devices, emphasising key sections without overwhelming the content.

Close-up of body text and headlines set in Outfit.
Outfit’s generous x-height keeps paragraphs readable and headlines sharp.

The result is a typographic system that significantly improves usability while elevating the narrative experience.

Conclusion

By rewriting the content around user personas with the SB7 framework, the site delivers copy that is useful and commercially effective. By centring narrative and treating the experience like a well-directed story—with lead characters and clear pacing—the interface feels alive, distinctive, and engaging.

A website should help users achieve their goals. That requires the right level of structure, engagement, and emotion. This is how I improved Omnia Safety’s experience.

If you want to learn more about this topic, read my book “DON’T START WITH VISUALS”.

Improve Your Skills of UX Design and Web Design

Join my mailing list to receive my UX and Webdesgin articles tips delivered straight to your inbox periodically on making better designs.

  • Email advice periodically + 
  • UX and Web design tips + 
  • Insightful Articles + 
  • 2 free chapters of my book Don't Start With Visuals + 
  • 7 rules to design a successful portfolio

    I will never share your email address and you can unsubscribe with just one click.

    book-cover