UX/UI Design & Web Development
NorthBooks - Website Design & Webflow Development
Full end-to-end project: brand identity, design system, UX and UI design in Figma, and Webflow implementation.
Year :
2026
Industry :
Accounting / Financial Services
Client :
Personal Portfolio Project
Project Duration :
1 week
Problem :
NorthBooks is a fictional accounting firm created as a portfolio project to demonstrate a full end-to-end web design and development process. The challenge was to build a professional, concise, and conversion-focused website for Canadian SMBs from scratch, including brand identity, design system, UX/UI and interaction design in Figma, and full implementation in Webflow, utilizing the most up-to-date tools and workflows in the industry.
Solution :
UX and competitive research, design and development from scratch. Defined the brand identity, built a design system in Figma with primitive and semantic variable collections and reusable components, designed three responsive breakpoints (desktop, tablet, mobile), and implemented the full site in Webflow with custom JavaScript for additional interactive elements.
AI tools such as Claude Code, Figma Make, and ImageFX were also used to support research, brainstorming, image generation, and to speed up specific phases of the process.
Challenge :
The main constraint was maintaining design system integrity across both tools. Decisions made in Figma had to translate cleanly into Webflow without losing the visual logic, including semantic colour tokens, grid spacing, and component behaviour. The use of variables was especially relevant here, as they can be translated seamlessly from Figma to Webflow via a dedicated plugin, allowing the exact same tokens to be used in the development phase and ensuring full consistency throughout.
Summary :
A full-stack design project covering every phase from brand definition to live deployment, demonstrating the ability to own a product end to end, make independent design decisions, and implement them with clean, maintainable code using some of the best tools available in the industry and proven workflows.
More Projects
UX/UI Design & Web Development
NorthBooks - Website Design & Webflow Development
Full end-to-end project: brand identity, design system, UX and UI design in Figma, and Webflow implementation.
Year :
2026
Industry :
Accounting / Financial Services
Client :
Personal Portfolio Project
Project Duration :
1 week
Problem :
NorthBooks is a fictional accounting firm created as a portfolio project to demonstrate a full end-to-end web design and development process. The challenge was to build a professional, concise, and conversion-focused website for Canadian SMBs from scratch, including brand identity, design system, UX/UI and interaction design in Figma, and full implementation in Webflow, utilizing the most up-to-date tools and workflows in the industry.
Solution :
UX and competitive research, design and development from scratch. Defined the brand identity, built a design system in Figma with primitive and semantic variable collections and reusable components, designed three responsive breakpoints (desktop, tablet, mobile), and implemented the full site in Webflow with custom JavaScript for additional interactive elements.
AI tools such as Claude Code, Figma Make, and ImageFX were also used to support research, brainstorming, image generation, and to speed up specific phases of the process.
Challenge :
The main constraint was maintaining design system integrity across both tools. Decisions made in Figma had to translate cleanly into Webflow without losing the visual logic, including semantic colour tokens, grid spacing, and component behaviour. The use of variables was especially relevant here, as they can be translated seamlessly from Figma to Webflow via a dedicated plugin, allowing the exact same tokens to be used in the development phase and ensuring full consistency throughout.
Summary :
A full-stack design project covering every phase from brand definition to live deployment, demonstrating the ability to own a product end to end, make independent design decisions, and implement them with clean, maintainable code using some of the best tools available in the industry and proven workflows.
More Projects
UX/UI Design & Web Development
NorthBooks - Website Design & Webflow Development
Full end-to-end project: brand identity, design system, UX and UI design in Figma, and Webflow implementation.
Year :
2026
Industry :
Accounting / Financial Services
Client :
Personal Portfolio Project
Project Duration :
1 week
Problem :
NorthBooks is a fictional accounting firm created as a portfolio project to demonstrate a full end-to-end web design and development process. The challenge was to build a professional, concise, and conversion-focused website for Canadian SMBs from scratch, including brand identity, design system, UX/UI and interaction design in Figma, and full implementation in Webflow, utilizing the most up-to-date tools and workflows in the industry.
Solution :
UX and competitive research, design and development from scratch. Defined the brand identity, built a design system in Figma with primitive and semantic variable collections and reusable components, designed three responsive breakpoints (desktop, tablet, mobile), and implemented the full site in Webflow with custom JavaScript for additional interactive elements.
AI tools such as Claude Code, Figma Make, and ImageFX were also used to support research, brainstorming, image generation, and to speed up specific phases of the process.
Challenge :
The main constraint was maintaining design system integrity across both tools. Decisions made in Figma had to translate cleanly into Webflow without losing the visual logic, including semantic colour tokens, grid spacing, and component behaviour. The use of variables was especially relevant here, as they can be translated seamlessly from Figma to Webflow via a dedicated plugin, allowing the exact same tokens to be used in the development phase and ensuring full consistency throughout.
Summary :
A full-stack design project covering every phase from brand definition to live deployment, demonstrating the ability to own a product end to end, make independent design decisions, and implement them with clean, maintainable code using some of the best tools available in the industry and proven workflows.