Case Study

Designing Kepla to save users 5+ hours of digital marketing

As the first designer for a bootstrapped startup, I created marketing automation workflows that now serve clients from small businesses to New Zealand's largest media publisher, helping non-technical users save 5+ hours of manual work each week.

Homepage image of the Kepla product showing mobile and desktop
Client
Kepla
Project Type
Greenfield product design
Role
Product Designer
Timeframe
4 months
Team
Product Manager, Lead Developer, Software Engineer
Skills
Wireframing, Userflows, Prototyping, UI Design, Design Systems
Take a look at the product

Overview

Kepla, founded by marketing and digital agency owners, was created as a solution to enable automation of digital marketing campaigns across multiple channels, becoming a digital marketing agency in the user’s pocket. As the first designer on the team, I established marketing automation workflows, helped structure the product and key workflows.

My role

As an early-stage, bootstrapped startup, the team at Kepla needed the design resources to help structure their greenfield product. I was lucky to work with a highly knowledgeable team who had deep domain knowledge of digital advertising and a strong product vision.  Working with Kepla, I was responsible for developing the core user experience and the platform’s UI (based on brand guidelines that were to be provided).

Challenge

Small business owners needed to run effective digital marketing but lacked time and technical expertise. Marketing was often a secondary responsibility handled by staff members or squeezed into busy schedules. Kepla aimed to automate complex multi-platform campaign creation, enabling non-technical users to compete effectively without agency-level resources or expertise.

Solution

I designed a hub-based campaign creation system that transformed complex multi-platform advertising into intuitive workflows. The hub provided a central campaign overview with platform-specific modals, allowing users to manage Google, Meta, and LinkedIn campaigns from one interface. I created standardized ad creation flows with dynamic previews, enabling users to learn the system once and apply it across all platforms. Working under bootstrap constraints, I built a flexible component system that supported rapid development while accommodating parallel brand development

Overview diagram of the Kepla campaign creation solution showing a central hub and channel-specific campaign management
The core concept was a shared campaign hub that reduced duplicate setup across channels while keeping each platform-specific task manageable.

Impact

  • Users save 5+ hours weekly by eliminating repetitive setup across multiple advertising platforms.
  • Platform successfully scaled from MVP to serving New Zealand’s largest media publisher alongside hundreds of small businesses.
  • Flexible design system and information architecture enabled international expansion and sustainable bootstrap growth.

“Digital marketing seemed daunting at first, but Kepla made it easy and the enquiries just started flowing in. I couldn’t have made a better decision.”

Matthew (On Par Plumbing)

Strategy and market-fit

Early in the project, when I first joined the team, Kepla was envisioned as a tool for digital marketing agencies. It would allow users to centralise the complexity that arises from having multiple campaigns across many clients.

These initial concepts below show how ad agency users would first view a range of client accounts and then dive deeper into campaigns when needed. Clients themselves would also be able to log in and access their campaigns, thus allowing both parties to have visibility and work cooperatively.

Early wireframe showing agency-focused account and campaign management structure
Early concepts assumed agency users would move between multiple client accounts and campaign views.
Early wireframe showing deeper campaign management flow for agency users
These structures revealed the extra complexity that came with designing around agencies rather than a single business account.

A change in direction and structure

The Kepla founders had a deep market knowledge from running their own digital marketing agencies. This initially pushed the product direction towards other digital marketing agencies as the customers. However, the core value proposition of the MVP was simplifying campaign creation and management across platforms. This value proposition aligned more strongly with a much larger market: small to medium businesses who were not currently leveraging digital marketing effectively but couldn’t afford to hire a full agency. To further support this pivot, this approach wouldn’t require the complex scaffolding needed for sharing data and access rights across various accounts, thus allowing us to go to market earlier.

The new user base

Due to their background, the product founders had a large network of potential customers that fit our ideal profile. The target users were either staff members tasked with running the digital marketing as a secondary part of their role, or the business owners themselves.

