When we set out to create a new website or web application for our clients—or even for ourselves—the project involves far more than just aesthetics. In this video, I, Aaron Campos, CEO of Dhamira, along with our Design Director, Jenny VanSeters, offer you an inside look at our end-to-end approach, covering our process, tools, and strategy.
Using Dhamira's re-branded website as a case study, we walk you through our complete process. From client collaboration to technology integration and efficient content management, this video shows how we bring web projects to life.
Step 1: Client-Focused Discovery and Goal Setting
Every Dhamira project begins with an in-depth discovery phase to understand our clients’ business goals and objectives. Our priority is to uncover what’s most important to our client’s brand, values, and business objectives. We start by providing a brand questionnaire to help clients think deeply about their core audience, site goals, and main objectives—whether that’s boosting brand awareness, increasing product usage, or showcasing services.
Step 2: Design Direction with Mood Boards
Once we understand the client’s brand goals, we create mood boards to define the creative direction. These visual guides offer multiple options that reflect different aspects of the brand’s personality. This step helps refine the brand strategy often combining elements from different mood boards to capture an authentic brand identity.
Step 3: Structuring the Site with Wireframes
The next step is wireframing—a low-fidelity layout of the website that maps out sections and features is essential to organizing content and guiding the visual hierarchy of the site. We use placeholders for main areas like services, industries, and calls to action, etc, focusing on the necessary elements without distractions. This allows our clients to see the structure before actual content and visuals are added.
Step 4: High-Fidelity Design and Prototyping in Figma
With the wireframes approved, we shift to high-fidelity designs in Figma, a design prototyping tool that lets us create interactive previews. This transition from wireframe to polished design shows how the final site will look, including the behavior of interactive elements.
Step 5: Building with Astro, Storyblok, and Netlify
Once the design is finalized, our development team brings the site to life using Astro, Storyblok, and Netlify.
Astro: This front-end framework enables high-performance web experiences. Astro lets us mix and match JavaScript frameworks like React, Vue, or SolidJS, but it also supports projects without JavaScript, giving flexibility and efficiency. We leverage Astro’s component-based approach to maintain consistent design and speed up development.
Storyblok: Storyblok, a headless CMS, allows clients to make content updates easily without altering the design. Through Storyblok’s visual editor, clients can see content changes in real time and make updates while staying within the established design system.
Netlify: As our hosting platform, Netlify streamlines deployment and optimizes site performance with static builds, improving load speeds and security for a seamless user experience. Netlify also runs automated performance and accessibility checks to ensure every update meets our high standards.
Step 6: Real-Time Editing and Accessibility Checks
A unique advantage of our setup is that clients can edit their content directly in Storyblok and see the changes in real-time. The integration with Netlify adds an extra layer of quality control: each change is tested for accessibility and performance before going live. If a content change doesn’t meet accessibility standards, like insufficient contrast or missing alt tags, Netlify prevents it from publishing, allowing clients to correct issues before the site updates.
“A unique advantage of our setup is that clients can edit their content directly in Storyblok and see the changes in real-time.”
Final Touches: Optimized for Speed and Accessibility
At Dhamira, we’re committed to delivering optimized sites that score high on Google Lighthouse performance metrics. Each build is tested with automated tools to ensure top scores for speed, accessibility, and usability. This ensures peace of mind for clients in regulated industries or those needing high levels of accessibility, as our tools maintain these standards across all updates.
Conclusion: A Collaborative Approach to Web Design and Development
We are excited to bring this approach to our clients. With experience across industries and at various levels of digital maturity, we tailor each project to fit specific needs, whether for a marketing site or a complex web application. By focusing on collaboration, performance, and content management, we create digital experiences that not only reflect our clients' brands but also enhance functionality and accessibility.
Whether you’re looking to revitalize your brand or launch a full-scale application, our process reflects our commitment to delivering high-quality, client-centered web solutions that prioritize both creativity and technology.
