Responsive web design for financial services software company
My role
Lead visual designer
Skills & technologies
Brand identity, visual design, UX design, responsive web design, design systems
Industry
B2B financial services
Timeframe
2 weeks
Context
DebtX is a financial services institution.
During my time at Cantina Consulting, I worked on a small team to create a new website for DebtX, to showcase the software tools and services that they offer their clients.
Design Process
Ideation & Feedback
Research analysis
Style tiles
Low fidelity wireframes
Client feedback
Updated style tiles
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 mainly text 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 received feedback from other designers on my team at Cantina.
They offered critiques and suggestions to improve my designs.