From initial market scoping conversations, we identified the following user needs:

  • Users are time limited; marketing is a secondary part of their business or job.
  • Digital marketing is quite a new skill to many of these users, even if they have traditional marketing knowledge.
  • With so many channels (Google, Meta, LinkedIn, etc.), each with their own digital marketing options - it can be confusing and overwhelming to navigate.
  • Users may be capable of building a single digital ad campaign, but they don’t know how to run them effectively over time.

Structuring the product for single company accounts

We moved our focus to designing a structure for a single company account. The structure had four high level areas: Campaigns, Templates, Reporting, and Account Management.

WireframeWireframe

At this stage, we were still looking into wider features such as templating, a way of running repeat campaigns.
User research, however, was revealing that small businesses wouldn’t create enough campaigns to need repeatable templates. For users trying to get a job done, templates complicated the user experience.

Removing templating allowed us to prioritise our design and development efforts on the core experience of creating campaigns.

Wireframe showing simplified single-company account structure without templating

Prototyping: The ad campaign creation process

This part of the case study will focus on the product’s core offering of creating ad campaigns, while the second part of the case study explains the wider app structure and implemented designs.

The process

We knew that we wanted to provide a platform where a user could create a campaign once and run it across multiple channels, allowing us to simplify the process of digital marketing. Across the many platforms, several overlapping data inputs are required for the user. Our system aimed to reduce this complexity and repeat work, allowing users to focus on the global direction of the campaign and add details where necessary.

Our first designs looked to simplify the decision making, creating a linear process for the user as shown below.

Linear campaign creation flow showing simplified step-by-step decision making

All-in-one option

Below, you can see the core user flow for creating a campaign. With the intent of simplifying the actions and decision making required to make a campaign, we initially aimed to put all the campaign specific information for each platform on one page.

All-in-one campaign creation flow with platform-specific information on a single page Wireframe of multi-step campaign creation broken into per-platform pages

Each platform’s API submissions would require a different set of data inputs. As a result, we would need to submit the data separately, resulting in us requiring a page for each platform.

Multi-step

In response to this technical requirement, we broke up the pages required for campaign information into a linear process. At the start of the process, a user would select platforms (Meta, Google, plus more in the future), enter general information and then enter each specific platforms information. Note that at this stage we had developed the UI visual design, but this will be covered in a later section.

Multi-step campaign creation process with separate pages for each advertising platform Wizard-style campaign creation process flow showing platform selection and global information steps

User feedback

Informal user testing was taking place with customers who were viewing the prototype. Some key feedback was that first the process felt quite long, but most importantly you lost track of where you were. By the time a user had navigated through the pages, they weren’t sure what platforms they had selected and what had been filled out.

Change to hub system

To fix this user confusion, we kept the first two steps (Campaign goals and Global information) and then grouped the platform specific pages into a ‘hub’.

Instead of trying to remember the platforms you had initially chosen, then run through all of them in one go, the user could add and manage each platform in one central location. The hub gives an overview of all the platforms you have selected, and all the ads you have created for that platform. 

Flow showing the revised hub-based campaign creation process
The hub model made progress visible and let users move in and out of platform-specific tasks without losing their place.

As a result users had a clear system overview, and the tasks were chunked into manageable pieces.

The campaign creation process was designed as a full screen wizard, to focus users on completing the campaign information. At this stage of development, we didn’t have the ability to save progress, so we would need users to run through the full wizard process. To differentiate the platform specific campaigns from the wizard, each platform’s page would open as a modal. This also allowed users to see that they were still in the ‘hub’ but were completing a specific action. Users could then jump in and out of each campaign from the hub.

Once a user was satisfied with their overall campaign, they could finish the process. Note that depending on your campaign goal, Kepla would suggest what specific ads you should make, so the user wasn’t paralyzed by deciding if they had done enough work or where to start.

Kepla campaign hub interface showing platform-specific ad cards with overview and status indicators

Platform specific creation

