Fables

Overview

Fables is a site builder tool that allows non-technical creative users to build AI powered apps. I led the design of this tool and played a key role in product strategy and engineering.

Role

PM, Designer, and Developer

Timeline

September-October 2025

Tools

Figma, React, NextJS

Context

Beyond our core work at LifeAt, we were curious about new directions. There was an area in particular that consistently excited the team - simple AI powered tools.


A few signals pushed us in this direction:

  • We used tools like Zapier internally, but setup was often complex and frustrating for non-technical teammates.

  • Our content creators had viral ideas but struggled to build them without technical support.

  • We noticed simple AI tools, like rayz, were generating significant revenue.


This sparked a question: Could we empower non-technical creators to build AI apps easily? While the main team stayed focused on LifeAt, I partnered with our CEO to explore this. I led the design process - from research and wireframes to branding and final UI - and then brought the MVP to life as a front-end engineer.


With my engineering background, I was able to bridge design and tech, ensuring the product was intuitive, feasible, and built quickly.

Research

Who is this for?


To define our user base, I interviewed team members and users from our other products who fit the profile. Here is a snapshot of this research:

🤳🏼 Sarah

Content creator and designer

  • Gets most of her revenue from sponsorships, wants something recurring

  • Loves designing products

  • Has lots of ideas for products that would be valuable for her and her audience

📖 Tatiana

Knowledge creator

  • Gives content growing advice to her audience and subscribers

  • Revenue is restricted to how much time she has to write advice - wants to expand this

  • Wants to make her existing course material more personalized, but it would be time consuming

💻 Maria

Entrepreneur / every day user

  • Has tried making automations on Zapier, Tally, Airtable for work but finds them confusing

  • Has tried using bubble but found it to have a steep learning curve

  • Has a lot of app ideas

We identified two key user groups:

  1. Creators & Experts – People with specialized knowledge (e.g., business strategy, product design, fashion) who could package their expertise into AI-powered tools to expand their reach and generate revenue.

  2. Entrepreneurs & Everyday Users – People with creative ideas who lacked the technical skills to bring them to life.

Competitors

To better understand the landscape, I tested out some site builders and AI automation tools. I noted friction points and gaps in user experience. I also had some of our users do the same and share their pain points with me.

Bubble.io

Zapier

Some key findings included:

  • Site builders had overwhelming interfaces.

  • AI automation tools lacked customization and weren’t build for sharing to large audiences

  • Existing builders didn’t embrace creative AI use cases like text/image generation and manipulation.

  • They assumed users had technical knowledge, making the setup process confusing

Based on this research, the value propositions we want to provide:

  • Simple & intuitive – Designed for non-technical users.

  • Customizable – Empowering creatives to match their brand aesthetic.

  • Creative use of AI – Supporting text/image generation and manipulation.

  • Revenue-friendly – Helping users monetize their tools easily.

Design

Next up was my favorite part - actually designing the product! The biggest challenge was making the workflow automation integration seamless and intuitive. I wanted to make it feel approachable for our user group of designers and creatives.


I made an initial design in Figma and went through a couple calls with our prospective users, having them talk through the creation process based on my design.

Questions that came up:

  • “How do I display the output of a workflow?”

  • “How do I connect an element to a workflow?”

  • “How do I start the AI connection?”

  • “Where do the results show up?”

Key problems:

  • Getting started was confusing - when users are shown a blank editor, they don’t know what to do

  • Workflow integration felt disconnected – Users struggled to link UI components to AI-generated actions.

  • Displaying results wasn’t intuitive – Users didn’t know how to surface AI-generated outputs back into their apps.

I did some brainstorming and tested iterations with the team to refine those experiences. (View the figma file here)

Addressing the issues

  1. Getting started is confusing

    → I added place holders to outline a standard app flow

  1. Connecting the app to workflow is confusing

    → Added a prompt to trigger a workflow directly from the UI

  1. Connecting the workflow output back to the UI is confusing

    → The workflow will output a UI element that can be drag and dropped directly on the UI

Branding

I designed the branding to feel fun, playful, and spark creativity.

Final design

I finalized a prototype that balanced usability with development feasibility. Since this was an MVP, I ensured that the design was implementable within 1-2 sprints without compromising user experience. (View the figma file here)

Returning to a project…

Adding a workflow…

Outcome

After finalizing the design, the team spent 2 weeks developing an MVP using prebuilt UI kits and a simplified architecture. We then tested demand with a landing page and waitlist. The customers we got included small content creators, entrepreneur's, and small business owners.

Here are some of the things I learned from watching users use the tool:


Guiding users with placeholders

Adding placeholders to outline app flow significantly improved usability—most users started from there.


Challenges with connecting components

Users struggled to link components to workflows using variable names. A more visual or drag and drop approach would probably be more intuitive.


Ease of use vs. complexity

Users could create simple apps quickly, but more advanced functionality was tricky. Balancing simplicity with power was still a key challenge.


Higher expectations for functionality

Many users came in with ambitious ideas, looking for more features—such as complex payment flows, structured data output, and AI model training.

While we saw interest, our research led us to an even stronger product opportunity, so we decided to pivot from Fables. Still, I learned a lot from this project. It was my first opportunity getting to lead such a big chunk of the product, design, and development of a product. Some of my takeaways:

Takeaways

  1. Simple vs flexible editor

    A simplified design comes with the tradeoff of less flexibility. It was tough to find the balance of allowing users to make creative enough products, while keeping the editor simple

  2. Designing from the lens of a developer

    Since the intention was for this to be a quick product test, I had to create a UI that was both visually engaging and realistic to build quickly. I was able to take advantage of being both a designer and front end engineer.