Website Design
Done for Digital Mascot
Role
Product Designer
Project
Website Design
Timeline
2weeks
Stack
Figma, Photoshop
Illustrator
Building a growth engine from zero
This project started with a blank canvas. Digital Mascot was launching as a brand-new startup agency, and they needed a digital flagship that didn't just exist online, but actively closed deals. They had a powerful business model—combining marketing, custom development, and AI automation—but they had no existing visual footprint, no brand assets, and zero web presence.
As a freelance designer, I worked close with the CEO, to build their digital identity from scratch. He focused on search intent, while I took full ownership of the user experience, layout strategy, and visual direction. The goal was to take a complex multi-service ecosystem and frame it as a premium, highly structured growth partner for modern businesses.
The challenges of launching fresh
Designing for a brand-new startup comes with a completely unique set of challenges compared to a traditional redesign. We were battling three major hurdles from day one:
- The Trust Deficit: When you are a brand-new agency, you don't have years of internet history to rely on. The homepage layout had to instantly radiate authority, professionalism, and high-end tech capabilities so potential clients wouldn't hesitate to reach out.
- The Definition Problem: Because Digital Mascot offers everything from deep development labs to creative brand suites, listing services in a standard, boring bulleted format would make the site look scattered and cheap. We needed a clean way to organize massive operational capabilities.
- Zero Visual Baseline: There were no brand guidelines, no style guides, and no design systems in place. I had to establish the typography scales, color psychology, and interactive components from the ground up while ensuring the entire layout was optimized for conversions.
Brand Visuals
Simplifying the ecosystem and building trust
To simplify a complex agency model, I organized the offering into four clear growth pillars: Mascot.Growth, Mascot.Creative, Mascot.Lab, and Mascot.Scale. This structure helps different types of clients quickly identify the services relevant to their goals, while a vertical timeline, “A Structured Approach to Scalable Growth,” guides them through the journey from discovery to long-term automation.
To reflect the agency’s premium, tech-driven positioning, I used a dark-mode interface with high-contrast yellow accents to create a clear visual hierarchy. The hero features a prominent laptop mockup showcasing a dynamic interface, establishing technical credibility immediately. I also designed an interactive two-column FAQ matrix, allowing users to expand answers about support and frameworks without leaving the page or disrupting their browsing flow.
As a new launch, establishing credibility through social proof was essential. I created a premium testimonial section featuring real photography and client reviews, including Esther Howard, CEO of PT Sejahtera. Below it, I introduced clear, high-intent CTAs—“Book a Strategy Call” and “Explore Our Ecosystem.” This combination of structured services, interactive content, social proof, and focused CTAs creates a seamless journey from understanding the agency to taking action.
The final design
The payoff
The project taught me to balance brand expression with usability—creating something that feels distinctive and premium while still making it effortless for users to understand, explore, and act. It reinforced my belief that strong digital design isn't just about how a product looks, but how confidently it guides people through what comes next.