AI Powered Platform for Film & TV Production

Design System or "Design Toolkit"

If you look at big tech companies like Google, Uber, or Apple, you’ll notice they have very complex and rigid design systems with thousands of rules, components, and guidelines. In my experience, when working with startups, aiming for something like that is not scalable and actually slows down progress rather than helping.

The whole idea of having a design system is to speed up the design process while maintaining consistency and visual harmony. But in a high-speed environment, where everything changes and you iterate constantly, you need something that gives you the flexibility to play around, try multiple options, and at the same time help you move faster.

I would call this a “Design Toolkit,” a small library of styles and components that I can reuse to explore ideas and create concepts and UIs with flexibility and speed. I got this term from this Dive Club video. It summarizes the idea really well and shines a light on how to approach product design at a startup.

Product Strategy

A few weeks after joining the team, we met in the Manchester office to talk about business and product strategy. I believe remote work is the best way to operate, at least for serious people with a strong sense of ownership, but there’s nothing like an in-person session, especially when it comes to long-term strategy and envisioning the future of what we’re building.

We talked about our vision for the product, established the messaging, and built a roadmap with the features we wanted to build over the next few months. Of course, this roadmap is constantly changing, as you’d expect from an early-stage startup. But it’s a necessary first step to align the team around a common vision and start moving in the right direction.

UI Refresh

Once I had the design toolkit in place and a better sense of the product vision, one of the first things I did was a complete UI refresh to achieve a consistent look and feel across the app. This process also helped me to get very familiar with the app, I got to know all of the possible user flows and edge cases.

One key thing I noticed here was that it’s important to follow up on how your designs are implemented. Sometimes you create something that looks great in Figma, but when you see it live in the app, it feels off. That can happen due to variables that aren’t considered in a static design, like how it adapts to different screen sizes, how the interactions feel, how empty or loading states are handled, or how real data fits into the layout. That’s why I started getting more involved in the development process.

Hover States and Micro-Interactions

One thing that makes a huge difference when using a product or even a website is how it responds to your actions. Small details like hover states and micro-interactions can completely change how smooth and polished the experience feels. It wasn’t something I used to prioritize much in my design process, but I’ve realized it makes a big impact.

Here are some examples we implemented throughout the app:

Empty States and Alerts

Another important thing in design is making sure users know what’s going on in the background. Empty states with clear messages help show that content is loading or that there’s just nothing to display, instead of making users think something’s broken. Confirmation and error messages also matter a lot, as they give quick feedback so users know if things are working or if something went wrong, and what they can do about it. We managed to implement these all across the app:

Launching New Features

Besides the UI and UX improvements, we had a roadmap with new features and ideas we wanted to build, so we started working on them.

Helping sellers engage better

Nowadays, with the number of AI SDRs and automated messages, it is difficult to create authentic connections. In this scenario, generic outreach messaging doesn’t work. PG:AI was already helping salespeople identify the accounts to focus on and get a deep understanding of their priorities and challenges. But we knew there was a need to generate ultra-specific content to be able to engage and connect with people.

One of the core principles of PG:AI is that, no matter how much AI and automation are present in today’s sales, human connection will always be the key to success. So, with a clear purpose, we started thinking about how we could use AI and all the information available to create content that allows salespeople to connect effectively with their prospects.

The first idea was to create outreach emails using the context data. Since the platform had access to the value proposition of the organization, as well as the prospect’s priorities and challenges, the results were very good.

But we realized that we could also generate call scripts, value hypotheses, slide decks, discovery questions, and more. By allowing users to add context data such as contacts, departments, initiatives, and insights, and by providing templates, we knew it was going to be a powerful tool.

With this in mind, we built a template generator and a content gallery where users can access all of their documents. This is the current state of the feature, but we have plans to launch a template marketplace and make further improvements in the next months.

Introducing Collaboration

One question we always asked ourselves was: How can we get more people to use the app? We knew that people found PG:AI to be a very useful tool, but they were mostly using it to get information about something and then leaving. Our vision was to make it a collaborative workspace where people could work with their teams and AI to better understand and engage with their prospects, instead of just using it as a source of information.

One thing that all “Workspaces” have in common is the ability to make comments and tag your teammates. And that’s no coincidence. Comments in PG:AI would allow users to add their input and ideas on top of specific initiatives, strategic priorities, insights, and more. This is a stepping stone toward better collaboration and communication by providing context.

The other piece of the puzzle was a notification centre, so users can be notified when they are tagged in a comment and stay up to date with everything going on in their accounts.

This was great, but we noticed it was only useful for current users. We needed something that could help us bring in new users.
The answer was a little obvious, we should make it possible for people to share their account plans. This would encourage users to invite their teammates and get more people into the app.

After some thinking, we also realized that people should be able to view an account plan without creating an account. This would remove friction and allow them to immediately see the value PG:AI offers.

That’s why I designed a sharing experience that allows users to:
a) Share an account plan with current workspace members
b) Share an account plan by inviting new users to their workspace
c) Share a public version of an account plan with anyone

We’re still building this feature, so there’s no feedback yet, but we expect it to help bring in more new users.

I wouldn’t call myself a developer, but with the current state of AI and low-code tools, I feel pretty comfortable building things. Having a solid understanding of HTML, CSS, and some basic JavaScript goes a long way.