CASE STUDY
UX / UI Design // Web Design // MFour
CHALLENGE
While at Matter Communications, I was tasked with redesigning the UX structure of MFour’s website to better support the company’s evolving goals. MFour wanted the site to clearly communicate the value of their SaaS platform, visually tell their brand story, and position their technology as one of the most innovative solutions in the marketing industry. The existing website leaned heavily into service offerings, which made it difficult for users to quickly understand the core value and capabilities of the platform itself.
PROBLEM TO IDENTIFY
The primary challenge was restructuring the website’s information architecture to shift focus from services to the SaaS platform without losing clarity or overwhelming users. The site needed to better explain what MFour does, why their platform is unique, and how it benefits customers, all within a more intuitive and engaging user experience.
PROCESS
Discovery & Planning
I collaborated with internal team members and key stakeholders at MFour to evaluate the strengths and weaknesses of the existing website. Through this process, we identified that while the services were clearly outlined, the SaaS platform was underrepresented.
As the UX Designer, I led the restructuring of the website’s content hierarchy, ensuring the platform became the primary focus, with services repositioned as secondary support.
Customer Interviews - Partnering with the Strategy team, I participated in customer interviews to better understand how users perceived the website, what information they found valuable, and where confusion or friction occurred. These insights helped inform key UX decisions and ensured the redesigned experience addressed real user needs and pain points.
Content Outline & Site Map - Using insights from planning sessions and customer interviews, I collaborated closely with the strategy team and copywriter to create a detailed content outline for the new website. Once finalized, I translated this outline into a comprehensive site map in Slickplan, giving the client a clear view of how content would be organized and how users would navigate the site.
Low-Fidelity Wireframes (Desktop & Mobile)
After site map approval, I designed low-fidelity wireframes in Figma for both desktop and mobile experiences. These wireframes focused on information hierarchy, layout structure, and usability, helping the client visualize how the new content strategy would come to life.
Interactive Prototype
To further support alignment and usability testing, I built an interactive Figma prototype that allowed stakeholders to experience the site flow and navigation from a user’s perspective before moving into visual design.
Design Concepts
I collaborated with the Art Director and Graphic Designer to develop multiple homepage design concepts, each rooted in a distinct creative direction that represented MFour’s offerings.
RESULT
While my concept was not selected as the final direction, it influenced the outcome, specifically the use of real platform screenshots paired with illustrative graphs and charts. This approach helped quickly communicate the platform’s capabilities while remaining visually engaging and accessible.
To learn more about the final UX / UI design of the website visit https://mfour.com
