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.
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.
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.
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
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.
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.
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.
