Marketing agencies and SMBs today struggle to create digital marketing campaigns that truly resonate with their target audiences. A significant number of AI campaign creation tools currently in the market fail to provide a product that meets the needs of their users, lacking the right optimization features and a flow that takes them from point A to point B in a matter of minutes.
Design a SaaS product that offers a fast, easy-to-use journey for campaign creation, while developing a visual identity that feels fresh, engaging, and emotionally resonant for the target audience.
Deliver a simple and clear UI and engaging brand identity that bridges client goals with user needs—making campaign creation feel both powerful and effortless and increasing product sales.
Instead of approaching the project linearly, I implemented a phase-based, feedback-driven methodology that allowed the team to maintain a collaborative environment of strategic alignment and creative flexibility. With this system we were able to continuously establish expectations, gather useful information, and iterate based on feedback while integrating product, brand, and web design into a cohesive whole.
The process followed four stages
Client Needs & Business Goals
I worked closely with the clients to clarify what they wanted to build, why, and what success looked like for them. Defining needs and goals early on ensured that every design decision — whether visual or functional — had purpose, aligned expectations, and avoided miscommunication. This clarity allowed me to design not just for aesthetics, but what would strategically support the client’s objectives and resonate with their audience. It was about building a shared mental model that would guide every creative and technical decision to follow.
Highlights
This early alignment allowed us to move faster in later stages while staying grounded in shared goals — saving time and reducing scope creep.
User & Market Research
To design with empathy and intention, I needed to understand where current tools were falling short. I combined competitive analysis, trend research, and audience pain point mapping to uncover user frustrations and market gaps.
Target Audiences
Pain Points
Complex journeys
Existing tools felt outdated or too hard to navigate.
Customization limits
Users wanted more control and flexibility.
Poor data insights
Existing platforms lacked performance visibility.
Lack of creativity
The experience felt rigid, generic, and uninspired.
Competitive & Visual Landscape
I uncovered areas of opportunity to strategically distinguish ourselves in the current market during the examination of direct and indirect competitors. I identified several user pain points that intersected with competitors’ shortcomings.
Highlights
- Simplified UI was in demand — but not at the cost of powerful features.
- Competitor onboarding and mobile experiences were weak.
- Clear gap between enterprise tools and those for freelancers or small teams.
Design, UX, and UI Trends
In parallel to understanding the strengths and weaknesses of our competition, I asked thoughtful questions along with examining graphic design and interaction trends to guide our creative direction. I compiled several of these discoveries into moodboards including, flat iconography, illustrative styles, playful motion and interactive states, friendly dashboard interfaces, and clean UI design systems. Presenting these findings to the clients ensured we left no stone unturned where lines of communication were kept open along with an environment of transparency and constructive feedback.
Information Architecture Foundations
The team and I worked closely to define the product’s underlying structure and plan the content strategy. To understand how users could create campaigns and meet other usability goals, we mapped high-level navigation layouts to support seamless user, content, and data input flows.
Highlights
This laid the foundation for future mapping of more complex flows, user campaign creation stages, and specific content requirements for each decision.
Mapping the Ecosystem
Using the mind map method, I connected key subjects related to business goals, feature requirements, user behaviors, and brand personality. This systemized ideation process helped surface common threads and prioritize what mattered most — informing both UX and brand direction.
Early Sketching & Concepting
After building a mental roadmap with keywords, I began sketching logos and product UI by hand - focusing on layout possibilities, interaction flows, and logo ideas. Sketching early on allows me to establish unique and intuitive outcomes before bringing any ambiguous designs into the digital world.
Flows & Task Modeling
The team and I collaborated extensively in creating detailed user and task flows to ensure the hierarchy and structure aligned with user priorities. This clarified what content and features were critical versus optional - reducing unnecessary noise and streamlining future UI work.
When the research was analyzed and the exploration phase completed, I translated our conceptual and emotional insights into concrete visual direction. I created multiple moodboard options, each with clear rationale tied to business goals and audience preferences. We quickly aligned on one direction, giving us a confident foundation to move forward with the product’s UI and brand identity.
Wireframes
I began developing wireframes for the website, product dashboard, and UI screens, focusing on how users would move from one section to the next, what flows made sense, and how interactions might behave. I considered usability and accessibility at both the high level - screen layouts - and the low level - button sizing, type hierarchy, and input fields. Ensuring consistency between typography, spacing, and controls, would enable me to create a better user experience and streamline the transition to design execution.
Highlights
The wireframes were designed to stay flexible and evolve alongside the brand’s visual identity. Structure was treated as a dynamic layer - based in logic, but open to creative growth.
Brand Identity Development
Once our design structure was in place, I chose to finalize the visual identity before diving into high-fidelity product mockups which was an intentional strategy to unify every design touchpoint. This sequence allowed me to build a visual language that carried through to the product and web design systems.
Product UI & Web Design
With the brand identity approved, I moved on to designing the website and high-fidelity product mockups. I focused on creating the desired look and feel for users while aligning with the expectations set with clients, addressing market gaps, and delivering the unique, creative experience missing from other tools in the market.
Highlights
During this stage, I began shaping the design system by working with Figma components and variations in real time, creating a strong foundation for future growth. I waited to finalize the full UI system until closer to development to leave room for creativity and flexibility.
Responsive Design Strategy
For the website, I used a breakpoint strategy with Figma’s auto-layout and variable capabilities to create mobile-friendly, modular layouts. While the product was desktop-first, the site required responsiveness and adaptability across screen sizes to avoid user confusion, abandonment, and, ultimately, an unused product.
Prototyping & Motion
I brought key interactions to life using Figma’s prototyping tools, plugins, JSON/Lottie animations, and motion variables. My goal wasn’t to only use prototypes for stakeholder presentations, but spark joy throughout the experience while validating usability, guiding the user, and supporting early developer handoff. I focused particularly on an interactive pricing page, dynamic campaign builder flows, and hover and click interactions across components.
The Design System
As our interaction designs took shape, I began developing a systemized design library. I followed an accessibility framework by applying color contrast, type sizing, and hierarchy standards consistently across product and website components, styles, and elements. For example, I tested text sizes against background colors (and vice versa) and implemented WCAG digital text sizing standards for paragraphs and headlines to counteract readability concerns. This approach ensured cohesiveness and design integrity from every touchpoint through to development.
Highlights
I incorporated UX best practices in spacing, variation sizing, and image optimization to support usability, maintain visual balance, improve load times, and ensure a unified experience across devices.
Developer Collaboration & Handoff
In line with the design system, I began developer documentation, outlining the do’s and don’ts of styling and implementation. With different specifications for the product and website, I created dedicated guides for each to provide clear visual and technical direction. When challenges arose, I worked closely with the developer to resolve animation limitations, responsive layout issues, spacing concerns, and style inconsistencies, while refining troubleshooting communication methods. This flexible, collaborative approach upheld quality standards, ensuring consistency and a smooth transition from design to a polished, functional product.
Highlights
I acted as hands-on QA during implementation to catch inconsistencies early and research workarounds - bridging the gap between design integrity and development feasibility.
Final Deliverables
As development came to a close and final feedback rounds took place, we revisited the goals we set out to achieve: a vibrant brand identity and a simple yet engaging digital experience. This reflection led to a smooth project wrap-up, delivering a complete brand identity, a responsive website with its own style guide, user-focused product UI screens with a simplified dashboard, a toned UI design system, and detailed developer documentation. Together, these deliverables formed a strong foundation for the brand and product to grow in the future.
Client Feedback
The client emphasized my clarity, professionalism, and thoroughness — praising my adaptability, attention to detail, and collaborative mindset. They highlighted I was “a pleasure to work with” which reinforced the value in my process as smooth, efficient, and creatively energizing.
Blending brand, product, and system thinking into one cohesive vision reinforced the value in my multidisciplinary toolkit. I was able to showcase how powerful research, clear communication, and structured design can be when integrated from the start.
Knowledge I gained
- Strong research is the foundation of meaningful design.
- Clear, continuous communication with developers ensures quality and momentum.
- Design systems are essential for scale, consistency, and efficient handoff.
- Regular client touch-points keep alignment high and revisions minimal.
- And most importantly—ego has no place in a collaborative build. The best outcomes come when everyone is working toward the same solution, not protecting their own.
The most complex part of this project was the design-to-development handoff. The UI’s nuance combined with a single developer’s limited bandwidth created hurdles. Rather than getting blocked, I leaned into tight collaboration — using Figma systems, clear specs, annotated guides, and flexible problem-solving to bridge the gap.
Knowledge I gained
- This experience deepened my understanding of what developers need, and how designers can bridge gaps not just with visuals, but with clarity, flexibility, and empathy.
This project pushed me to grow both as a designer and collaborator. It deepened my understanding of developer constraints and strengthened my ability to maintain design integrity through clear documentation, flexible systems, and open communication. I refined my skills in component library organization, naming conventions, and accessible interface design, while also learning to adapt research methods to fast-paced environments without losing sight of the user. Most importantly, it reaffirmed my belief that great design lives at the intersection of logic and creativity — where strategic thinking, hands-on execution, and genuine collaboration come together to build thoughtful, effective solutions.