Unison: Welcome home

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

Can you briefly describe your project and the concept behind it?

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.

Talk about your initial prototypes. How did those ideas change throughout design and execution?

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.

What influenced your chosen technical approach, and how did it go beyond past methods?

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.

What web technologies, tools, or resources did you use to develop this?

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

How did you balance your creative and technical capabilities with the client’s brand?

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.

How did the final product defy your expectations?

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.

Why is this an exciting time to create new digital experiences? How does your team fit into this?

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.