Cover

Design year zero?

A case study in AI driven design using Vercel’s v0

UX DesignAI Tools

v0 AI design tool

With the recent launch of some interesting looking 'AI powered' design tools, I saw an opportunity to rethink the entire UX design process. And with the challenge of building a new AI powered ESG (Environmental, social, and governance) product, in just three months 🤯, I saw this as another opportunity to pilot and test a new AI driven design process using Vercel's v0.



What is the ESG product?

Our new AI product helps businesses comply with ESG (Environmental, Social, and Governance) regulations more efficiently. It gives compliance experts easy access to relevant information and provides insights to guide their actions.



What is v0?

Vercel's v0 is an AI-powered tool that generates code based on text prompts, much like using Chat GPT or Gemini. v0 creates an interactive design based on text prompts and even recreates design based on uploaded images.

The goal is to discover if designing with AI speeds up design, helps me be more creative, or simply hinders progress and leads to unnecessary complexity. I’m aware that what I write here will change rapidly, so let's hang on to our seats and get started!

Challenge

Reimagining the craft of design

The new ESG product needed to be intuitive and engaging for users while effectively communicating complex data and insights. So when it came to actually starting concepts and user flows, this presented two key challenges:

Designing without Figma 😬

It was a scary thought, as I have used Figma and similar 'traditional' design tools for at least 15 years. Yet, I wanted to explore designing without relying on these traditional tools, pushing the boundaries and moving away from pixel-pushing and connecting clickable prototypes. Is prompting a craft like managing elements on a screen? I am not sure yet, but it’s a means to an end.

Developing a new handover process

With v0 generating production like ready code, I needed to create a streamlined handover process for engineering that maximised the efficiency for collaboration.

Solution

Embracing a new way of designing

To fully embrace this new way of designing, I immersed myself in v0, exploring its capabilities and pushing its limits. I had looked at other AI tools such as Lovable and Bolt, but as luck would have it, our engineering team were using Vercel, and v0 was a key part of the ecosystem. Fortunately, v0's use of familiar technologies like Tailwind, a highly flexible CSS framework and shadcn/ui, a React based UI component library eased the transition.

👉 Be advised, both v0 and many of these tools use shadcn/ui and Tailwind for consistent UI, which makes selecting patterns easier, but customisation can be challenging if their default styles don't align with your vision.

First version of prompt for a simple search

Discovery

Incorporating discovery session feedback

Before diving into v0, the UX team had conducted extensive customer discovery sessions in the previous months with P&L owners and compliance executives. Basically, our vision was to design from the top down. These sessions yielded valuable insights into user needs and pain points.

Using Jobs to be done framework

These insights were crucial in shaping the design of the new product. With v0, I uploaded as much feedback into the project to incorporate it into prototypes and generate new versions, ensuring a user-centered design throughout the process.

To further refine our understanding, we employed the Jobs to Be Done (JTBD) framework. This involved identifying the "jobs" users were "hiring" our product to do. Some key jobs included:

  • Stay informed: 'Help me stay on top of the latest ESG regulations and understand how they impact my business.'
  • Assess compliance: 'Enable me to quickly assess my company's compliance status and identify areas of risk.'
  • Take action: 'Guide me through the process of implementing necessary actions to achieve compliance.'

This JTBD analysis, combined with the user feedback, helped us prioritize features and ensure the design directly addressed user needs. The beauty of AI tools like v0 is that they allow for rapid iteration, and bake these needs into the design.

Principles

Guiding principles for building for AI

Since we are building with AI for an AI system it's reasonable to expect that there are principles to guide us and also v0. I established a set of guiding principles to ensure responsible design throughout our process and I fed these principles into v0.

Design responsibly

Use a human-centred approach: Determine if AI adds value. AI should improve the user experience or solve real problems in the compliance domain, such as automating repetitive tasks, identifying potential risks, or providing insights from complex regulations.

Design for variability

Use multiple outputs: Recognise the inherent variability of generative AI: When a user inputs product specifications, the AI might generate different compliance strategies over time as regulations evolve or new information becomes available.

Design for mental models

Teach effective use: Explain the benefits, not the technology: When explaining our AI, focus primarily on conveying how it makes part of the experience better or delivers new value, vs explaining how the underlying technology works.

