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.
.png)
.png)
.png)
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.
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.
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.
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.
Templates
Featuring already established templates that users can easily adopt was key for the company's success. We built a CMS for templates.
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.
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.
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".
Creating the systems
.svg)
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.co - Sitemap & Back-end architecture
Exploring solutions
Visual design guidelines
Colors
Polishing our work
The visual design phase was our time to shine and bring creative ideas to the table that had not yet been considered.
We began by exploring multiple brand themes to establish the tone of voice for the brand. Once we approved the general look and feel, we then took that same essence and applied it to all other pages.
.png)
Wil is the best! Extremely reliable, knowledgeable, savvy, thoughtful, empathetic, talented.
Like what you see? Don't let your website idle another day
START A PROJECT
