TYPE:
TYPE:
WEBSITE DESIGN
WEBSITE DESIGN
CLIENT:
CLIENT:
SCALER
SCALER
YEAR:
YEAR:
2025
2025
INDUSTRY:
INDUSTRY:
REAL ESTATE
REAL ESTATE
Website Scaler
Website Scaler
Website Scaler
TYPE:
WEBSITE DESIGN
CLIENT:
SCALER
YEAR:
2025
INDUSTRY:
REAL ESTATE
Problem
Problem
Problem
With the new visual identity in place, Scaler needed a website that would bring the branding to life digitally. The site had to carry the full color palette confidently, present a complex data product in a clear and accessible way, and serve as an MVP that could easily expand as the business grows.
Project Goal: Bring the new Scaler brand to life digitally with a clear, bold, and scalable website that presents a complex data product with confidence and clarity.
With the new visual identity in place, Scaler needed a website that would bring the branding to life digitally. The site had to carry the full color palette confidently, present a complex data product in a clear and accessible way, and serve as an MVP that could easily expand as the business grows.
Project Goal: Bring the new Scaler brand to life digitally with a clear, bold, and scalable website that presents a complex data product with confidence and clarity.
With the new visual identity in place, Scaler needed a website that would bring the branding to life digitally. The site had to carry the full color palette confidently, present a complex data product in a clear and accessible way, and serve as an MVP that could easily expand as the business grows.
Project Goal: Bring the new Scaler brand to life digitally with a clear, bold, and scalable website that presents a complex data product with confidence and clarity.
Approach
Approach
Approach
Collaboration: Worked in collaboration with a design agency on the homepage and blog article pages, where my role focused on art direction: defining the creative concepts, setting the visual direction, and ensuring the final designs stayed true to the brand identity. Creative ideas came from both sides and the agency executed designs in Figma based on my direction. All remaining pages (about, solutions, blog overview, three resource pages, and the later partnerships and AI pages) were fully designed by me.
Page Structure: Defined the page structure, recommended sections for each page, and contributed significantly to the copywriting.
Page Structure: Defined the page structure, recommended sections for each page, and contributed significantly to the copywriting.
Page Structure: Defined the page structure, recommended sections for each page, and contributed significantly to the copywriting.
Moodboard: Brainstormed and explored how the existing brand identity, including its colors, modular shapes, and Bauhaus-brutalist aesthetic, could translate into a fresh and distinctive digital context.
Moodboard: Brainstormed and explored how the existing brand identity, including its colors, modular shapes, and Bauhaus-brutalist aesthetic, could translate into a fresh and distinctive digital context.
Moodboard: Brainstormed and explored how the existing brand identity, including its colors, modular shapes, and Bauhaus-brutalist aesthetic, could translate into a fresh and distinctive digital context.
Color Positioning: As identified during the brand exploration, competitors default to safe blues and greens. We explored how to carry Scaler's full color palette confidently, finding an approach that felt intentional and ownable without becoming chaotic.
Color Positioning: As identified during the brand exploration, competitors default to safe blues and greens. We explored how to carry Scaler's full color palette confidently, finding an approach that felt intentional and ownable without becoming chaotic.
Color Positioning: As identified during the brand exploration, competitors default to safe blues and greens. We explored how to carry Scaler's full color palette confidently, finding an approach that felt intentional and ownable without becoming chaotic.
Scalability: Because the first website would be an MVP, pages needed to be easily expandable using existing designs. This led to designing modular blocks that could be used across pages.
Scalability: Because the first website would be an MVP, pages needed to be easily expandable using existing designs. This led to designing modular blocks that could be used across pages.
Scalability: Because the first website would be an MVP, pages needed to be easily expandable using existing designs. This led to designing modular blocks that could be used across pages.
ONE OF MY MOODBOARDS
ONE OF MY MOODBOARDS
ONE OF MY MOODBOARDS
BRAND GUIDE AT THE START OF THE WEBSITE PROJECT
BRAND GUIDE AT THE START OF THE WEBSITE PROJECT
BRAND GUIDE AT THE START OF THE WEBSITE PROJECT
PAGE STRUCTURE
PAGE STRUCTURE
PAGE STRUCTURE
Challenges & Tradeoffs
Challenges & Tradeoffs
Challenges & Tradeoffs
The main challenge was keeping the website as colorful as the branding without it becoming overwhelming. The design needed to feel professional and sleek, not too playful, while still using the shapes and elements in a lively way.
The main challenge was keeping the website as colorful as the branding without it becoming overwhelming. The design needed to feel professional and sleek, not too playful, while still using the shapes and elements in a lively way.
The main challenge was keeping the website as colorful as the branding without it becoming overwhelming. The design needed to feel professional and sleek, not too playful, while still using the shapes and elements in a lively way.
Each page needed its own standout hero section to create a strong first impression while keeping the overall design consistent.
Each page needed its own standout hero section to create a strong first impression while keeping the overall design consistent.
Each page needed its own standout hero section to create a strong first impression while keeping the overall design consistent.
Results
Results
Results
Web Identity: Designed the Scaler website in collaboration, bringing the new identity to life digitally.
Web Identity: Designed the Scaler website in collaboration, bringing the new identity to life digitally.
Web Identity: Designed the Scaler website in collaboration, bringing the new identity to life digitally.
Shapes: Brought the modular shapes to life by using them as containers for text and content, giving the shape system a functional purpose beyond decoration.
Shapes: Brought the modular shapes to life by using them as containers for text and content, giving the shape system a functional purpose beyond decoration.
Shapes: Brought the modular shapes to life by using them as containers for text and content, giving the shape system a functional purpose beyond decoration.
Content-First Design: Created a website that stands out through its use of color while preserving a simple and uncluttered design. The visual identity is bold and present, but always in service of the content, not the other way around.
Content-First Design: Created a website that stands out through its use of color while preserving a simple and uncluttered design. The visual identity is bold and present, but always in service of the content, not the other way around.
Content-First Design: Created a website that stands out through its use of color while preserving a simple and uncluttered design. The visual identity is bold and present, but always in service of the content, not the other way around.
Modular Blocks: Applied the modular shape system, color rules, and typography across the site. Most blocks are reusable and can be configured with different primary colors and varying amounts of shapes, so each block fits the content it serves.
Modular Blocks: Applied the modular shape system, color rules, and typography across the site. Most blocks are reusable and can be configured with different primary colors and varying amounts of shapes, so each block fits the content it serves.
Modular Blocks: Applied the modular shape system, color rules, and typography across the site. Most blocks are reusable and can be configured with different primary colors and varying amounts of shapes, so each block fits the content it serves.
Launch: Launched a website spanning around eight pages at development handoff (homepage, about, solutions, three resource pages, blog overview, and a blog template) with partnerships and AI pages added in a later phase. The site gave Scaler a digital home that matched the ambition of their new brand and gave customers clear information on the company and product.
Launch: Launched a website spanning around eight pages at development handoff (homepage, about, solutions, three resource pages, blog overview, and a blog template) with partnerships and AI pages added in a later phase. The site gave Scaler a digital home that matched the ambition of their new brand and gave customers clear information on the company and product.
Launch: Launched a website spanning around eight pages at development handoff (homepage, about, solutions, three resource pages, blog overview, and a blog template) with partnerships and AI pages added in a later phase. The site gave Scaler a digital home that matched the ambition of their new brand and gave customers clear information on the company and product.
See the live version at: WWW.SCALERGLOBAL.COM
See the live version at: WWW.SCALERGLOBAL.COM
See the live version at: WWW.SCALERGLOBAL.COM
HOMEPAGE
HOMEPAGE
HOMEPAGE
DELIVERED PAGES (EXCL. ARTICLE PAGES)
SOME MODULAR BLOCKS
ACCESSIBLE ON ANY DEVICE
ANIMATIONS ON HOMEPAGE
DELIVERED PAGES (EXCL. ARTICLE PAGES)
DELIVERED PAGES (EXCL. ARTICLE PAGES)
SOME MODULAR BLOCKS
SOME MODULAR BLOCKS
ACCESSIBLE ON ANY DEVICE
ACCESSIBLE ON ANY DEVICE
ANIMATIONS ON HOMEPAGE
ANIMATIONS ON HOMEPAGE
Reflections & Takeaways
Reflections & Takeaways
Reflections & Takeaways
This was the first website I designed in Figma. Despite my technical background giving me a head start in understanding what design elements work better in code, the design-to-development process still taught me a lot. Not everything translates perfectly, and some details inevitably shift between the designed and built version. More iteration between design and development would have led to a smoother result and a live version closer to the designs.
Looking back, I would also define the modular block system more explicitly upfront, specifying what blocks to distinguish and what should be configurable. In future projects, I would establish this documentation early in the process, update it as the design grows, and hand it off to development with clear instructions. This way, the CMS would be better set up for the team to use and build on.
This was the first website I designed in Figma. Despite my technical background giving me a head start in understanding what design elements work better in code, the design-to-development process still taught me a lot. Not everything translates perfectly, and some details inevitably shift between the designed and built version. More iteration between design and development would have led to a smoother result and a live version closer to the designs.
Looking back, I would also define the modular block system more explicitly upfront, specifying what blocks to distinguish and what should be configurable. In future projects, I would establish this documentation early in the process, update it as the design grows, and hand it off to development with clear instructions. This way, the CMS would be better set up for the team to use and build on.
This was the first website I designed in Figma. Despite my technical background giving me a head start in understanding what design elements work better in code, the design-to-development process still taught me a lot. Not everything translates perfectly, and some details inevitably shift between the designed and built version. More iteration between design and development would have led to a smoother result and a live version closer to the designs.
Looking back, I would also define the modular block system more explicitly upfront, specifying what blocks to distinguish and what should be configurable. In future projects, I would establish this documentation early in the process, update it as the design grows, and hand it off to development with clear instructions. This way, the CMS would be better set up for the team to use and build on.
