AboutWorks
  1. Background & Challenge
  2. Research approach: let AI do the heavy lifting
  3. Smart Widgets. From problem to prototype
  4. Communicating early-door UX solutions to stakeholders and engineers
  5. v0 to Figma — smooth transition from general to focused solutions
  6. Figma to v0 —when development resources are limited
See other works →
Smart Widgets 🇩🇪

Scalable AI product design: a framework for building efficient design process in startups

Category

Design in startups

Duration

Mar — Jun 2025

At himala, we faced the classic startup tension: speed vs. quality. With board-driven product decisions and early-stage pressure, speed as a measure of success often wins.

To survive as a product, we needed to adjust our ways of working to deliver actionable UX insights faster and overall improve the delivered output under pressure. The practices I'll share are battle-tested and proven to work during one of the product pivots we went through.

Background

In a round of Miro-based workshops, we have ideated with the product and tech team of how we can leverage our existing technology to find a better product-market fit. One of the ideas we decided to test further was a Brain Canvas, a a mind mapping tool to expand your ideas beyond the known with step by step AI assistance for problems requiring a decision.

Challenge

Finding a general idea of the product is often a dangerous situation which leads to building features without yet understanding the problem. Thus, we needed to find ways to speed up the design process where we could to free time to where it matters. Understand where to speed up in order to have time to slow down.

Research approach: let AI do the heavy lifting

After 2 weeks of internal workshops we focused on 3 main AI-driven product ideas to run our initial tests of how good the idea would work in the market:

Meeting Intelligence

A meeting productivity platform that helps users prepare for, conduct, and follow up on meetings effectively, leading to increased efficiency and better outcomes.

Smart Widgets

A collection of widgets —your calendar, inbox, headlines— that bring clarity and focus to your day via everyday briefing.

Brain Canvas

A thinking space that doesn’t just store ideas—it structures them, turning scattered thoughts into clear, actionable outcomes.

Investor intuition often sets the pace, and rapid AI iterations can look irresistible, yet we’ve chosen a more deliberate path: harnessing large language models for what they do best—scouring and synthesizing vast public datasets to ground our discovery phase to enhance our starting positions and make an informed decision.

Sentimental analysis

Used

GummySearch

to scan

Reddit

and

Quora

for user frustrations. AI helped us identify market gaps based on what people were actually searching for.

Competitor research

Combined

Semrush

data with

ChatGPT

deep research to find competitive opportunities in the saturated AI market.

Visual problem mapping

Used AI to categorize user problems and competitor features, then created a graphical representation with

and

library that shows opportunity gaps for each solution to share with the stakeholders.

Smart Widgets. From problem to prototype

After evaluation, our management chose Smart Widgets — it would be based on existing tech and was ideal for a quick MVP launch. Thus, the next step from the product team was to communicate clearly what the problem we were trying to solve was and how technology would really help solve it.

Create Job Stories to understand environment and motivations

Based on user research, we identified the specific problems people face that widgets could solve.

Map effort vs value

Worked with developers to estimate the effort needed for each job story. This approach allowed to share potential roadblocks early.

Communicating early-door UX flows to stakeholders and engineers

One frequently overlooked detail is that you can't discuss invisible solutions. In order to manage the conflict of time with expectation, we were creative in the way we managed to explain to stakeholders and engineers how we can potentially solve user problems.

Transform user jobs into prompts

Together with PMs we have summarized all our researched points into short focused prompts in

Notion

Transform prompts into clickable prototypes

With the help

and round of iterations, we turned insights into interactive prototypes. Visual discussions happen faster and allow to manage expectations from the start. The risk of such strategy is the illusion that the work is done, so it is important that the product team are really involved in building such 'quick' solutions.

First feedback from potential customers

We used

user interviews

to test our prototypes and validate the usefulness of our approach with the target audience in a matter of days. Such speed would be impossible if the prototype was implemented traditionally.

to

— smooth transition from general to focused solutions

uses

shadecn

library components, based on

tailwind

which is a perfect ground to start building a custom interface solution. Minimal setup like this gives a good UX foundation to start crafting a real thing.

We broke down the results of vibe coding into atomic UX blocks

    While our product team approached the screens generated by

    as low-fidelity wireframes, we noticed that stakeholders perceived them as near-production-ready—which is a risky misunderstanding. It's even riskier if a product designer falls into the same trap. To avoid that, we deconstructed the initial concepts into

    shadecn

    components, using them as a foundation for a revised UX version of the Meetings widget.

    Next, we transformed a basic component library into a custom UX language

    In the early stages of concepting, both designers and developers need a degree of creative freedom to define both the unique voice and a technical setup — while still working within a ready-for-dev system that streamlines collaboration. With

    shadecn

    , we were able to dive into the atomic structure of components and fine-tune their variability to the needed level, all without slowing down team velocity.

    Simplified the layout to highlight what matters most

    Designing interfaces today is easier than ever — but no matter how tools or user environments evolve, the human touch remains a key differentiator. So how do you stand out? In this phase, we took a step back to craft a visual rhythm that captures attention, then layered the aesthetic on top of our UX language. That balance between systematic functionality and emotion is where the real design craft comes in. Right now, vibe coding helps a lot with the former, leaving the best for human designers to explore.

    Planning for customization ahead of the product curve

    Customization takes time, so we focus on component-level versioning to manage the complexity of each element individually. By planning early, we can translate the design language into code through small, incremental steps — without slowing development. We prioritize high-impact elements first and refine the rest over time.

    to

    — when development resources are limited

    When the dev team lacks time or capability for custom solutions, v0 provides a solid foundation for design experiments that could be used as a starting point for dev team to implement.

    provides a solid foundation for design experiments that could be used as a starting point for dev team to implement.

    Case 1: building custom interactive animations

    Custom animations can be a powerful way to elevate the product experience—but it's unrealistic to expect the entire team to prioritize them when there are always more pressing tasks in the backlog. Vibe coding helps bridge this gap by enabling quick prototyping of layout animations using libraries like

    motion.dev

    . This allows us to share production-ready code with developers at the right moment, saving time and streamlining collaboration.

    Case 2: creating data visualizations

    We wanted to visualize the space each integration occupies, and chose a Treemap layout for its clarity and impact. With vibe coding, we built the first prototype in just 30 minutes—without diving into chart library documentation or integrating it into the dev environment. It allowed us to quickly bring the idea to life and clearly communicate the vision to the team. It’s a much more efficient and collaborative way to work.

    Hi, stranger! My name is Eugene, but everyone at work calls me Dje Dje 😜

    I have 7+ years of Product Design experience scaling complex applications, as well as building early-staged startups. Based in muy buena Barcelona, Spain.