Design for co-creation

Support co-editing of outputs: Give control back to the user when automation fails: This enables users to take over and correct or refine the AI's output.

Design for trust

Calibrate trust with explanations: Explainability and trust. Explainability and trust are essential in the compliance domain. Users need to understand how the AI arrives at its conclusions and recommendations.

Design for imperfection

Offer ways to improve outputs: Errors and graceful failure. Acknowledging and handling errors gracefully is crucial for designing robust AI systems.

Design for multimodal interaction

Recognising different ways of interaction: Provide alternate inputs. Beyond text-based interaction, consider how voice commands, image recognition, or even augmented reality (AR) could enhance the user experience in a compliance context.

Process

Structuring the AI design process

My design process with v0 evolved into distinct stages:

Customer discovery sessions

In-depth interviews with high-level executives, including directors of finance and P&L owners. These sessions provided valuable insights into the difficulties users encountered when managing ESG compliance. One customer, for instance, highlighted the need for a tool that could integrate with existing systems and provide accurate, up-to-date information on ESG regulations.

Prompt engineering

Crafting precise and effective text prompts to describe UI elements, interactions, and user flows. This required a shift from visual manipulation to a deeper understanding of v0's capabilities.

Code editing

It reminded me of how I used to ‘design in browser’ many years ago. It brought back my dormant skills as a former coder when I worked in websites in the 00s. If a prompt wasn’t working I could edit the code directly. Since it was well structured code, this make it much easier.

Rapid prototyping

Generating multiple UI options based on prompts, enabling rapid evaluation and iteration to put in front of customers to gain validation.

Feedback loop

Continuously incorporating user feedback into prototypes and generating new versions, ensuring a user-centered design.

Handover to engineering

Handing over interactive prototypes and clean, well-documented code generated by v0, streamlining the development process. Added bonus is that the v0's generated code can also serve as a foundation for collaboration and refinement with engineers.

Setup

Project setup and workflow

Project creation

Uploading user stories, feedback, styles, and relevant data directly into v0 at the very beginning.

Chat based design

Using each new chat in a project as a separate design file to organize work. For example, instead of creating a Figma file called 'User Profile,' I would start a new chat in v0 and name it your overall project name such as 'User management'.

Structured prompts

Creating standardized templates for describing components, ensuring consistency and clarity. To ensure a smooth and efficient handover to engineering, I focused on creating standalone, self-contained components. This approach minimized dependencies and made it easier for developers to integrate the generated code into the main application.



Example prompt

Component name: [Component name]

Type: [e.g., filter, list, button, form, navigation]

Location: [Where it sits on the page, relationship to other elements]

Functionality: [What the component does, user interactions]

Appearance: [Styling details, e.g., 'drop-down', 'multi-select', colors, size]

Content: [Data it displays, placeholder content]

Dependencies: These should reside in component folder

Location: Provide context. This component will be placed in the header of the website, next to the search bar. Components should be stand alone: All dependencies such as styling and data should be included on page.

Component isolation

Instead of building the entire UI in a single v0 file, I created separate files for each component. For example, a filter component, a button component, or a data visualization component would each have its own dedicated file. This isolation ensured that each component's code was independent and manageable.

Linking components to Jira

To further streamline the workflow, I linked each component file in v0 to its corresponding Jira story and ticket. This provided engineers with direct access to the component's design, code, and associated documentation within their familiar project management environment.

Prompting

Working with v0 (and other AI design tools)

Of course there are other AI tools out there, so this will apply to any chat type tool.

Start with broad prompts, then refine

Begin with broader prompts to establish the overall structure and layout of your design. Then, use more specific prompts to create individual components, referencing the existing structure. This iterative approach helps you gradually build up your design while maintaining clarity and control.

Build upon previous responses and files

v0 retains the context of your previous prompts within a chat. Use this to your advantage by referencing previous responses and building upon them. You can also link to previous files to provide examples or context for v0.

Upload visuals and screenshots to get started

I have used Figma visuals and even screenshots found online as starting points. Uploading these gives V0 a head start, so it can quickly understand the look and feel you're going for. This lets you jump right into fine-tuning details and interactions instead of starting from scratch.

Use descriptive names for variables and class names

