Related Companies

Web Platform Design for Luxury Real Estate Brand

Related Companies is the most prominent real estate firm in the United States. Beyond over 40 years of industry experience, Related also owns brands like Equinox® Fitness Clubs for further enhancing the value of its properties through an exclusive, branded amenity and lifestyle offering.

Client: Related Companies
Website: related.com
Date: September 30, 2018
Services: UX, UI, IxD, Web Design

Phase One

Re-imagine the digital ecosystem for Related and win the business.

In this phase, our team is tasked to start map out a high-level vision for the future of Related web properties while prioritizing the rental experience. Based on research and data, we’ve conducted the preliminary UX and visual design works for our presentation.

Problem

Related is a high-end real estate company which provide luxury living spaces and services. However, its outdated digital platforms fail to match the quality of the brand.

Challenge

Truly understand the demographic who engage with the brand. Comb through massive site structures and audit the friction ingrained in user journeys. Identify disjointed web services.

Solution

Redesign the critical elements for Related websites. Conceptualize connected platform features through compelling user stories. Reveal future possibilities in the digital space for the client.

User Research

Firstly, our team studied about current and prospective Related customers. After interviews and surveys, we regrouped the users and established our personas to find user insights.

  • Young Professional – Anna
  • Dual Income, No Kids Present – Dani & Lars
  • Young Family – The Stone Family

User Stories

According to users expectations, we drafted three user stories to demonstrate how people can better engage with the brand in the digital realm. By introducing new features, we showed the client how user experience can make a significant impact.

Find A Perfect Home

In this user story, we are showing an optimized process for apartment searching. Inspired by delivery services, we’ve create an application tracker to guide applicants through. Upon signing the lease, users can connect their internet accounts right away. Related will then set up all their smart devices and services in their new home before new tenants move in.

Stay Informed & Get Involved

In this flow within the resident dashboard, we are showing how a tenant can manage lease options, browse all building events and RSVP. Everything included in the lease can be easily found and customized.

Be More Efficient

Related can provide smart homes with seamlessly connected services. In this user flow, we are showing how the screen on a smart fridge can also be a great place to achieve quick tasks. Every minute counts, Especially for family residents.

Initial Visual Design

For this client pitch, we quickly put together a presentational design. Different than a fully fleshed-out design, the focus here is to point out a strong design direction which can drive the experience forward. Starting from basic styling, a set of design mockups was created for conveying creative ideas.

Phase Two

Elaborate UX and visual design, create scalable and flexible design system, deliver reliable websites.

Right after winning the business through a fierce competition, we started working closely with client to fulfill the first scope: design and build two websites for Related Companies and Related Rentals.

Related Companies – related.com – is the corporate site for the brand, which provides information about the group.
Related Rentals – relatedrentals.com – is part of the Rental business operated by Related, which is a platform for rental units.

Problem

The current websites are outdated and glitchy, which no longer aligns with the brand. For rentals site specifically, the disjointed user experience hurts the conversion rate.

Challenge

The amount of accrued design and technical issues is considerable. Each Related website needs to have a consistent style while being distinctive.

Solution

Renovate site structure and simplify user journeys. Redesign the web experience by creating a scalable design system. Apply the same design language to both sites incorporating a color coding method.

Design Principles

Elevated

Align with the exclusive life style represented by Related. The overall look & feel needs to be elegant and concise, while paying attention to details.

Meaningful

Prioritize the most useful content and eliminate clutters and noise. Deliver human-centered design around user expectations.

Connected

Link Related websites together and pave the path for frictionless navigation. Provide consistent user experience across devices.

Extensive

The same design language should be able to scale and shape all Related digital properties. Create a versatile and flexible design framework.

Process

In VML New York, the experience design team loves both Agile and Lean methodologies. For this project, we chose Agile process in order to move thing forward fast while being responsive to frequent client feedback.

Information Architecture

En parallel with initiating the visual design, the team started analyzing every bit of the current site and conducted multiple content workshops with Related marketing team. The outputs are a thorough content audit and a ready-to-use content inventory.

Visual Design

Working off the visual direction from Phase 1, we dug deeper into for a comprehensive visual design solution. Lead by our design principles, we baked in three more ingredients in the creative oven: aesthetics, usability, brand identity.

Taste Testing

At the very beginning, we’ve prepared multiple mood boards and teased out the typography and layout ideas. After testing with the client team and potential customers, we narrowed down our detailed design choices.

Visual Identity

Related Logo

 

 

 

Inspired by the Related logo, we design ‘the notch’ as the core visual identity for the project. A detailed document, as shown below, was created to standardize how to use this element.

Design System

With content and design direction ready, we started the creation of our design system by incorporating a distilled Atomic Design methodology.

Library
Pages
Prototype
Design Specs

Workflow

The main idea for this tool set is to maximize collaboration effectiveness within our design team, while ensuring the client can visualize the progress at any given time. At the output end, the workflow can be plugged directly into our dev team’s inbox, this guarantees the productivity for production.

  • Paper & Pen, Whiteboard & (Dry Erase) Markers
  • Abstract
  • Sketch
  • InVision & Framer
  • Zeplin
  • Jira

Learnings

Reshaping traditional industry standards should be progressive.

When empowered by the Internet, traditional business models can be significantly improved. However, sufficient time needs to be given to the users for transforming their existing behaviors.

Keep all works traceable and don't hesitate to move on.

When incorporating Atomic Design methodology, it's not possible to anticipate all design atoms ready at once. The better idea is to move onto the next phase timely and work backwards when necessary. Version control and Sketch libraries can help us to avoid tons of trivia works.

Know about when to stop exploring and start testing.

In the design world, there are so many promising ideas for solving one problem. Instead of falling into the rabbit hole, test design choices with project stakeholders and users regularly. Approach the final solution in an iterative way.

Roles

  • Creative Ideation
  • Visual Design
  • UX/UI/IxD Design
  • Workflow Support

Design Team

  • Hunter Eshelman  ECD | Experience Design
  • Eddie Velez  ACD | Experience Design
  • Andy Cascone  UX Design Director
  • Justine Tackas  UX Researcher
  • Xia Du    Experience Designer