Elephant

Unison:
Welcome
home

Real Estate / Nominee
Elephant

Real Estate

Nominee
Initially, we did a lot of exploration for how the website could look and feel, through visual research within the category and beyond, which we shared with Unison through a series of working sessions. - Elephant Team
image description
Q: Can you briefly describe your project and the concept behind it? A: The home ownership investment company Unison commissioned us to redesign their website. We ultimately launched a rebrand of unison.com, helping to shape and develop a new vision for their entire digital product experience. We also created a flexible design system that enables the Unison design team to build new features and services in the future.
image description
Q: Talk about your initial prototypes. How did those ideas change throughout design and execution? A: With an ambitious launch date, we started this project before the brand identity had been finalized. Initially, we did a lot of exploration for how the website could look and feel, through visual research within the category and beyond, which we shared with Unison through a series of working sessions. From there, we made decisive decisions and processed the feedback to create the experience that you see today—not a lot changed from the initial visual design and messaging concepts. The part that was subject to the most changes were the various calculators on the website, we went through a lot of iterations of how the data was structured and where the emphasis should be.
image description
Q: What influenced your chosen technical approach, and how did it go beyond past methods? A: Our chosen technical approach was driven by a need to support a high degree of collaboration between the Elephant engineering team and Unison's engineering team. We needed a solution that would empower our teams to bring a strong visual story to life with code while building a scalable solution that required numerous third party services and back-off dependencies. In order to achieve this integrated approach, we had to be successful at two things. First, spending significantly more time up front to understand the current technology stack while supporting a roadmap for the future. And second, enhancing our prototyping effort so we could refine the highly visible tools and animations.

What breakthrough or “a-ha” moment did you experience when concepting or executing this project?

Once we had a strong concept, we made a presentation and presented it to all the key stakeholders as well as the entire company—sharing that foundational work and getting so many positive reactions early on really motivated us to push on and deliver something really great. It also helped us make some thoughtful tweaks to the concept before we locked the design system and started the development process.

Q: What web technologies, tools, or resources did you use to develop this? A: From code frameworks to development environments and build pipelines, there were a multitude of technologies leveraged to build the new unison.com. Webpack (Transpiling, module bundling) Gatsby (static site generator) JavaScript ES2018 (babel-env as EMCAScript spec) Node v10.14.1 (Node LTS) D3 (Data visualization) Jest (Unit testing framework) SASS (Preprocessor) Standard (JavaScript styles and linting) StyleLint (SASS Linting) JSDoc (Documentation) GraphQL for Content queries Contentful CMS Mustache templating Visual Studio Code Bitbucket with CI using Bitbucket Pipeline
Q: How did you balance your creative and technical capabilities with the client’s brand? A: Due to the nature of Unison’s product offering–home investments and financial services–it was important to instill a sense of confidence in site visitors. It's a key moment within the homeownership journey and potential customers would be looking to Unison for guidance. Before coding began, our product and engineering teams needed to have a full understanding of the brand's business goals and the strategic goals of the website. This understanding would help support the roadmap of the features to be designed and how they would need to be built.
Q: How did the final product defy your expectations? A: Unlike physical products, financial services are tricky to emotionalize and explain; the challenge was to make it feel delightful and also easy to understand. The fact that this work has gone on to be successful at the Webbys is a testament to that.
Q: Why is this an exciting time to create new digital experiences? How does your team fit into this? A: The whole suite of financial products offered by Unison are really quite unique in the marketplace, so it was a really interesting challenge to figure out how to explain that to the customer, because this is a new category there weren't a lot of references to draw from. Solving this challenge required closer collaboration with the Unison product owners, who were instrumental in helping us understand how the whole thing works.

Explore

MediaMonks

Netflix DARK

TBWAChiatDay LA

Behind The Record

Wild Forest

François Audouy

Zuleika Arroyo

Black Women Too

Sid Lee / DIgital Kitchen

The Joker’s Escape

NBC News

Trans, imprisoned — and trapped

The National AIDS Memorial

World AIDS Day 2020 - A National Conversation -

AKARU

Avoriaz

GSD&M

U.S. Air Force ECHO

Animal

Life At Spotify

Center for Architecture

Visualize NYC 2021

HAUS

Tillamook

360 Design

Zoonomia

Wonderland

Wonderland

Gigarama

Sing, My District

Nightjar

Discovered Wildfoods eComm Experience

Dogstudio

ZOOX

MediaMonks

Maserati MC20

Cheil Worldwide, Inc

Samsung Galaxy S21 5G series

NYC & Company

The Black Experience in NYC

ESPN

ESPN College Football Tracker

Paradowski Creative

The Sheldon Website

Active Theory

CHILE20

Active Theory

Secret Sky 2020

Hook

YouTube Culture & Trends Report

Hook

Local Guides

Hello Design

The Marvelous Mrs. Maisel

Studio Airport

Emergence Magazine

Athletics

New York Review of Books

R/GA

ESPN House of 98

ThoughtMatter

CENTER Photography 2020 Compendium

Turbulent

Turbulent.ca

IntraCollaborative

Newest Americans

Rotate°

Big Green Egg

Wide Eye

WhiteHouse.gov

Swell Creative Group

Everyone In LA: 2020 Homeless Count

firstborn

Exo

GIPHY

GIPHY

Content Pilot LLC

Chambliss. Bahner & Stophel

Hello Monday

Bartlett Summer Show

Work & Co

Vistaprint Masks

Hello Monday

Virgin Hyperloop

Forbes

Forbes 30 Under 30 2021

MIT Open Learning/Center for Advanced Virtuality

In Event of Moon Disaster

MediaMonks

Frontier Development Lab: Solving NASA’s Toughest Challenges with Google Cloud × Intel

Jam3

ComplexLand

Spring/Summer

Stykka

firstborn

The Leary Firefighters Foundation

Elephant

Elephant Website