Scaling Startups with FLK it Over

Fevzi Musa
Dec 6, 2024
5 min read

Updated: Jan 17, 2025

Challenge:

FLK it Over was scaling rapidly, facing the dual challenge of supporting an evolving user base and securing over $1M in additional funding. The company required a product design strategy to scale its offerings while improving user engagement and operational efficiency.

My Role

As the Senior Product Design Lead, I helped build the product strategy and end-to-end design solutions that laid the foundation for growth. Incorporating design thinking, data analysis, user research, and a design system into the team's process through collaborative workshops.

Approach

1. UX/UI Overhaul

Delivered a full redesign of the platform’s interface for mobile and desktop, addressing legacy usability issues and aligning the product with modern UI standards.
Developed and scaled an integrated design system, which unified the product’s visual language and ensured consistency across features.

2. Feature Development

Designed, researched and launched two new products targeting uncharted user markets, backed by limited but essential research insights.
Created prototypes and design frameworks that allowed for team collaboration, ensuring efficient delivery of high-quality features.

3. Data-Driven Insights

Facilitated data tagging and analytics workshops, enabling better understanding of user behaviour and pain points.
Implemented A/B testing and UX optimisations for multiple sales funnels, improving user engagement and subscription rates.

4. Holistic Collaboration

Conducted cross-departmental workshops to foster collaboration between design, development, and business teams.
Established a Design > Test > Build framework, streamlining the integration of research findings into the product lifecycle.

Accomplishments

Launched two new products/arms, addressing untapped user needs and markets.
Successfully implemented a unified design system, improving development efficiency, UI consistency and overall UX.
Integrated UX/UI research and testing into the company’s processes, creating a culture of user-centred decisions.
Delivered sales funnel optimisations, contributing directly to improved conversion rates and user satisfaction.
Facilitated team workshops to align teams, improving collaboration, better ideas and business strategy execution.

Challenges

Adapting to the challenges of a rapidly scaling team, including consistently shifting processes and communication.
Balancing multiple, often conflicting, business opportunities while aligning short-term goals with long-term vision.
Designing for markets and user needs with limited available research, requiring creative problem-solving and rapid validation.
Managing product roadmaps led by various departments, which often lacked a holistic, unified approach.

Learnings

Collaboration: Effective workshops and alignment sessions strengthened interdepartmental understanding and execution.
Market validation: Market research and testing proved invaluable, highlighting the financial importance of informed decision-making.
Embracing Remote Work: The team successfully navigated remote collaboration, reinforcing the viability of a distributed model for dynamic growth.
Data-Driven Success: Regular analysis of sales funnels and user expectations underscored the financial opportunity in optimising the user journey.

Outcome

FLK it Over successfully secured over $1M in additional funding, driven in part by enhanced user experiences, streamlined design-to-build workflows and a clear product design strategy. The platform’s redesign and new features boosted user engagement, retention and subscriptions while the design system streamlined UI and internal workflows. We laid a strong foundation for sustainable growth and the app looked and felt so much nicer.

Snapshot: Before and after I joined the team

PDF Editor after. Many new features, Optimised UX/UI, design system applied

Interaction design:

Project: Floating contextual toolkit design

Goal: While building the functionality to accomodate multiple signers (end users) on a single doc (as opposed to just one signer) we needed an intuitive way to be able to apply multiple signature requests in a single click and have the ability to assign it to the right person. Not only that but multiple other things, like adding dates, witness signtures, witness name free text; all while assigning it to the correct signer.

This interaction design also came off the back of building a concept called "scan for fields" which allowed the user to get the system to scan the document for wherever the end user would need to sign, and allow them to place a signature placeholder or other placeholder there.

This first video shows part of the floating contextual toolkit: The user is able to click, immediately see 'signer 1's' signature placeholder added to the document, then they're able to change the signature placeholder to a date, name, witness name or witness signature in 2 clicks. I ensured we utilised visually coherent and consistent colours and icons that match the signer colours so users could quickly establish which signer they were applying the placeholder to. A dropdown allows for quick selection of placeholders > quick updating of the placeholder > maintaining the placeholder's assignment to a specific user.

This video shows the second part of the floating contextual toolkit: The user has the ability to add up to 8 signers either individually or all at once, using the same colour coded buttons.

Component design break down:

Project: Mobile signing experience (end user signing multiple documents in one sitting)

Goal: When I arrived at the company it was clear a UX/UI optimisation overhaul would be required, and the fact that it came first, before new projects, would allow for no doubling back on dev time. Below is an iteration of a new interactive signing experience which was applied across the platform; mobile and desktop.

What you see below is a (low fidelity) mixture of old and new UI components, applied to a new user workflow I created.

I asked how might we: Get an end user to know that there are several documents to sign, and all documents must be viewed/ reviewed before signing?

For contrast, below is the desktop version. The UI had updated significantly since these videos were taken, but you can see consistent components and colours; a language forming.

Project: "Custom Placeholders"—enables users to create templates with custom data placeholders (e.g., "name") for reuse with different end users.

Video: Showing the template creation process. The User is adding custom placeholders and choosing the labels in the template editor, before they are taken to the PDF editor to drag and drop the placeholders onto the document. This was a complex interaction design and feature with many edge cases. The CEO felt strongly that users would want the ability to reuse the same document for multiple clients and wanted the ability to have placeholders pre-applied to the document; allowing the end user to know what data they need to input on the document while they are in the signing document process.

New interaction design innovation
New component innovation
New design system
New logic
New states design
New workflow/process design
New colours, tags

Project: Creating an "Upload a doc" and sending it off to be signed.

Video 1: The desktop building experience of uploading a document and adding data placeholders to it, sending it off for the end user to sign. VIdeo 2 below shows the mobile signing experience.

New interaction design
New component design
New design system components and elements
Optimisation of previous UI and UX
Note, the UI is still not matching the design, as it has taken some time for the business to implement.

Video 2: The mobile signing experience, once an end user has received the document to sign.

More coming soon!

An integrated design system

Have a play with my design system. Built and integrated into the product over 2 years: