Case Study UpFront

UpFront has been a challenging and learning journey. When the co-founders shared their idea with us we were super excited: a car financing platform, to help people generate savings they wouldn't have captured or discovered. Although the project was a new paradigm, we respected our usual process: we started with the brand definition and concept, then developed the design and created the layout.

What is it?

Upfront is a car finance platform. We exist to help people generate savings they would not have captured or discovered without us. This is a mix of (a) making them realize that those savings exist and (b) reducing the friction as much as possible to get them.

What it does?

Upfront generates savings on auto debt refinancing.

The Upfront team identified that this category within lending was underutilized and decided to launch this product to take advantage of it. How they decided to leverage it:

• On the one hand, they wanted to raise awareness of the product as it was not well known: they needed to get themselves discovered.
• On the other hand, one of the big advantages was that they wanted to reduce the friction of the process as much as possible: to make it as fast and smooth as possible.

What was their main problem?

Upfront was launching a new product that was unknown so they needed a new website that accurately conveyed their value proposition.

Our Process

First, we define the objectives and develop a measurement plan. In the measurement plan we defined the objectives we considered focusing on. Next, we gave way to the design process, creating a custom moodboard and brand strategy with these insights and the key values that Upfront shared with us. We then wireframed and adapted the new website design. After this design was approved by Upfront, we started working on the development of the project in Webflow, finally getting the responsive website from Upfront.

Now we will explain the process we followed:

Research

In the research phase we analyzed different brands and projects that were similar to Upfront, which would allow us to have a better idea of what path to take when starting with the design. So we looked for ideas on brands related to saving money, websites that would indicate how to save more on your car loan, home and car refinancing, companies that would offer services to help you save money, etc.

Design

With the ideas gathered both in the research we conducted and in the ideas shared with us by the Upfront team, we began the design process.

For this part of the process, we will rely on the Figma tool, which will allow us to capture the design of the new website. There we create a style guide with different aspects:

• The first thing we did was to establish which colors would give life to the brand. Finally we opted for light tones, which sought to give simplicity, confidence, ease of use and closeness; against strokes of color protagonists, which try to represent strength, humanity, discovery and technology.

• Secondly, we chose the type of typography, choosing polysans, which fit with what the brand wanted to transmit, giving it a touch of confidence and freshness.

• Thirdly, we also introduced illustrations within the web design, looking for simplicity, confidence and closeness. At the same time they served as an accompaniment to the explanations within the web, facilitating the understanding of it.

• As for our UX proposal, we developed an architecture based on the simplicity and attractiveness of the brand. What we were looking for was to make it easy for users to navigate the website to facilitate the process of obtaining leads. As we also sought to convey the feeling of trust, since a service that offers people a service to generate savings that would not have captured or discovered, in some cases can be distrusted, making the explanations were accompanied by illustrations and photographs, which gave clarity in the explanation and confidence to the reader.

After all the design was created and developed in Figma, we made a final proposal to the client and with their approval we started to build the design in Webflow.

Build

Once we had the web design ready, we started to build it. Having clear that the main objectives was to help people generate savings that they would not have captured or discovered.

Therefore, in order to achieve that the website could convey what the client wanted, we relied on the Webflow tool for its layout, looking for it to be simple and attractive, which is why we decided to integrate animations in it, with the clear objective of capturing the reader's attention and serve as a support for the explanations.

We had to make different animations throughout the website, starting from the beginning, when the UpFront page loads, making an arrow bordering an image inside a circle. For this at the beginning in the minimum team we wanted to rely on React, a javascript library to create applications, but shortly after having made the animations, we realized that these did not work as well as we expected, that's why we decided to change them.

The result

With the final design successfully launched, we can only wait to see if it meets the expectations of our goals, and that's exactly what has happened!

We enjoyed collaborating with such an amazing client who is already revolutionizing the world of savings with the clear goal of being able to help people generate savings. We learned many things in our process leading up to the final delivery and we are very happy to have done a project that matched the client's requirements!

We highly recommend you visit their website and if you get a chance, take their questionnaire to see what you can save on, which I'm sure will be very helpful: https://saveupfront.co/

Do you need to launch a new product and need a website? We can help you build it! You can contact us through our contact form on our website!

Hope you liked the case! Stay tuned for more.

‍