Our client approached us with two primary objectives:
‍
Objective 1 : Creating a responsive styling panel
Objective 2 : Implementing AI Iteration & Prompt History.

Before our first kickoff meeting, we took several steps to ensure we had a solid foundation for delivering a high-quality output. First, we got familiar with both Tailwind CSS and the Tempo framework structure, allowing us to gain a basic understanding of the technology we'd be working with.

Once we received access to internal test accounts, our team individually conducted design audits on Tempo. This deep dive helped us identify key usability issues early on, setting the stage for thoughtful, user-centered improvements as we moved forward. These efforts provided essential context for the project, ensuring we were well-prepared to deliver exceptional results from the very start.

screenshots from our initial design audits, where we identified potential usability issues and shared key insights based on our assumptions

To further understand the underlying usability issues and justify our initial assumptions, we drafted a detailed user research plan consisting of six task flows and a blue sky script for our initial usability testing. We interviewed 25 potential users, including 12 developers and 13 designers who have basic React and Figma knowledge. Each interview session lasted between 1.5 to 2 hours, during which we documented the users' behavior, thought process, and expectations. We believe their insights provide valuable feedback for our future design process.

As we analyzed the insights from our usability testing, it became clear that the original project scope wouldn't fully address the critical issues users faced and may cause beta launch unprepared. The feedback from developers and designers revealed deeper usability challenges that needed attention to improve the overall experience.
We presented these findings to stakeholders, highlighting how expanding the scope would lead to a more intuitive product and long-term user satisfaction. As a result, we successfully convinced them to support the expanded project scope, ensuring we could deliver a product that truly met user needs.

Our team become more agile after expanding the scope to ensure the final design balances both user satisfaction and business objectives.

During our research phase, we discovered that users struggled to locate and effectively use the AI generation tool, which is a core feature of Tempo. To improve visibility and encourage AI usage throughout all stages, we redesigned the AI bar as a persistent floating element, prioritizing its accessibility and prominence.

Based on our design decisions, we mapped out our desired Tempo’s IA to see how the acts and functions work for users. It serves as a blueprint for digital products and displays pages, content, interactions, and behaviors for the entire user flow. Since different features are closely related to each other, we decided to rework and divide new Tempo into five different key sections.

The sketching process involved creating over 150+ screens in a variety of user flows, case scenarios, and different design explorations. We choose to develop mid-fidelity sketches to strengthen our relationship with our client, and allow us to gain feedback and approval from both our client and development team from early on. These sketches contained enough detail to visualize functionality without getting bogged down in high-fidelity elements.

Since our team has multiple designers, Figma allows us to receive comments from team members in real-time, which is essential during the exploratory phases of design.

At first, each of us designers on our team sketched independently to generate a broad range of ideas. But as we moved forward, it became clear that we needed a way to unify these concepts into a cohesive design. Additionally, the client requested that we prioritize dark mode as the default, which added another layer of complexity to our design process.

Since I was responsible for managing our team's design system, I gathered the team to align on the style we wanted to move forward with. After agreeing on the selected direction, each designer took ownership of a specific section, and I began building the design system from the ground up, starting with the foundational elements. Once the basic components were in place and stable, I shifted focus to refining the system, preparing it for future revisions. This iterative process allowed us to remain flexible and responsive to feedback.

“ We need to find a way to unify our thoughts and push our rough sketches into polished prototypes.”

As a pivotal feature of Tempo, the ability to generate both designs and code simultaneously using GPT-4 AI is a key differentiator. Our primary goal is to highlight this core functionality and encourage users to adopt it as their main tool within the platform. However, current feedback shows that users struggle to locate the feature and are unclear about the types of generation Tempo can perform, leading to confusion and underutilization.

At the same time, our stakeholder has repeatedly emphasized the need to encourage users to type more and rely on fewer clicks throughout the process. Taking this feedback into account, along with insights from users, we have implemented the following changes to meet both stakeholder requirements and user needs:

• Separated the AI input box from the toolbar, making it a persistent element at the bottom of the page.
  We have addressed this change when we restructured IA.
• Simplified the use of icons and reorganized the layout of the input box for better clarity.
• Added auto-generated prompts to provide users with helpful suggestions.

The primary objective of these design changes was to enhance user satisfaction when making style adjustments. Based on prior research, we identified key pain points, including user confusion due to a cluttered layout and ambiguous iconography. After multiple iterations and extensive user testing, the new design effectively addresses these challenges by :

1. Improving the clarity of visual elements such as wording and icons
2. Streamlining the interface to make it more familiar for new users.

This solution ensures a smoother, more user-friendly experience, directly targeting the issues identified in the research phase.

The Tailwind CSS class selector instantly applies styles while automatically generating the corresponding code behind the scenes. We’ve redesigned the visual interface to ensure a seamless experience for both designers and developers. By making the Tailwind CSS class selection button visible on all relevant elements, users can easily see where and which CSS styles have been applied, providing clarity and efficiency in the design process.

Creating a breakpoint management tool was a key part of the initial design scope and one of the top priorities for our stakeholder. The MVP included a demonstration of how the responsive breakpoints function, but it lacked clear visibility and discoverability. With no additional cues or guidance, users found it difficult to locate and fully utilize the feature, impacting its usability and overall effectiveness.

To create a stronger connection with users by aligning with their familiar behaviors when using editor tools, we strategically placed the breakpoint management feature in two locations. These placements were chosen to enhance usability and seamlessly fit into users' existing workflows.

• Placed in frame top bar where users are accustomed to managing key design elements.
• Placed in upper section of the styling panel, ensuring easy access within the context of styling adjustments.

Another key request by stakeholder is to design an effective version control system. This is a critical feature, as version control is essential for any web editor. The stakeholder wants this functionality to be prioritized and refined as soon as possible. The current MVP has several functional shortcomings, such as confusing and unclear naming conventions, as well as relying solely on coding-based version control. Users are unable to visually track or review previous changes.

Because the MVP lacked many important features and differed somewhat from expectations, we explored multiple approaches for this functionality. In the early stages, we presented several design solutions to the stakeholders to demonstrate both design and code changes. However, in subsequent meetings, the stakeholders indicated that, due to time constraints, the developers needed to reuse as many existing elements as possible to implement this version control. Therefore, our final design solution incorporated previously used design elements to expedite the release of the feature while maintaining good usability. It’s worth noting that although many of our initial designs were discarded, some of our ideas were later added in subsequent revisions and successfully implemented.

Subsequently, during the process of designing the final version, we focused on two key aspects:

• Enabling users to better organize and navigate the various changes they made.
• Ensuring that our development team could implement this function efficiently.