When writing prompts, use clear and descriptive names for variables, classes, and IDs. This will make the generated code more readable and easier for you and your engineering team to understand.

Encourage comments in the generated code

Ask v0 to add comments to the generated code to explain the purpose of different sections. This improves the code quality.

Verdict

So is it year zero for design?

Designing with V0 was a lot of fun, which is a big point in its favor. It was a refreshing change of pace, but will it fully replace Figma, Sketch, Penpot, and the like? While it has a lot to offer, it's not a complete replacement yet, and still has room for improvement. I will definitely be using it for prototyping and early stages of design process.

What I loved 🤩

  • Interactive prototypes: A rapid way of getting good quality and interactive prototypes up and running to get feedback. This is where it really shines and if I didn't use it for any else, protoyping is the key use case. I find quicker than creating clickable protoypes in Figma.
  • Realistic content: Create good quality content on the fly. This was sometimes the most time intensive aspect of putting realistic prototypes together. Figma plugins never worked well enough for me to rely on them.
  • Easy to prompt with: Intuitive understanding of natural language prompts and accepts and understands crappy English, which is nice when you are feeling tired.
  • Communication with Eng: Great at communicating the design vision in a quick way.
  • Interactions: Superior way of communicating and handling of micro-interactions to the engineering team. They can see everything at work.
  • Good at logic: Ability to translate complex logic into functional interactions, and create dynamic and realstic flows.
  • Great at iteration: Generation of high-fidelity prototypes from previous low fidelity protoypes.
  • Version control: Efficient version control, and makes it easy to roll back and fork a version for backup.

What frustrated me 🤪

  • Errors: Occasional errors and glitches, which could happen frequently depending on its mood! This would slow my pace down considerably as I had to wait for v0 to recompile and fix errors.
  • Random changes: Unpredictable changes requiring careful monitoring. v0 might remove something for no reason after prompting it to create new functionality. I had to keep a careful eye on it.
  • Unusable code: Code may not be fully production-ready even if taking steps to replicate how the engineering team structure their code. Now, much of it can be thrown away, and that is fine.
Future

Future enhancements for AI design tools

I can see the bigger picture here where these tools will incorporate all of design process and stages, to complete the big picture to feed directly in to the output which is a final design fully fledged from start to finish. A one stop shop where we plug in what we learn and the individual agents will do their thing.

  • Ability to use different component libraries: This was a challenge for me as I could only use Tailwind. This led to some uniformity in design.
  • Integrated user research: Direct integration of user research data and AI-powered analysis to generate initial prototypes or user flow variations.
  • Lenses: Overlaying different design perspectives on prototypes, such as behavioral models and accessibility checks.
  • Enhanced project management: Improved version history, automated testing, and enhanced project organization.
  • AI-powered feature planning: AI analysis of to-do lists and future features to suggest integration strategies or alternative solutions.
Outcome

Early successes and ongoing refinement

So what happened at the end of it all? I'm very happy with the results of the pilot. I had to ramp up fast, and it took some time to get things fairly right—still not perfect, but I am refining my prompts and processes all the time. The collaboration with engineering was a good success, yet some annotations of files could be improved. This is something I'm working on.

The benefits

  • Accelerated design process: Significant reduction in time spent on pixel-pushing, allowing more focus on user experience, interaction design, and rapid iteration.
  • Improved collaboration with engineering: Closer collaboration with engineers, leading to a shared understanding of the design and smoother implementation.
  • Enhanced user experience: Iterative feedback and rapid prototyping resulted in a user-centered design.
  • New design paradigm: Reinforced the potential of AI-powered tools to revolutionize the UX design process.

In Beta

The product is currently in Beta, undergoing testing and further validation with a select group of customers and unfortunately I'm unable to show visuals of the product. This Beta phase is crucial to ensure a successful launch and demonstrate how AI is impacting UX design for the good. Designing the new product with v0 was exciting and it challenged me to rethink traditional processes, and embrace AI as a co-pilot. The experience was incredibly rewarding and there is no looking back, and I will continue to refine this process.

Up next...

DesignAI Project

Designing an AI search experience for the European Parliament

The challenge lay in creating a search experience that delivers precise results swiftly, while also providing essential context for informed decision-making for law makers in Europe.