bylder

About the project
GOALS
Create a scalable design system to quicken the design and development process. Ensuring consistency, accessibility and a modern look.
Fix, build on top and create new features for the platform. Including overhauling the building experience, creating an Analytics Dashboard, improving the Resource View and Theme Builder.
Lay the foundation for Bylder to evolve into a full end-to-end sponsorship platform — where teams can build presentations, pitch to partners, manage relationships, and track progress in one place.
CHALLENGE
The product has been growing organically by adding features on demand from clients. Resulting in an elaborate tool with many features, roles and permissions. Structuring all of that into a coherent easy to use experience without alienating the existing user base.
The presentations themselves are web-based — essentially mini websites — allowing for a smooth, interactive pitch experience and detailed analytics. But that also introduced complexity: the structure had to follow web development rules, which posed challenges for brand designers, sales reps, and non-technical managers building these decks.
The product lacked a design system.
Solution
The project kicked off with building a scalable design system — ensuring consistency, accessibility, and a more refined, brand-aligned UI across the platform.
From there, I broke down existing flows and optimised them by analysing established patterns, reviewing competitor experiences, mapping and testing user flows, and working closely with developers and stakeholders to ensure feasibility within time and budget constraints.
I also helped shape and design entirely new features — balancing long-term product vision with client needs — including tools that pushed bylder closer to becoming a complete sponsorship solution.
Let's Jam
Design System
Establishing the design system from scratch for a product of such scale was a challenge. Ensuring we have an asset for everything we need, needed and will need. The trick here was to go into detail about everything creating a scalable system of components and nesting them together. This allowed us to design Flows and test solutions very quickly. The nested components meant that with just 1 click my team and I had access to all components properties that make up our master component. Basically making better UX for ourselves.
Accessibility was baked in from the start. I ran contrast checks, set clear rules for type sizing and spacing, and ensured everything could scale cleanly across viewports.

Redesigning the Resource View and Theme Builder
One of Bylder’s biggest USPs is that every presentation stays on-brand — no matter who’s building it. That means marketing and sales teams can create decks without breaking layouts, misusing styles, or uploading off-brand content. But to make that possible, the product needed a strong foundation: a robust Resource View and a powerful Theme Builder.
The Theme Builder is where design teams define the brand — setting styles, building layouts, and rolling them out across the organisation. In many ways, I was designing a system for managing other design systems. It had to be easy to navigate, simple to preview, and comprehensive enough to handle variation across organisations.
To support that, I created a two-tier menu that grouped related controls together and added a live preview panel so designers could instantly see changes reflected in context.
As for the Resource View, it was pretty straight forward - have your assets, be able to search, filter, upload and move things around. But this doesn't mean we can't come up with a better mouse trap. Which is why I worked on a "Move" functionality that goes beyond drag and drop allowing Users to search where they want to move their assets.


Overhauling the Editor Experience
Majority of users do not have the permissions to create slides from scratch - which is why having an embedded Resource View with all assets (media and slide templates) was crucial.
On the flip-side we have the Design team, which has full access to editing and needs to create the layouts. The main pain points here were - How do I build following the web structure? How do I move things around without breaking the layout?
So to tackle the issue of non-technical users having to build and edit, I designed a context-aware Add Modal based on what the user is adding and if there is a structure to support that component. The modal is also categorised based on what building block is added - Structure/ Basic/ Advanced. This made the flow more intuitive and faster.
For repositioning assets, we didn't have to reinvent the wheel - just follow best established practices from industry leading no code development solutions. Luckily I have a lot of experience in Webflow.

Presenter Mode
One of the perks of being a web-based Presentation tool is that our client can pitch to their prospects using the tool from any device. While having access to their notes and a built-in timekeeper, without the Viewer seeing any of that.
Of course, Users should always be able to send the presentation to their Prospect Partner and let them go through it on their own time, share within the team and get sign of to do the deal.
Which is why I had to design 2 different responsive Presenter Environments. The first one being the Presenter - Presentee one. As well as a "Traditional Presentation View". The challenge here was to keep the layout of the screen flexible, both so it can fit on different devices but to allow users access to their Notes and Timekeeper.
.png)
Analytics Dashboard
The long-term vision for Bylder is to evolve into a full Partnership Management System — not just where presentations are built, but where relationships are tracked and grown.
One of the first steps in that direction was adding analytics to presentations. Since the decks are web-based, we had access to rich data: number of views, internal shares within prospect organisations, completion rates, and more.
The challenge was clarity — surfacing the most valuable insights without overwhelming the user, especially when a single deck could have thousands of sessions.
I followed my usual approach: research, design, share early, gather feedback, and iterate. I worked closely with users to understand what data actually mattered at each stage of the deal, and shaped the dashboard around those needs — giving users control over what they see, and how they see it.
The final dashboard made complex data simple — giving users just what they needed, when they needed it.