Each platform has many different ad types - we created a largely standardized ad creation page that worked across all of them. A user may need to set up 5-6 different platform specific ads depending on their overall campaign goals. The platform specific pages shared a similar structure, with different fields and minor setup changes depending on the platform’s quirks. This system effectively allowed users to learn the ad creation system once instead of many different times for different platforms and ad types.

Standardised ad creation page layout shared across Google, Meta, and LinkedIn platforms

Dynamic ad previews

A key feature was enabling users to view the ad being created for the platforms. This experience was consistent across ad creation platforms, the user always knowing that on the right hand side they can see how their ad will look, and trust that the system was creating the intended ad.

Dynamic ad preview panel showing real-time ad rendering as user fills in campaign details

Design: Structuring the app

In addition to designing the core user flow for campaign creation, I was tasked with developing the structure and UI of the rest of the app. As a design team of one, I needed to wireframe, prototype and document quickly, ensuring the development team could keep building features.

Interaction modes

To manage the front-end development load, I needed to ensure the number of interaction modes and page types were kept consistent. This also built a structure for the app that created a consistent user experience. Below are some of the key interaction modes:

Tabbed page

Informational page with tabs to explore more. This was a core way of displaying information that would then lead users to take action.

Tabbed page interaction mode showing informational content with tabs for exploring campaign details

Wizards

These are used for more complicated step-by-step processes and focus the user on that task.

Wizard interaction mode showing focused step-by-step campaign setup process

Modals

For smaller tasks within a larger process. This allows users to reduce the visual noise of the background content but still quickly return to it.

Modal interaction mode used for smaller tasks within a larger campaign creation process

On page hints

Throughout the site there are several places where Kepla will be able to guide the user. These could be error detection or guidance for campaigns suggested by Kepla.

On-page hint component showing contextual guidance and error detection within the Kepla interface

Visual design

At the start of this project, Kepla did not even have its product name, let alone branding. The brand design was developed externally in parallel, but I needed to get started on the UI as early as possible. The designs needed to be suitable for development early on, but also provide flexibility as we introduced the brand design into the UI. While the very early conceptual works were done as wireframes, I chose the ‘UI Prep’ Design library to give myself easy access to basic elements such as inputs, buttons and cards. We could then focus on custom user experience elements or new components where needed. As the branding was developed, I could easily update key colours, logos and patterns.

The brand concept was inspired by connections, crystal patterning and space. It is a bright but innovative look. The brand provided a strong base with dark blue and white but also the green gradient which could be used to draw the user’s eye.

Full Kepla brand overview showing logo, colour palette, and brand identity elements

The UI system allowed an easy one-to-one swap of the core brand colours in. In addition, the ‘technical’ hexagonal elements were used in the header of the wizard to give visual focus.

Kepla brand elements applied to UI with dark blue and green gradient and hexagonal technical patterns

Outcomes

My design work provided Kepla with both immediate solutions and a scalable foundation for long-term growth. The hub-based campaign creation system became the core of a thriving bootstrapped business that now operates internationally. Most importantly, the strategic pivot research and user-centered design approach enabled Kepla to find genuine product-market fit across multiple market segments—from individual small businesses to enterprise clients.

Check it out

Impact

  • Users save 5+ hours weekly through automated workflows eliminating repetitive setup across platforms because they can create cross-platform campaigns
  • Dynamic ad previews and consistent patterns enable users to master the system once and apply knowledge across Google, Meta, and LinkedIn
  • Design flexibility enabled return to original agency market as company scaled, while maintaining SMB accessibility

What I would do differently

  • Successful iterations design resulted from repeated customer feedback and qualitative interview insights, however I would implement unmoderated user testing with tools like Maze to measure task completion rates, error rates and task completion times for any future prototyping.
  • For current features such as campaign creation, establishing pipeline measurements to see key drop off points and also task completion times.
Final Kepla desktop UI � campaign management screenFinal Kepla desktop UI � reporting and analytics viewFinal Kepla desktop UI � account management and settingsFinal Kepla desktop UI � campaign hub with platform-specific cardsFinal Kepla mobile UI � campaign list and status overviewFinal Kepla mobile UI � ad creation flow on small screen