Overview

RealKey is a fast-growing fintech startup focused on streamlining and automating the mortgage process.

With stakeholders’ plans for product launch, I was tasked with updating our current website visuals to better align with the product. The look and feel was to be consistent with the brand’s look and feel, while working with the existing content and staying on-budget allotted for the design and development costs.

Additionally, I had to produce various assets for various marketing campaigns to promote our product, which included Social Media posts, blog post image cards, banners, updated branding.

My role
  • Art Direction
  • Image Curation and Creation
Length of project

Website 2 weeks

Visual assets — various

Tools
  • Figma
  • Photoshop
Team
  • 1 designer

Website Redesign

Remove redundant CTAs
Update the hero image
Improve quote’s visual treatment and hierarchy
Visual hierarchy overall needs enhancement
Color palette does not match the product or updated branding

Project Requirements

I began the process by assessing the current state of the website — I took screenshots and lined them up. There were obvious areas of concern.

A broad outline for me to tackle was:

  • Create a quick visual update to improve overall look and feel of the website
  • Keep content and site architecture the same out of time and budget constraints
  • Keep the length of the project to a week plus a week on revisions

Research

I began the process by assessing the current state of the website — I took screenshots and lined them up. There were obvious areas of concern.

Next, I looked into what our direct competitors were doing, as well as other successful SaaS model companies and startups that I find inspirational.

Furthermore, I read articles on psychology principles for product designers.

Existing Design Language System

RealKey product had somewhat of a Design Language. There was an obvious gap between the visual language of branding was using and the product.

  • Colors
  • Typography

End result of branding - product alignment

This was the end result of the further developed branding. Additionally, I have created lockups to be used within the product and emails that are sent out to the users during sign up process or task assignments.

It all came together nicely.

Before and After

Logo various uses

Email and product uses

End result

A few things I was able to accomplish within the course of the project were:

  • Visually aligned the product and the website
  • Updated the branding
  • Improved the hierarchy of elements
  • Created iconography
  • Visually treated the headshots on the About page to look unified
  • Translated complex product features into a consumable and understandable visual representations of them

A few usability enhancements were introduced as well:

  • Shortened the length of the forms
  • Added a “Sign up for our news email”
  • Took out redundant CTAs

Page Lineup: before and after

Final layout

Play Video

Social Media Banners

In preparation for launch of our product, I’ve updated our Social Media Banners and profile images.

I decided to take the promotion of the brand approach. I came up with the tagline and the concept of “untangling the mess” of the Mortgage transaction process by using our automated platform product.

All the banners looked more or less the same — just optimized for use on each platform, as well as taking the desktop and mobile views into consideration.

Social Media cover and profile images

In context

Demo mocks

As a part of a marketing campaign, I created a few demo mocks that would promote RealKey and get the people to sign up for a demo. I was handed a list of features to be showcased.

I wrote the copy and created the visuals. The following are a few of them:

  • Built-in Chat
  • Lender Review
  • Invitation and Condition Assignment

What I've learned

In the course of this project, I had to learn how to take a complex product and condense the information into a simplified and abstracted, but still accurate and understandable representation of said product.

Asset used for hero image has been downloaded from freepik