PRINT & UI/UX
Rebrand for Consistency
and Authenticity
Role: UX/UI, graphic design, photography
Team: 1 creative director, 1 copywriter/art director, and 3 other designers
Deliverables: Print collaterals, design system and webpage redesign
Timeline: 2 months
Background
CommonBond is a student loan lending platform that provides products, including refinancing, in-school student loans, and student loan repayment benefits. The company needed to develop a trustworthy brand for scalability for its hyper-growth.
Business problem
At the beginning of the rebrand, we ran a series of interviews with our internal stakeholders across several functional teams to understand the brand vision and values. As a financial startup, we wanted to look trustworthy yet stand out from our competitors. However, the inconsistency of our design approach didn't serve our purpose. The entire website suffered from the incomplete "rebrands" of individual pages in the past years.
User problem
In parallel, our team also ran some user interviews to uncover any pain points in our prospects' existing shopping journey. The results mainly evolve around the theme of information overload. It was difficult for users to look for and consume the content they needed, just like most other finance websites.
Challenges & Solutions
01.
How might we create a trustworthy brand identity that appeals to millennials?
Before starting any visual design work, we took a step back and did a competitive landscape analysis to see where we could stand out from the crowd. We also utilize market research to identify our target audience's beliefs in brands. The main two takeaways are:
-
Financial institutes are usually perceived as conservative, cold, and rigid.
-
Millennials value customer service experience; embrace diversity; care about the social responsibility of the company they purchase from.
We then took the above learnings and infused our company's existing values to create a warm and modern brand. Our approach strives for a balance of conventional and cutting-edge to appeal to our varied customer base.
02.
How might we design a website that is flexible enough for future changes?
Work smarter, not harder. Especially when time and effort were the limits, we needed to lean into a framework that supports scalability. That's why we take a high-level approach, to rethink and redesign the entire website as a whole, using modular design patterns.
To start, we built on a 16-column grid and created 19 different styles of modules that can work across desktop, tablet, and mobile. With that, we ensure each piece functions as an individual element, which can also pair well with the other modules. This design system supports consistency since we don't need to build a new layout for each section on different pages. Moreover, it alleviates the amount of work for one-off changes from marketers to developers.
03.
How might we structure the website to facilitate our prospects finding the right lending solution?
Let's admit that getting a loan is a daunting task. We all want to get it done fast and still feel good about our decision afterward. From our previous research, we know that we have two main types of users:
Most of our traffics is on the desktop web. Users looking for options for their loans usually have multiple tabs and spreadsheets open on the side to compare each lender. We aimed to simplify the experience on our site so that the users can achieve their goals quicker.
"You said you're a leader, but I couldn't even easily find the information I need here."
Site navigation cleanup
The original navigation was full of ambiguous entry points. In the redesign, we consolidated links to tailor to the goal of the users, whether they are looking for products we offer or looking to learn more about a specific topic.
Footer is like a site map and should almost be mirroring the actual top navigation. However, in the before footer, the presentation of the hierarchy of the website was confusing. There's no other helpful information about the products that could be found here, except the company's contact info. We need to make sure people find value in navigating the site at any given point.
Less is more
After numerous research on student loans, the users are already tired of reading pages of financial education info, plus all the similar marketing value props that each company offers. Writing short and precise copy that aligns with the users' needs and benefits becomes crucial. We highlight the essential information to the users as individual sections on the page — the rate ranges and protections the borrowers will receive with their loans. Laying out content with enough white space around provides a clear visual hierarchy, which enhances the experience of digesting information. On the other hand, we verify our company's legitimacy by showcasing testimonials from existing customers. And remind our customers that they are also doing good for society with our company's social mission to help cover the educational cost of a child in the developing world. That especially rings true to our Millennials audience's value. This updated layout sets a reusable structure for the rest of our other product pages.
Results
35% increase in user engagement and 14% year-over-year lift in conversions.
What's next?
Since this project was a time crunch, we didn't include any usability testings as part of the process. After the new site launched, the company would have to run some user testings to ensure our updated design has solved the user's pain points and identify opportunities to create a more engaging and comprehensive learning and rate shopping experience.