Setting a design pattern for a flexible website product
UI Project // ‘24
A decision was made to migrate away from our Wordpress business into an internally built CMS. I was asked to create the foundational pages that will be populated with several different customizable widgets.
The task I was given
There were 2 very large objectives to meet. The first of which was creating an overall design pattern that could be used to house several widgets of content. My initial concepts started and ended with a basic home page grid with a central search field. The internal pages would be made up of a 50/50 split between photos and widgets.
The second was creating said widgets for maps, employees, descriptions, content sliders, similar content and much more.
What was the planing process like?
What was the production process like?
We used Figma entirely for designing screens, prototyping, interactions and revision notes.
Generally I start with the home page, which builds itself. In the prop-tech realm most sites look the same: a large hero image, A large headline, supplementary paragraph text below and a large google-esque search field. This proven pattern is important as it guides the user towards properties efficiently in about 2-3 clicks. We even get a lot of feedback from our clients that their clients naturally compare our/their sites to Zillow and recreating that familiar experience would go a long way in their satisfaction with our product.
As you navigate further into our websites, there is a noticeable pattern of splitting the desktop version in half. One half devoted to images and other media which would be fixed on the page. The overwhelming feedback we get would be prioritizing agent/property/neighborhood photos and now they will always be accessible regardless of scroll.
The second half composed of specialised content widgets which can then be reordered however the client chooses it to be. The 2 halves would be stacked on top of each other on mobile designs.
What did I deliver?
We presented a modern, flexible, mobile-first design with enough features to keep up with the likes of Zillow and to have a broad base of customizability to compete long-term with the many updates a real estate business may have.
“40+ Screens Spec: Home Page, Individual Agent Home Page, 3 Property Archives (List/Gallery/Map), Parent Archive/Child Details Page for Communities, Individual Agents and Teams, Blog and Resources”
In the end we our team has established a design system for organizations to tell their story in a variety of ways that feels on-brand. This is a milestone that will be tracked in the coming months and years that proves again that our jobs as designers are never finished and have a cyclical nature akin to something like fashion. The product story is not over….
“I learned that websites begin looking the same very easily and that content structure is equally as crucial in setting up your success and differentiation in any industry.”
— A brand-conscious designer