Website redesign + product storytelling

Website redesign + product storytelling

Sitemetric

Sitemetric

Sitemetric

Role: Senior Visual Designer

Scope: Website Redesign · Interactive Product Storytelling · Visual Systems
Contributions: Visual Direction · Information Hierarchy · Web Design · Interactive Prototyping · Webflow Development
Tools: Figma · Webflow · Illustrator · AI-assisted workflows · HTML/CSS/JS

Outcome: 25+ Pages & Templates · 4 Product Launches · +70% Site Sessions

Web Design

Visual Systems

Interactive Design

A website that needed
to catch up.

Sitemetric is growing, but its website wasn't keeping up. The existing site didn't reflect where the company was headed or clearly communicate its expanding range of products, services, and capabilities.

As Senior Visual Designer, I lead visual design across much of the site, creating clearer ways to organize and communicate an increasingly complex offering. The Safety experience is one example: what was previously a feature-led page evolved into a more intentional story around moving from reactive to proactive safety.

As the work has evolved, I've also introduced interactive visuals and custom-coded motion across the site to make product capabilities easier to understand and bring the experience to life.

Existing Sitemetric Safety page with feature-led content about workforce safety and PPE Safety — After

Existing Safety experience

Feature-led safety story

Redesigned Sitemetric Safety page organized around a proactive safety narrative

Redesigned Safety experience

Proactive safety narrative - In development

Approach

Design the system, not just the page.

Rather than treating each page as a one-off, I focused on working within and extending a flexible visual system that could grow with the site. This approach made it easier to test ideas, iterate quickly, and adapt the experience as new content and product needs emerged.

Make complexity feel simple

Clear hierarchy and visual structure help users navigate a complex platform without feeling overwhelmed.

Make complexity feel simple
Clear hierarchy and visual structure help users navigate a complex platform without feeling overwhelmed.

Show, don’t just tell

Product UI, interactive visuals, and motion make abstract capabilities easier to understand than copy alone.

Show, don’t just tell
Product UI, interactive visuals, and motion make abstract capabilities easier to understand than copy alone.

Build for reuse

Reusable patterns and components make it easier to create new pages quickly without starting from scratch.

Build for reuse
Reusable patterns and components make it easier to create new pages quickly without starting from scratch.

Sitemetric Safety page showing modular Prevent content for access control, fatigue alerts, and site communications

Interactive Product Storytelling

Making the product easier to understand.

Sitemetric’s platform does a lot, and some of its capabilities can be difficult to communicate through copy or static screenshots alone. I began using interactive product visuals, motion, and custom-coded experiences to show how features work and make complex ideas easier to understand.

The goal wasn’t interaction for the sake of interaction. Each visual needed to help explain something more clearly, whether showing how AI detects activity, how workforce data moves through the platform, or how different capabilities connect.

Sitemetric AI

Conversational product demo

Project Summary

Animated data visualization

Site Activity

Interactive workforce data

Sitemetric AI

Interactive AI experience

Sitemetric AI

Conversational product demo

Site Activity

Interactive workforce data

Project Summary

Animated data visualization

Sitemetric AI

Interactive AI experience

Designing at Scale

From individual pages to a digital system.

As the website expanded, so did the way I worked. What started with individual page improvements now spans a digital experience of more than 25 pages and templates across products, solutions, industries, and content.

My workflow evolved too, moving from Figma into AI-assisted prototyping with Claude for faster exploration and refinement, then into Webflow for implementation. This has helped me move more quickly as new pages, launches, and content needs emerge.

Research + Optimization

I audited competitor websites and explored SEO, AEO, and emerging AI search behavior to understand how Sitemetric’s content could be structured for both people and evolving search platforms. Those findings helped inform hierarchy, metadata, and how capabilities are communicated across the site.

Performance was also part of the design process. As I introduced motion and interactive experiences, I worked to keep them lightweight and purposeful so they added to the experience without unnecessarily slowing it down.

Collaboration

My role includes visual design, information hierarchy, and concept development for interactive product experiences, but the work is highly collaborative. I share concepts early, seek feedback, and use that input to challenge assumptions and refine the work.

Art direction and scalable Webflow architecture come from the Brand Director. Imagery workflows are shared across the design team, copywriting shapes the messaging, and marketing leadership connects the work to product and subject-matter expertise.

Outcome

A stronger foundation, still evolving.

The website has become a clearer, more dynamic expression of Sitemetric’s platform and where the company is headed. Since the redesign began, site sessions have increased by 70%, while the visual system has expanded across 25+ pages and templates and supported four product and service launches.

The work is still evolving. As Sitemetric grows, I continue to refine the system, explore new ways to communicate complex capabilities, and build a digital experience that can grow with the company.

Metrics reflect results and project scope as of August 2026.

+70%

Site sessions

25+

Page & Templates

4

Product & Services launches

Have a project in mind?

I work with teams and businesses across print and digital.
Tell me what you're making.

Have a project in mind?

I work with teams and businesses across print and digital.
Tell me what you're making.

Have a project in mind?

I work with teams and businesses across print and digital.
Tell me what you're making.

© 2026 Josefina DS. All rights reserved.

© 2026 Josefina DS. All rights reserved.

© 2026 Josefina DS. All rights reserved.