About project Overview Design process Branding Conclusion

Sparrow Student Loan Platform.

23 Aug 2023

Sparrow is a web application that connects driven students with impact investors saving them time and money.

Go to website

Sparrow

Client

Tech Stack

Services

#Product Strategy

#Product Design

#UI/UX

#Branding Extension

#Product Development

#Frontend Development

#Backend Development

#API Connection

#Analytics Integration

#Ongoing Production Support & Product Evolution

About project

Sparrow Portal

Sparrow Labs, Inc. is a fintech company that connects students with loan providers worldwide. Their platform can be used by students according to the B2P lending business model. In addition, they provide their solution as an API for businesses that need to integrate student loan search and qualification functionality.

Challenge & Goals

Providing student loans is a seasonal service so the main goal was to launch the platform before the peak demand. We had to finalize both the informational website and borrower platform under the pressure of tight deadlines and adjusting to changing customer requirements on the go.

Solutions & Result

Our design and development team created an information website to represent Sparrow’s value proposition. We also developed an interactive and animated borrower portal in the form of a responsive web app, where students can apply for loans and get qualified in real-time. The project attracted $7 million in investment and is now used by 8000 students globally.

Camden Ford

COO, Sparrow Labs Inc

Tino Digital Agency always delivers high-quality design work, demonstrating thoughtfulness and thoroughness. The team works closely with the client, showing a strong work ethic and working hard to deliver as expected. Moreover, they're responsive and communicative and have vast UI/UX expertise.

All reviews

Investment raised

Financial institution partnerships

Users per day

project Overview

Sparrow Portal

We have created a robust, SEO-optimized, and animated website that stays on top of Sparrow’s sales funnel, providing students with information about the company’s service offer and its innovative opportunities. We made the highest bet on clear information architecture, well-communicated value proposition, and conversion-driving elements.

User’s dashboard

Our design team has developed robust, well-visualized, and intuitive dashboards for borrowers to help them stay updated with all the relevant information in a single place. As a core solution, we leveraged Chart.js - a powerful tool for data visualization.

Application forms

As one of the core features, our team crafted intuitive and effective loan application forms, tailored specifically to the needs of students seeking financing options and ensuring that they can navigate the application process with ease.

Pre-approved offers list

We created an interactive student loan pre-qualification roadmap to help students seamlessly reach their goal without feeling the burden of a complex loan application process. Instead, the system guides them step-by-step, providing relevant information on each of the financing stages.

Development

Methodology

The project was created according to the Waterfall development methodology. We created each part piece by piece, testing each of them iteratively and staying in close touch with the customer since the requirements were frequently changing as well.

Design process

Research

The lion’s share of project development time was spent on studying the large volumes of documentation with customer’s ideas. We also devoted a lot of time to project timing planning. This process was carefully documented with the customer since we had to work under the pressure of deadlines.

Design process

Sitemap

The main challenge was the large number of interconnections between different website flows that our designers and developers had to always keep in mind. We pre-designed hundreds of website pages discussing the smallest details with the customer and the customer’s design lead.

Design process

UI Design

Being guided by the sitemap, we created UI wireframes for every screen using Figma as one of the most advanced technologies for creating complex design solutions, visualizing the design system, effective teamwork, and customer communication.

Design Concept

The design concept we have crafted for Sparrow is a harmonious blend of several key elements aimed at delivering a unique and user-centric experience. At its core, the concept revolves around the seamless integration of animation, trust-inspiring colors, bold typography, generous white space, and complex dashboard visualizations.

Undergraduate, graduate and international student loans

Sparrow offers a range of loan options tailored to the unique needs of undergraduate, graduate, and international students, including different repayment terms and interest rate options, so we created separate features for these categories of borrowers.

Student loan refinance & parent student loan

This feature provides parents with accessible and competitive financing options to support their child's education. We made sure this category of users can seamlessly find the best opportunities via quick search, simple form submission and an intuitive application process.

Animated icons

Both the informational website and borrower portal required the use of a large number of illustrations and animations. To avoid website overload, the majority of visual elements were created with HTML/CSS from scratch and then animated with GSAP. We used Adobe Illustrator for creating icons, and Adobe After Effects for creating animations.

Our design team has meticulously crafted every design element of the Sparrow portal to ensure that every user can enjoy a seamless and effective experience, complemented by unmatched design aesthetics.

adaptive

Mobile version

The customer initially wanted to create a borrower portal in the form of a mobile app but under the pressure of deadlines, decided to opt for a responsive web solution. We leveraged React.js as a core solution for responsive web app development; Lottie for creating complex animations and AWS as the main hosting with unlimited scalability potential.

Branding

Typography

For project typography, we chose Basic Circle as a font with a clean, modern, and sophisticated look. The simplicity and legibility of this font make it easy to read, reducing the chance of any confusion or misunderstandings.

Basier Circle

RegularMediumSemiboldBold

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

010203040506070809

Branding

Colors

Together with the customer, we decided to use green and white colors in our design solution. These colors are one of the best choices for fintech app design since green symbolizes growth, stability, and financial well-being. White, in turn, enhances the perception of transparency and reliability, and together these colors perfectly align with the project values.

#6DB353

Sparrow Green

#151B26

Dark Night

#EDF2F6

Neutral Grey

#4EAC6A

Green

#8CCE56

Grassy Green

#185155

Emerald Green

Consistancy

Design system

Together with the customer, our design and development team created a comprehensive design system for the Sparrow student loan project. This design system not only ensured a cohesive and engaging user experience for the Sparrow student loan platform but also paved the way for reusability across other projects within the customer's portfolio related to student loans.

Conclusion

Sparrow attracted $7 million of investment with the solution created with our support. Now, it is used by 8,000 borrowers globally and the company expands its reach every day. Our collaboration with Sparrow Labs goes on as well.