Empowering next generation generative editor tool to boost flexibility
Tempo lab Generative AI editor
Tempo is a YC S23 company that aims to excel in design and coding tools in the market. Tempo breaks from traditional design tools, empowering users to effortlessly craft and refine React code with AI prompts and a cutting-edge code editor.
Project Type
Product Design
User Experience
Team work
AI
My Role
Product Designer
UX Designer
Design System
Team
2 Product Managers
1 Tech Lead
5 Product Designers
5 Software Engineers
Timeline
Project Background
Delivery Goal
Business Goal
Tempo Lab helps developers and designers move 10X faster by eliminating the design-to-code translation process.
Our goal is to attract more potential users and retain them by offering a smooth experience in AI-generated content generation and editing.
Project Goal
The initial objective was to design the history panel and create a responsive design panel. After conducting research, more issues came up, so we had to broaden the project scope.
Impacts
Ready for landing
🌟 Successfully establish AI-generated driven related core feaures, ready for developers team
Publish design system
💰 Scalability of design system & brand guildeline for team for future use
Attracts more users
🎉 Iterate the editor tool panel design to resonate and follow user subconscious
Design Delivery
Generate Prompt Ideas
Before
The arrangement of top navigation does not differentiate the main generate functions
It is hard to differentiate between buttons in the generate bar, such as pick and edit
Unclear what generate limits of this product can generate for the first time users
After: Enable Customization
Move the generate bar to the bottom to separate main functions from other toolbars
Include a default generate inspiration section to reduce clicks
Refine the generate bar design to align with users' subconscious habits
What else have we done to elevate the generation experience?
Generate Bar
Customize by offering preset options tailored to accommodate scenarios.
History Panel
Customize by re-applying previous design from the history records
Variation Selector
Simplify customization with variation compare, and regenerating of options.
Styling Panel
Before
After: Bridge Mindset between Dev & designers
What else have we done to elevate the using panel experience?
Bridge the gap
Included making layout adjustments
using flexbox and CSS Grid
Integrate CSS
Blends manual input and tailwind CSS selector for users of all coding levels.
Class Organizer
Organize CSS classes to enable the classification of design elements.
Responsive Design
Before
After: Bridge Mindset between Dev & designers
What else have we done to elevate the using panel experience?
Responsive Design
Highlight the flexibility in breakpoint management to address diverse needs.
File Management
Flexibility with CSS class indicators. Allows viewing of all CSS classes.
Layer & Coding Panel
Reduce steps between selecting the Layer Panel and the file directory.
Happy Path Flow
Design Process
User research
25 Usability Testing
A usability test with specific tasks was designed to analyze user behavior. We contacted 13 designers and 12 developers, documenting all findings with paired screenshots and text for our data pool.
Summary
To gain insights, an affinity map was created to organize relevant information from usability testing.
Generation bar findings
After testing, the initial scope expanded, revealing many areas for improvement. We prioritized tasks and delved deeper into each one.
01
Users seek customization options to meet their demand for creating pixel-perfect designs. They are concerned about limitations in tempo, styles, and versions.
02
There are gaps in mental models and habits between developers and designers. Users from different coding backgrounds feel confused by the panels, which seem to create a barrier to entry.
03
Users require more flexibility to meet diverse needs and quicker access to many basic features. Many essential functions, such as file management and breakpoint control, are still incomplete.
Main Feature develop
Take the AI generate which is an key feature. We use the following steps to solve problems and propose potential solutions.
01
Testing revealed that while users could locate and use the bar generation feature, the unclear functionality of icons led to misunderstandings. There are several areas for improving overall usability.
02
Align with the team to review the problems users encountered and propose possible solutions. Discuss with developers to ensure technical feasibility.
03
Refined the ideas with stakeholders and the PM, balancing design and commercial perspectives. Some trade-offs occurred in the process.
Generation Bar Design Iteration
Original Design
The original design aims to be minimal and text-focused. However, it confuses users and is not clear enough for effective use.
Variation 1
This variation introduces the concept of templates. However, there is still room for improvement in how users access them.
Variation 2
This experience adds more clickable items to elevate the overall interaction. The template has been moved to the bottom.
Variation 3
This concept includes default ideas and an expanded template, making it easier for users to view the available features.
Variation 4
This concept offers a clearer solution. The left sidebar serves as a dedicated functional area and can be collapsed when not in use.
Generation Bar Design Iteration
Design direction
After discussion, the decision was made to proceed with variation 4 and continue refining this approach, adding a dark mode and specific features to it.
Conflict
The PM proposed focusing on a more text-based design approach, which can reduce development costs in the default ideas section.
Solution
Based on the requirements, it was decided to keep the template prompt idea and relocate the history panel to a different access point.
Generation Bar Design Outcome
History panel findings
Another feature I want to introduce is the history panel, which allows users to access and make changes. However, the previous panel only focused on coding, and non-design history was not included, making it not user-friendly enough.
01
Users without a coding background cannot access it. The history panel is not useful for non-coders. Users still want to see and track the elements they have changed.
02
The current history panel is overloaded with information, making it difficult to access and locate specific design elements. Users have to spend a long time finding the corresponding elements.
03
The developer noted that despite the panel's focus on coders, unclear information hierarchy impacts usability. They prefer interface patterns similar to traditional coding tools.
History Panel Design Iteration
Before
The original history panel is designed exclusively for developers or coders to use. While users can view their previous changes, they cannot modify specific elements.
Variation 1
This concept separates major version changes and specific style changes into two sections, with the right side allowing users to monitor the changes they have made.
Variation 2
The user's profile picture appears next to modified elements in this version, with visible previous design and code. However, it adds complexity when multiple people edit specific elements.
Variation 3
This approach to displaying the previous design is different. Users can compare two designs as they scroll. However, this approach will take up a lot of space within the panel.
Variation 4
The design panel and coding panel are displayed in parallel, with coding history corresponding to design history. Major changes are also highlighted with dots in this variation.
Generation Bar Design Iteration
Original Design
Initially, we proposed using pop-up windows for the history panel.
However, the PM mentioned that to lower development costs and reduce loading times, we decided to reuse the current page layout.
Method
After communicating with the project manager and stakeholders, we refined the information architecture and selected the one with lower development costs.
History Panel Design Outcome
Challenge
Design Effectively While Balancing Trade-Offs
While we will offer a variety of proposals as alternative options, the developers must also consider the development costs. Therefore, we need to continuously adjust the design to find a compromise that ensures a seamless user experience without overly complicating the development process.
Recognizing the Importance of Managing a Design System
The company needed a design system, so we created one while designing new products to standardize future projects. This system helps designers and was built from scratch. We also ensured it can be used by users in the future.
Aligning PM Expectations with Delivery
The PM frequently proposes new requirements, which we need to prioritize and design accordingly. We must translate the PM's requests into a designer's perspective while ensuring our communication meets the PM's expectations.
Takeaway
The Importance of Background Knowledge
Investing time to understand diverse backgrounds is crucial. Early on, I learned Tailwind CSS to improve communication with the PM and gain deeper insights into the product.
Managing Evolving Design Requirements
As design requirements evolve throughout the project, it's crucial to schedule weekly updates, deliver timely reports, and request necessary resources to drive project advancement effectively.
Document Preparation During Product Development
Throughout the design process, documenting each meeting is essential for future reference and ensuring the project progresses smoothly.