Website redesign, integrated digital branding and graphics for real estate software web application PropertyRadar.
PropertyRadar software wanted a modernization of it’s website with responsive design, Digital branding, WordPress theme, HTML, Scss. Following a previous website redesign that unsuccessfully captured the brand essence, and leading up to major shift in the software company's marketing strategies, I was brought in to overhaul the website design. In conjunction with a partnering development team for implementation, I worked closely with executive staff to reshape the way the brand was being translated into digital experiences.
By creating a streamlined and cohesive user interface and refined product assets, I successfully transformed the online experience. The strategy was to embody the brand through the design and visual motifs, to make the experience feel light & simple, and ultimately drive a stronger primary and secondary call to action. Typography, more whitespace, brand embodiment, assets that sizzle, better tracking for readability, more pronounced messaging,
Layout Sketch Ideations
For PR - Lo-fidelity sketching was used to ideate rapidly before moving directly into code-based prototypes for imminent screens and to add clarity around complex screens that would later be comped in Photoshop. Lots of this was about deciphering the customer experience manager's PPT content overview decks and coming up with new ways to display that content. Beyond content arrangement, I aimed to embody the brand into these layouts using motifs inspired by their logo redesign.
An informal landscape analysis was conducted to gather inspiration and ensure proper positioning. I looked at competitors and comparables, but also the general landscape for real estate related sites and technology companies.
A big part of this assignment was to align the site redesign with a brand refresh. Other than logo usage guidelines, the company did not have a brandbook or style guide. Before extending the visual style into a system of SCSS modules, I wanted to extrapolate a general look and feel for the site based on the new logo. I strayed away from existing seconday color palletes that competed with the new logo, added an emphasis on a lighter, friendlier, and more modern webfont with many weights for scalability, and introduced bolder fields of color.
Visual Design Compositions
Photoshop served as a means to ideate a new visual language, and begin to play with the rhythm and spacing on page layout. Though ultimately, many pages would be prototyped upon our forthcoming modular css framework, these visual design comps created an opportunity to gain buy-in from the team on how this thing would come together and inform second tier pages.
I often toggled between Photoshop and live-code prototypes iteratively, leveraging the different tools in their best capacity. Contentious pages, or those that would need lots of blue sky thinking were done in comps for precision, high fidelity, and fast-pace edits.
Having the visual design process break free from the traditional waterfall handoff approach was freeing and worked best for our team.
Digital Marketing Materials
Throughout the site redesign process, net-new marketing assets were built and existing assets were updated in order to support this move to a cleaner more modern brand. I produced a flurry of banner ad campaigns, Facebook graphics, email campaign graphics, slide decks, and other various print and digital assets.
Many of the assets created were used as touch points along a customer acquisition strategy put together by the customer experience manager, dripping and nurturing prospects along the funnel.
Product Feature Graphics, Sustainable Assets & Training
A big part of the redesign was to update for an upcoming major release of the company's software product. A large number of assets would need to be produced using up to date screenshots of desktop, tablet and mobile version of the software. Rather than bill my hours for this, I built a Photoshop smart object-based tool to empower administrative staff there to produce these. After working on gather the requirements and use cases for the tool, I built, used the tool for an initial output on the homepage and then trained and supported staff in their use of it. It felt really good to be able to deliver a living deliverable that would be used continually and freed my efforts up for more complex tasks.
Though not an illustrator by trade, I rolled my sleeves up to create simple illustrative graphics to support certain sections of the website. I was able to build them cohesively within the branding visual style and leveraged a subset of the brand color pallete. These were used on the website and slide deck presentations.
Lead Gen Landing Pages
Working closely with the customer experience manager, we built lead generation landing pages using B2B marketing automation tools. The approach was to tailor the landing pages to specific segments and campaigns, customizing layout, imagery and messaging accordingly.
I built several templates and customized templates based directly on the pre-processed css from the site and visual language developed in order to create a cohesive brand feel accross touch points. Once leads were created, cohesively branded email templates would be sent via a drip/nurture trail.
Working hand-in-hand with the project back-end developer, I coded the HTML markup and pre-processed CSS styles for the website. I built numerous page templates, converting my static HTML into WordPress CMS page templates. I also provided markup and styles for email templates and Lead generation landing page templates.
I coded CMS page templates for reuse accross the ecosystem using the WordPress codex and front-end / backend code.
It was a challenge to ensure bullet-proof styling given the fluid-responsive approach and decoupling of CMS structured content from layout.