PROPERTY RADAR
Modernizing a digital brand.

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,

Image Title

UX Design

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.

Landscape Analysis

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.

Visual Design

Style Tiles

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.

Illustrations

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.

Interaction Design

Front-End Code

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.

WordPress Templates

I coded CMS page templates for reuse accross the ecosystem using the WordPress codex and front-end / backend code.

Responsive Design

It was a challenge to ensure bullet-proof styling given the fluid-responsive approach and decoupling of CMS structured content from layout.

Project Details

Role

  • Experience Strategy
  • Visual Design
  • Interaction Design
  • Front-End Development

Deliverables

  • Website Design
  • UI style guide
  • Visual Design
  • Layout Mockups
  • Final Production Markup
  • Content Management Services
  • Artwork & Graphics
  • web banner ads
  • slide decks
  • email newsletter graphics
  • advertising & flyer designs
  • Sustainable graphics tools & training
  • Copywriting & Messaging

Duration

6 months (approx.)

Tools

  • HTML/CSS
  • Foundation Framework
  • WordPress
  • Photoshop
  • Invision App
  • Pardot
  • Jive

Project Team

  • Customer Experience PM
  • Customer Success Team
  • Back-End Developer/Programmer
  • Engineering/Dev Ops Team
  • Founder/CEO

Agency

Independent Contractor

Key Tasks:

  • Redesign to Strengthen Brand integration and rebranding effort
  • Phasing out the legacy product ForeclosureRadar
  • Responsive web design (fluid and Ress)
  • Various custom post types, archives, page templates, etc.
  • Master styles, Homepage, Forum styling
  • Print Advertising
  • Sustainable graphic assets creation with training and best practices
  • Style Guides
  • Lots of rapid prototyping and iteration cycles
  • PPC landing page templates, Custom website marketing landing pages, Pricing Pages Integration
  • Registration Flow
  • Welcome Flow
  • User Segments and product focused

Next Project
A fresh perspective on a regional library website.