top of page

Upgrade

A smarter way to use credit

2017

Recreate the home

Role

 

Timeline

Team  

Tools  

Branding, Visual design, Landing page design

Two weeks

Freelance

Sketch, Adobe Illustrator, Photoshop

Upgrade aims to deliver a new kind of banking experience that seeks to eliminate fees on everyday transactions. It offers access to low-cost loans and cards and helps the customers learn about their finances so they can build the future they want.

 

I redesigned their homepage through distinguished design solutions according to the creative director’s request. The new design will provide more information about the brand and features, leading more users to explore and utilize the service.

Design process

00

4 steps in the design process

There are four steps to the process, which are Research, Ideation, Prototyping and Design Execution.

Research

- About the tasks

- Design opportunities

- Competitors

Group 43.png

Ideation

- Project goals

- Brainstorming

- Idea sketches

- Moodboard

Group 28.png

Prototyping

- Website structure

- Wireframe

Group 57.png
Group 20.png

Design execution

- Final design

01

Research

Getting ideas from the outside

Before I jumped into the design I researched the task itself, design opportunities and competitors. This process gave me a chance to understand the company and its services as well as an idea of the design direction.

About the task

To create a new Upgrade public landing page using the provided brand visual systems and brand voice.

Design opportunities

There are many online personal loan sites and most have a similar approach and format.


The current Upgrade website needs more information about the value of the brand and services: why users might need a personal loan, why they should choose Upgrade, and which features of the brand and testimonials inspire trust.

Furthermore, regarding the form of rating, most of the lending websites have similar formats, so I experimented with different ideas in this section.

Informative

Accessible

Trustworthy

Competitors

I researched competitors in two different directions.


1. Companies that provide the same service (personal loans): Lending Club, Prosper, Discover, Marcus, Avant, Earnest, and Upstart.


2. Companies that have similar services and a specific brand voice on their website: Robinhood, Zero Financial, Claritymoney, Nerdwallet, Simple, etc.

Through the research, I was able to learn more about the service, Fintech designs, and the contents of most lending website designs.

Avant_logo.png
Lending_Club_Corporate_Logo.png
Prosper_Marketplace_Corporate_Logo.png
Discover_Card_logo.png
logo_blue.png
Earnest_Logo_January_2015.png
Bitmap.png
Nerdwallet_Horizontal_Logo.png
Simple_(bank)_-_Logo_(2016_-_).png
clarity-logo-teal.png

02

Ideation

Think broadly

After the research, I thought about project goals and sketched brief ideas, gathering relevant images to design the homepage.

Project goals

I set three project goals which are 1) keep Upgrade’s brand voice, 2) create a new and effective rating form and 3) provide information about the company and services.

upgrade-02.png

Create a differentiated landing page (especially the “check your rate” form)

Keep Upgrade’s visual systems and brand voice

Let users know the value of the brand and the service at a glance

Brainstorming

I explored a series of random thoughts on the brand as well as new design ideas. I could identify the Upgrade’s visuals (color palette, typography, photography style, etc) and brand language. Also, I thought about what content is needed for the new design.

upgrade_21.jpg

Idea sketches

I sketched homepage structures and icons that I used for reference. In this step, I was able to experiment with different structures so I could predict which structure would be better for the customers.

upgrade_20.jpg

Moodboard

Accessibility, Freedom, Breeze

 

I gathered relevant images that gave me visual ideas for the homepage design. I researched the images by using three keywords: accessibility, freedom, and breeze.

upgrade_05.jpg

03

Prototyping

Build the structure

I built the homepage structure based on the previous process and experimented with different compositions and design options to find out the best direction for the users.

Website structure

The homepage consists of the top menu bar, hero image with the check your rate form, CTA, how it works, features of Upgrade, testimonials and more. Descriptions for each category are below.

upgrade-08.png

Design drafts

Based on the structure, I experimented with four different designs.


A: I kept the original check your rate format but left it above the folder. I also tried to use neat icons.

B: I kept the ‘check your rate’ form above the folder but changed the structure. I re-organized the contents with icons and reduced some of the graphic elements.


C: The ‘check your rate’ form is still in the same position as design B, but it can be hidden. When users click on the small arrow, it is minimized to the top but reappears when clicked again. I aimed for simplicity in the icons and other graphic elements to avoid cluttering the page.

D: The big difference with design D is the ‘Check the rate’ form. The form can be minimized and is fixed to the right side of the website. When the user clicks on the navy color button, the form folds into the right side; otherwise, it spreads out, so the user can fill it out at any point.

upgrade-07.png

Iconography exploration

I experimented with three different iconography options. The first one is more decorative and I used two colors to make the icons more dynamic. The second one is one color icon with shadows so it gives more depth. The third one is the most simple one and made of basic yellow lines.

web_42.jpg

Design execution

04

I finalized the design with two completely different styles to be used for A/B testing.

Finalize the project

Option A.

It has the ‘Check your rate’ form on the right side of the main hero image. It also connects to the call-to-action: Make a move towards your future - How Upgrade works - Why users need Upgrade - Testimonials - Customer center - ‘Check your rate’ form - Press for trust - Footer.

Landing_02_01.png
Landing_02.png

Option B.

It has the same flow, but the big difference is the constant presence of the ‘Check your rate’ form as the user scrolls up or down the page. An extra feature is that the ‘Check your rate’ form may also be hidden by clicking on the blue tab.  (design draft D).

05

Reflection

The trustworthiness of a fintech project

It was a great opportunity to not only study the company but to also have a chance to learn about the fintech industry and design styles. Since the trustworthiness of the fintech industry is the most important part, the design should reflect that aspect.

For this project, I tried to show the company’s effort to provide appropriate financial information and personalized support for the customers so that the company not only provides its services but also educates them on individual financial management.

Landing_03_01.png
Landing_03.png
bottom of page