Fav
zabal
1
2

Mural's Website Transformation: Webflow Strategy, Rebrand, and Redesign

One of the first Webflow enterprise customers. We took their team's marketing website from being custom coded by an engineer on their team to a new strategy, rebrand, redesign, and developed their entire website in Webflow. The results were astronomical, since the marketing team was now able to own their website fully without the need of software engineering support.

$118M
Series B Funding
7
Total team contributors
37%
Increase in self-serve revenue
2x
Free trial conversion rate increase
Visit live website
Webflow Development
UX/UI Design
Webflow Training
Graphic Design
Custom Code
3rd Party Integrations
Webflow Development
UX/UI Design
Webflow Training
Graphic Design
Custom Code
3rd Party Integrations
zabalzabalzabal
timerrZabalzabalzabal
zabalzabalzabalzabal
zabalzabal
CLIENT DETAILS
Up-heading

Understanding the business

Business Goals

Mural's marketing team was rapidly growing. This is why Webflow was the perfect tool for them to scale as an organization. Mural migrated to Webflow to empower their design and marketing teams and to work with Zabal Media in a way where we can handle the challenging implementation requests, but their team would maintain the website's content and CMS back-end.

zabalMural
zabal
zabal

Business challenge

The Mural marketing team was not able to maintain their own website due to the fact that the product engineering team owned the code completely. Lastly, their team had a strong vision for how the website should look and feel, which required a lot of micro animations and creative ways to tell the Mural product story.

Chapter 1
RESEARCH
KEY findings
Up-heading

Asking the right questions

Research goals

We began by first understanding the goals for the website, who the potential customers were, what success looked like, and how do we know we succeed if we zoomed 6 months into the future. We also interviewed several team members (including the CEO) to get a deeper understanding in order to best make design decisions that aligned with the overall vision of the website redesign.

Goal
01

Collaboration

Collaboration is the most common keyword that came up in our study. This fact lead us to make a more interactive experience on the website.

Goal
02

Templates

Featuring already established templates that users can easily adopt was key for the company's success. We built a CMS for templates.

Goal
03

Integration

Mural integrates with some of the most well known companies in the world. This was an essential highlight of the website for users that were already using these other company products.

Goal
04

Case Studies

Intuit, Steelcase, IBM, Github, just to name a few key users of Mural's platform. We learned that case studies truly made a difference while establishing that Mural is a reputable tool.

Who are the users of the platform? 
What is their ethnographic background?
Why are users coming back to Mural on a daily basis?
What makes Mural special?
Who are the users of the platform? 
What is their ethnographic background?
Why are users coming back to Mural on a daily basis?
What makes Mural special?
What do users dislike about the platform? 
How are most teams using the platform at work? 
Are users using the platform for fun or only for work?
What do users dislike about the platform? 
How are most teams using the platform at work? 
Are users using the platform for fun or only for work?
What is your 30 day churn rate? 
What do users love about the Mural platform? 
What do customers hate about the Mural brand?
What features are most users working with? 
What is your 30 day churn rate? 
What do users love about the Mural platform? 
What do customers hate about the Mural brand?
What features are most users working with? 
COMPETITIVE ANALYSIS
Up-heading

Gathering inspirations

Moments of delight

Inspiration was all around us. There are many websites and graphic animations that we found during our competitive analysis and interaction research. Each animation had one thing in common, they were all meaningful and delightful. We gave our animation intensions a name, "Moments of delight".

IC
IC
IC
IC
Chapter 2
User Experience
INFORMATION ARCHITECTURE
Up-heading

Creating the systems

zabal
Mural

Design System

One of the main things that makes Zabal Media so special is our unique process and the way that we structure our ux/ui designs and Webflow development (both front-end & back-end).

Creating the right systems is a critical part of each project. We created pages in Figma for all of the essential elements and steps to help us all stay on track and organized.

Mural
MuralzabalMural
Mural

Mural.co - Sitemap & Back-end architecture

Final Draft
Mural
WIREFRAMES
Up-heading

Exploring solutions

oyster
oyster
oyster
zabal
Chapter 3
VISUAL DESIGN
STYLEGUIDE + COMPONENTS
Up-heading

Visual design guidelines

Colors

RGB
FF0065
RGB
FF9900
RGB
21D6D1
RGB
0061FF
RGB
000000
RGB
6F6F6F
Mural
Mural
Chapter 4
Measuring Success
zabal

Wil is the best! Extremely reliable, knowledgeable, savvy, thoughtful, empathetic, talented.

david
David Chin
Creative lead
zabal
$118M
Series B Funding
7
Total team contributors
37%
Increase in self-serve revenue
2x
Free trial conversion rate increase
zabalzabal

Like what you see? Don't let your website idle another day

START A PROJECT
Go to the next project:
Bluefineart
zabal