Bridging Design and Development to Rebuild Adeptia’s Web Experience

Background

Adeptia is a B2B SaaS product for data integration. When I joined, its WordPress site was slow to update, difficult to maintain, and lagging behind modern standards. Content updates required complex ACF fields, staging/production workflows slowed down teams, and load times negatively impacted Core Web Vitals and SEO. On top of that, a rebrand driven by new leadership provided the opportunity — and urgency — to completely overhaul the digital experience.

Adeptia website before rebranding and replatforming

The Problem

Branding

Adeptia's branding was lagging behind the rest of the industry; a dated color palette and disjointed web experience didn't align with the vision of the company we had internally.

Technical

Process Slow staging/production content update process
Slow load times hurting CWV and SEO
Complex ACF Fields made it difficult to update components
Low compatibility with modern website libraries for adding motion/animation

Main Goals

Modernize Adeptia’s brand and web experience
Build cohesion across the company’s digital presence
Create a maintainable framework and process for the future

My Role

My role combined three dimensions: brand identity, web development, and project management — essentially operating as both designer and developer while managing the broader brand rollout.

Brand Identity	Web Developer	Project Management
Performed competitive analysis to create new brand look	Researched and chose new tech stack	Managed graphic artist to create new website graphics
Created or redesigned web componentry to align with new brand identity	Redesigned backend content architecture to improve maintainability	Managed product marketing team to develop new content for top-level web pages according to new messaging
	Built new frontend	Managed rollout of new brand assets to all employees

The Process

My planning process involved breaking down an ambiguous statement ("the website and branding are not modern") into vectors of action and corresponding actionable steps:

Competitive Analysis

I broke down the ambiguous ask ("make it modern") into specific gaps:

Text-heavy, crowded layouts
Dated visuals and color palette
Lack of cohesion across assets and branding
Low interactivity and responsiveness (few animations/microinteractions)

Competitive analysis diagram showing gaps identified in current website

Adeptia's website (far left), compared to others best-in-class examples

Design Approach

After identifying gaps, I translated those into tangible design improvements. As both the designer and developer, I focused on alignment and efficiency rather than creating a full design system.

Built mockups of key screens and components to communicate my vision
Skipped detailed specs, since I was also implementing, to cut out unnecessary cycles

Adeptia style mockup showing design artifacts

Design artifact created as part of the rebrand process

Tech Decisions

Rebuilding from the ground up gave me the opportunity to choose a modern, maintainable tech stack. I explored several options, weighing performance, cost, maintainability, and ease of use for non-technical teammates.

Chose Sanity CMS for flexible content modeling and smooth data migration
Selected Next.js for speed, modern library support, and straightforward deployment on Vercel
Structured content for long-term maintainability
Leveraged React + Tailwind CSS + TypeScript to accelerate frontend development with consistency and scalability

Tools

I used Figma and Jitter for design and motion mockups, Next.js + Vercel for the frontend, and Sanity CMS for backend schema modeling and migration. Collaboration tools included Asana for task management and Canva for quick content assets.

Outcome and Impact

The final website, delivered in three months, modernized the brand identity, streamlined the development process, and updated content across key pages. Key improvements included

SEO grade improvement from B- to A
Passed Core Web Vitals across all platforms
Reduction in bounce rate
Development time for new components cut from weeks to days

Current Adeptia website, viewable at www.adeptia.com

Reflection and Takeaways

This project stretched both sides of my hybrid identity — learning a new technical stack while also crafting a cohesive design vision. It deepened my ability to organize information, communicate vision across teams, and thrive in ambiguity. A few takeaways that stuck with me:

Ambiguity combined with trust is an opportunity for creativity, learning, and growth.
Trust compounds; vision + execution = opportunity
Opportunity comes with weight and responsibility to not let people down