DebtX

As part of my work at Cantina Consulting, I was responsible for the visual design of a website for one of our clients, DebtX Software Solutions.

I worked with my colleagues and our client to develop a visual identity based on previous research conducted by our experience design team.

Context

DebtX is a financial services institution.

They asked us to create a new website to showcase the software tools and services that they offer their clients.

Tools used: Figma, Illustrator, Photoshop

Timeframe: 2 weeks

Design Process

Week 1

Ideation & Feedback

  • Research analysis

  • Style tiles

  • Low fidelity wireframes

  • Client feedback

  • Updated style tiles

Week 2

Design

  • High fidelity wireframes

  • Internal review & feedback

  • Developer handoff

Research & Previous Work

Other members of the experience design team at Cantina ran a workshop with the stakeholders at DebtX to determine their priorities and direction for this website design.

The results of that workshop were shared with me, and gave me a foundation to work upon.

Cantina has also done previous design work for DebtX’s software platform, which included a design system I could build from.

Low Fidelity Wireframes

One of my first steps was to create low-fidelity wireframes based on the content and sitemap we’d been given already.

At the same time, I began work on options for visual directions to present to our client.

Style Tiles

I prepared two sets of style tiles to show our client.

In one of our initial design meetings, I presented both design directions as options and discussed the advantages of each with the client.


Client Feedback

After our first design meeting with the stakeholder, they expressed that they liked different aspects of each design direction I presented.

The color scheme of the first option resonated well with their company philosophy, and the modern, illustrative style of the second option was also well-received.

Updated Style Tiles

I took our client’s feedback on the visual design direction and created a final set of style tiles to show them before we dove into the full website design.

Their logo was also something to consider here, since it’s text-focused and in a serif font. I adjusted the visual design direction to complement that preexisting logo.

Design System

Once a design direction was finalized, I began to build a complete design system.

I laid everything out in a Figma file to keep all the components organized and easy to use when it came time to build each page of the site.

This also made my work easy to understand for anyone else on my team who might be reviewing what I did, and for our developers to use later on without trouble or confusion.

I was able to find a set of line drawn illustrations from Adobe Stock to use on the site. Luckily, they were vector illustrations, which came in handy later when I needed to make a few alterations to them in Illustrator.

I also found a set of smaller icon illustrations to use in appropriate places throughout the website.

Internal Review & Feedback

As I built out each page of the website, I conferred with and recieved feedback from other designers on my team at Cantina. They offered critiques and suggestions to improve my designs.

Final Design

After my final designs were approved, I passed everything off to our development team. We had a couple meetings to go over my design and to ensure a smooth transition between design and development.

The website we created for DebtX Software Solutions can be found here.