Objective

To redesign the Upgrade public website through distinguished design solutions. The new design will provide more information about the brand and service and lead more users to explore and utilize the service.  

Project Goals

- Keep Upgrade’s visual systems and brand voice

- Create a differentiated landing page (especially the checking rate form)

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

Role

Brand design, Visual design

Deliverables

Upgrade homepage

Company

Upgrade, Inc

Year

2018

00.

Design process

4 steps in the design process

1

2

3

4

Research

- About the tasks

- Design opportunities

- Competitors

Ideation

- Brainstorming

- Idea sketches

- Moodboard

Prototyping

- Website structure

- Wireframe

Design execution

- Final design

01.

Research

About the task

To create a new Upgrade public landing page using the 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 rating form, most of the lending websites have similar formats, so I experimented with different ideas in this section.

Competitors

Researching competitors with 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.

02.

Ideation

Brainstorming

- Explore a series of random thoughts on the brand and new design ideas.

- Identify the Upgrade’s visuals (color palette, typography, photography style, etc) and brand language.

- Think about what contents are needed for the new design.

Idea sketchs

Moodborad 

Keywords: Accessibility, Freedom, Breeze

03.

Prototyping

Website structure

Menu​: 

I kept the initial position of the website menus.

Hero image: 

I decided to use a photograph which represents the brand and service (a woman in a landscape). I thought this image was ideal because a wide landscape gives the viewers a sense of freedom, ease, and openness. To follow the Upgrade brand photography style, I used a photo which expressed freedom, welcoming, and accessibility. 

Check the rate form: 

an important part of the website, so I kept it above the folder. 

Call-to-action: 

the top 6 reasons people use personal loans. All reason/suggestion buttons link to the first step of the application form, which induces users to check the rates.

How it works: 

it introduces the 3 easy steps in the loan process.

Features of Upgrade:

this section gives information on the ease of the service.

Testimonials: 

reviews from satisfied customers. 

Support center:

I kept this critical part at the end of the website.

Check the rate button: 

this button reminds users to check the rates, so they don’t need to scroll up again.

Links:

links to the press and prestige brands.

Footer:

shows social, services, resources, etc. 

Design draft 

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

A: I kept the same form format but left it above the folder. I tried to use neat icons.

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

C: The ‘checking your rate’ form is still in the same position as design B, but it’s foldable. When users click on the small arrow, it is folded but reappears when clicked again. I aimed for simplicity in the icons and other graphic elements. 

D: The big difference with design D is the ‘Check the rate’ form. The form is foldable and 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.

Design A

Design B

Design C

Design D

Iconography exploration

04.

Design Execution

Final Design

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

 

Option A has the ‘Checking 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 - ‘Checking your rate’ form - Press for trust - Footer. 

Option B has the same flow, but the big difference is the ‘Checking your rate’ form described above (design draft D).

Mobile

Final design A

Desktop

Tablet

Desktop

Tablet

Mobile

Final design B

Mobile

Desktop

Tablet

Desktop

Tablet

Mobile