Long & Foster: A Massive Redesign

The Challenge

Our task: Design a modern web experience for buyers, sellers, agents, community members, and, of course, for the business. Steps: Do the research, take apart the whole site, re-structure it, redo the UX, introduce components, rewrite the content, redesign the site visually — all while updating the overall brand as well. Working as part of a small team within RP3 Agency, I was the UX lead and also filled many other roles on this complete overhaul of the Long & Foster site.

My Roles

  • Lead UX designer
  • Information architect
  • Sketching solutions
  • User flow creation
  • Wireframe creation
  • Prototyping
  • Requirements gathering
  • Overseeing user testing
  • Writing business rules and acceptance criteria
  • Prototype developer
  • Photo editor
  • Icon retoucher
  • Quality assurance tester
  • Animator and compositor
  • Production art support
  • Strategy support
  • Video editing support

Approach

A hand-drawn mindmap

Qualitative Research

We were grateful to have significant time to conduct qualitative research, interviewing people both internal and external. Making mind maps helped our team to begin making connections between coded subjects.

Post-its used in journey creation

We created customer journeys and personas to get inside the mindset of each audience.

Design Debt

Outdated and non-responsive, the existing site at this point was not solving the goals that users have, e.g. finding houses, learning about homebuying and selling, prioritizing features, and talking with agents and staff. We had a clear starting point, but we also had the flexibility to redesign the entire web presence.

The old website, used from the early 2000s till 2016
A rough draft of the sitemap

Information Architecture

Probably the most intensive and longest IA phase I've ever worked on, this step entailed card sorts, site inventory, many brainstorms, and meetings. I was taking copious notes on rough drafts over several weeks.

Property tile

Component Design

Making reusable components such as a property listing tile involved analyzing both the user goals and existing patterns to create a simple, highly usable block with meaningful and balanced visual priority.

An agent card, showing relevant info about the agent

Another example of a component: the agent card, which is customizable and flexible enough for a massive variety of data -- about 10,000 agents.

A list of tasks written on a whiteboard, reading: Phil- Insurance, User testing solutions, Relo pages, Trello, agency preso

We worked in Agile sprints, designing and submitting components and templates every two weeks, then revising and iterating on them. In addition to using Trello and Jira, we sometimes utilized whiteboards for quick assignments.

At this point, we had conducted user testing, and I was in charge of fixing usability bugs, the largest being a menu system which users struggled with.

Screenshot of a pen which allows for text transformation

One of the issues (of many) we encountered was a data feed of neighborhood names in all caps. I wrote a regex Codepen to show our developers how I envisioned transforming it into initial caps. View the Codepen.

the new site

Release

The brand-new site hugely succeeded in all major business goals, and we also heard postitive feedback from the agents themselves. Visit the redesigned site.

logo for W3

Accolades

We won a W3 prize for UX, and we are consistently listed as a front-runner in the top real estate websites from Real Trends.

More Projects

Wireframes for the Aspen web tool

The Aspen Institute: Healthy Sport Index

Helping parents and teens make informed decisions about sports. Read about the Healthy Sport Index.

CableWrangler.io

When you have 100+ cables and dongles, you build a small React app to organize them. I made a JSON inventory dataset to power it; now I can find that HDMI to USB-C breakout box I was looking for. Visit the site.