Financial Clarity


a financial coaching website

View Live Site 









Role

Web Designer
Front-End Developer

Duration

May - August 2023

Tools

Figma
Cargo
Adobe Illustrator
Adobe Photoshop

Skills

Web Development 
Brand Development 
User Interface Design






OVERVIEW

An independent financial coach’s launching pad




Financial Clarity is a financial coaching website. I designed this website for a client, where I followed Goal-Directed Design (GDD) methods I learned throughout my time at university. The website was built from scratch while working alongside the client as she started her financial coaching business from the ground up.



/01

Project Objectives




The primary goals of this web design project were to:

  1. Create a modern, clean aesthetic that aligns with the brand’s values and appeals to the target audience.
  2. Simplify navigation and information architecture to make it easy for users to find key content and complete tasks quickly.
  3. Establish a scalabile online presence.
  4. Insure mobile usability, ensuring that the site functions seamlessly across different devices and screen sizes.



/02

Discovery & Brainstorming




1. Stakeholder Interviews

I began the project by conducting interviews with the client to understand business objectives, user needs, and pain points. This was essential to align the design vision with the business goals.

2. Competitive Analysis

I then conducted a competitive analysis to evaluate the strengths and weaknesses of competitors to gain insight into the financial coaching market, identify opportunities, and make informed decisions.




/03

Design Process




1. Sketching in Illustrator

To have a collection of base content before starting the website, I designed logos and other brand graphics in Illustrator.

2. Wireframes & Low-Fidelity Designs

I began by sketching low-fidelity wireframes to outline the basic layout of core pages, including the homepage, service pages, and contact form. The focus was on creating a clean, organized layout with easy access to essential information.

3. High-Fidelity Prototypes

Once the wireframes were approved, I moved on to creating high-fidelity mockups in Figma, refining the visual design with brand colors, typography, and imagery. Some of the key design features included:

  • Hero Section: A bold hero section on the homepage with a clear, action-driven call to action (CTA) and an engaging, colorful visual.
  • Colorful Layout: After recieving feedback from my client on a bolder choice of a color palette, I sectioned pages into color groups.
  • Prominent CTAs: Clear, accessible CTAs placed throughout the site to guide users toward important actions.



/04

Development & Implementation




After finalizing the design, I started developing the web builder Cargo. I used coding languages I learned in my front-end development classes at university to ensure the design was implemented effectively. I aslo worked in Cargo’s environment, including some fo their built in widgets within the design. I prioritized tasks and ensured the design was fully responsive and aligned with brand standards.




/05

Reflection & Key Takeaways




This project was a great opportunity (and my first) to apply my skills in both design and user research, and the results reinforced the importance of communication and patience in a user-centered approach. Key takeaways from this project include:

  • Collaboration is key to successful design—working closely with stakeholders ensured that the final product met both user needs and business goals.

  • Continuous Testing: Even after the initial design, testing allowed us to fine-tune designs and user flows, ultimately improving the overall experience.

  • Mobile Optimization: With mobile traffic continuing to rise, prioritizing mobile-first design is crucial to smaller, independent clients.




       © 2024 Dylan Bagwell