Aqua Finance

Revamping the dealer portal skins which serves as a clients' comprehensive resource for product information, managing their orders, and tracking tickets and claims.

Role

Visual Design Intern

Project Duration

4 months (May 2022 to August 2022)

Team Members

Me, 1 Creative Director, 2 Project Managers, 4 Developers

Tools Used

Adobe XD, Adobe Illustrator, Miro, Microsoft Teams

A comprehensive digital redesign and optimization of Aqua Finance’s digital presence.

Skip to Solution

Briefing

Aqua Finance's Digital Presence Needs an Overhaul

In the summer of 2022, during my internship at Ext. Marketing, I had the incredible opportunity to be part of the redesign of Aqua Finance's design system. Aqua Finance is a consumer finance company that assists contractors and dealers in securing financing programs that their customers can access to fund their projects.

Problem

Aqua Finance has recognized the pressing need to revamp their digital presence. The existing challenges encompass inconsistency, complex navigation, inadequate mobile optimization, and a partially outdated visual design. This multifaceted problem adversely impacts user satisfaction, hinders efficient access to information, and threatens the company's credibility in the digital landscape.

Goal

To transform Aqua Finance's digital presence into a harmonious, user-centric, and visually appealing ecosystem that instills trust and provides a seamless experience across all platforms. We aim to address the issues of inconsistency, navigation complexity, mobile optimization, and outdated design, ultimately enhancing user satisfaction and reaffirming Aqua Finance as a reliable financial partner.

Solution

A mobile app that streamlines wardrobe management, by simplifying cataloging and outfit creation while offering trend insights and style sharing. Users also benefit from comprehensive care guides, wardrobe reminders, and up-cycling ideas, reducing waste and promoting sustainability.

discovering

The Challenges were Manifold

Aqua Finance approached Ext. Marketing with a clear vision: to enhance their digital presence and provide a seamless, consistent, and user-friendly experience across all their platforms.

Inconsistency

Aqua Finance's digital offerings span the web, mobile apps, and customer portals, each with a different look and feel. Users were frequently confused by the inconsistent design.

Complex Navigation

Users found it challenging to navigate the website and app, particularly when searching for specific information.

Lack of Mobile Optimization

The mobile experience was less than optimal, with slow load times and a user interface that left much to be desired.

Partially Outdated

Users found the visual aspects of the products outdated, including the colour scheme, typography, and visual elements. This lack of visual appeal can create a negative first impression for users, potentially eroding trust.

Understanding the Users through Interviews

To tackle these challenges effectively, I first needed to understand Aqua Finance's users. Through user interviews with customers and partners, I discovered that they were looking for…

Simplified Loan Application: Users wanted an intuitive and streamlined loan application process.

Responsive Mobile Experience: With the increasing use of mobile devices, a responsive design that performed well on smartphones and tablets was a top priority.

Easy Access to Account Information: Quick access to account information, including transaction history and account statements, was paramount.

It can be easy for new employees to forget about their benefits when they are learning and adapting to their roles.

How might we modernize Aqua's visual identity and improve its website experience?

defining

UX Auditing

I conducted a site audit, making note of the reusable components we used on our site and grouping them into categories (i.e, we listed out all instances of particular components (Buttons, drop-downs, input fields…) on the different pages and flows. There were dozens of button styles, incorrectly applied font weights, and single-use icons everywhere. I also found areas where our site didn’t pass accessibility standards. Besides, we interviewed a couple of front-end developers and designers to understand their main goals and pain points.

Inconsistency

As you can see, the product had many inconsistencies, be it in colours, components, or guidelines…, which can have detrimental effects on the overall experience & the brand image.

Redundancy

For designers, not having a library of components means you’ll have to do repetitive design work to create your product screens. This also applies to the implementation, since developers would have to spend more time and effort to create new components.

Rigidness

In-existence of a buttons’ hierarchy, nor a clear structure for the different states of the components used across platforms.

designing

Our journey to a redesigned design system involved several key steps...

01 Visual Identity

We began by refreshing Aqua Finance's visual identity. We selected a new colour palette, using shades of blue and green, and orange to convey trust and a connection to water. Not only that, but we also revamped the typography, choosing a modern, legible font for improved readability.

02 Component Library

The heart of the redesign was the creation of a comprehensive component library. This involved redesigning the navigation, optimizing form layouts, and ensuring every component was responsive. I aimed to make every interaction with Aqua Finance feel smooth, intuitive, and visually cohesive.

03 Testing and Iterations

Usability testing played a crucial role in refining our design. We enlisted a diverse group of users to provide feedback on the redesigned components and navigation. Based on their insights, we iterated tirelessly to resolve issues and enhance accessibility.

88.9%

Avg Success

3.7%

Avg Bounce

2m 34s

Avg Duration

34%

Mis-click Rate

04 Implementation and Adoption

Collaboration with the development team was key. I provided design assets, documentation, and ongoing support to ensure a seamless integration of the design system. Regular meetings and feedback loops were established to address any technical challenges.

delivering

Reflect

Anticipating Needs

This entire project was done remotely, without ever having met the team in person. Through this project, I understood the value of documenting my designs down to the finest details. Working with front-end developers is something I’m used to, however, this was my first time working directly with back-end developers. Once I began understanding the kinds of clarifications the team would ask for, I began anticipating their comments and was able to prepare clear documentation for them to follow.

Going Above and Beyond

Our team was very close to losing this project when I was brought onto this team. My role as the Visual Design Intern was to bring from a fresh perspective and rebuild our relationship with the client. Excited about the potential of what this platform was capable of, I came in with ideas and recommendations that elevated the experience: not just through design, but also development. I rebuilt the Project Timeline and ensured weekly check-ins with the client. I came up with interactions that pushed our front-end developers and got them excited too. This helped the client feel taken care of and made them trust our team once again.

Your Voice Matters

The client was eager to hear our perspectives on every idea we shared with them. As an Intern, I don’t usually volunteer my opinion until I am asked to share, especially when the client usually takes the final call. However, through this project, the client, and our team were able to have very constructive conversations where we laid out our reasons for specific design choices and built mutual respect.

PREVIOUS PROJECT

NEXT PROJECT