Role
Web DesignerFront-End Developer
Duration
May - August 2023Tools
FigmaCargo
Adobe Illustrator
Adobe Photoshop
Skills
Web DevelopmentBrand Development
User Interface Design
OVERVIEW
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.
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:
- Create a modern, clean aesthetic that aligns with the brand’s values and appeals to the target audience.
- Simplify navigation and information architecture to make it easy for users to find key content and complete tasks quickly.
- Establish a scalabile online presence.
- 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
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: