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
Ideation
- Project goals
- Brainstorming
- Idea sketches
- Moodboard
Prototyping
- Website structure
- Wireframe
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.
_-_Logo_(2016_-_).png){kind=logo}
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.
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.
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.
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.
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.
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.
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.
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.
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.
bottom of page