Teed is an AI-powered platform that preps your codebase by predicting your code changes and providing you with tools for seamless implementation, reduced workload and faster development. View live website 🌐
My Responsibilities
User research, personas, storyboarding, sketches, prototyping, high-fidelity designing.
Year
2023-Present
Tools
Figma, Miro, Notion, Whimsical
Project context
Codebase for many project and product can be large and it requires continuous development, maintenance and multiple team members. Building new apps, features and fixing bugs can be a robust process of trying where changes needs to be made, what changes needs to be made and how those changes impacts other parts of the code base.
The goal of the project was to explore and design an advanced desktop tool that enables developers and designers to effortlessly build product and work with existing codebase more efficiently by simply defining their desired outcomes while the tool preps their workspace with the necessary resources and provides them with necessary tools needed to complete tasks.
The tool should help streamline product development, as well as support the maintenance and iteration process of application design, leveraging modern tool to minimize complexity, fragility, and time consumption associated with code updates.
Challenge
The primary challenge was to design a more collaborative tool where developers can use AI to build and maintain their product but still being in control when it comes to how code it generated, and how code it written.
The tool also needs to also seamlessly integrate into the current or existing workflow and workspace of developers and designers; meaning the desktop app should feel familiar, look familiar and work in a way that adopts how developers work.
As one of the greatest value proposition for users, users should experience reduced workload while developing their product, and should also be able to easily collaborate with AI through the chat and the new UI to implement new changes on their product.
Solution
The process started without knowing what exactly the solution was going to be or look like, but after several secondary research and ideation, I settled on designing for a native desktop experience as it provides a good foundation to build a solution that makes it easy for user’s to integrate the new tool into their existing workflow and workspace.
The solution also involved designing a tool that leverages the way developers already work, and supercharging that experience, this means adding an issue board and designing for a collaborative approach when making updates.
Proof of Concept for the Teed UX Design
Research
In the conception stage, I start by assessing the problem space, user workflows, existing tools, and market trends. I identified an opportunity to build a tool leveraging GAI, as potential users were already experimenting with GAI tools. However, current GAI tools lacked a natural user experience and didn't address the main problem.
Most GAI tools were designed to be developer companions, focusing more on good code practices. I saw a chance to create a tool that helps developers and designers collaborate with GAI more effectively, maintaining their workflow and focusing on outcomes with business value.
The research helped to understand how best to:
- Position the product on the market considering the competitive view, voice of the customer (VOC), and threats of substitution.
- Communicate and acquire customers.
- What specific features are necessary for a successful launch.
Understanding the why and defining the audience
Every successful product begins with a clear understanding of the "why" behind its creation. For Teed, this meant delving deep into the fundamental reasons why developers and product teams face hurdles in their workflows. Identifying these pain points was crucial as it provided a solid foundation for building a product that truly addressed the needs of our users.
By focusing on the "why," we were able to define a clear vision for Teed: to create a seamless and efficient development environment that eliminates common obstacles and accelerates innovation. This vision guided every decision we made throughout the project, from the initial concept to the final design.
Understand the customer's context and needs (When and Where)
To build a successful product, it is crucial to understand the specific contexts and needs of the customers, which involves identifying when and where they encounter problems that our solution can address.
- When
- During Development Cycles
- While Managing Tasks
- Facing Tight Deadlines
- Where
- Within Their Development Ecosystem
- In Collaborative Settings
List ideas (What)
During the development of Teed, a crucial step was brainstorming and listing out various ideas that could address the identified challenges faced by developers and project managers. This ideation phase was integral to ensuring that we built a tool that truly meets the needs of our users.
- AI-Driven Code Suggestions
- Seamless Integration with Kanban Boards
- Learning from Existing Codebases
- Cross-Platform Compatibility
- Customizable User Experience
- Secure and Private Codebase
- Real-Time Collaboration Features
- Automated Branch Creation and Management
- Integration with GitHub
By listing and evaluating these ideas, we were able to focus on the most impactful features that would make Teed an indispensable tool for developers and designers. This ideation process was crucial in shaping the final product and ensuring it met the real needs of our users.
Storyboard
I created a storyboard for Teed that visually narrates the user journey, highlighting key features and benefits. It effectively communicates Teed's value proposition and its potential to transform product development.
User tasks
Understanding user tasks was essential in shaping the user experience for Teed. By defining user tasks, we were able to prioritize features and design elements that directly addressed the users' needs. This ensured that Teed provided a seamless and intuitive experience, enabling users to achieve their objectives efficiently.
- Adding a task to kanban together with any relevant files
- Reviewing AI-suggested files and code changes
- Customizing code suggestions
- Approving, improving and merging code
- Tracking task progress
- Testing and finalizing code
- Publishing updates
Speed sketching
Sketching played a crucial role in the UX design process for Teed. These initial sketches allowed me to quickly explore and visualize different design concepts and ideas.
They served as a foundation for my creative thinking, enabling me to iterate rapidly and make informed decisions before moving on to more detailed prototypes.
Measure success (How)
In this project, I focused on defining and tracking key success metrics to ensure our product met both internal and external goals. This involved setting clear, actionable measures across multiple areas:
Conclusion and final thoughts
To address the challenges faced by developers and project managers in maintaining and iterating on their codebases efficiently, we created Teed, an AI-driven tool that seamlessly integrates into existing development workflows. A tool that can prep the workspace for developers and designers to do their best work.
Creating Teed has been a journey of understanding the core needs of developers and project managers, recognizing their pain points, and delivering a solution that is both innovative and practical. By maintaining a user-centric approach, we ensured that the product not only meets but exceeds expectations. The emphasis on seamless integration, security, and efficiency highlights our commitment to transforming the development landscape. As we move forward, we remain dedicated to refining and expanding Teed's capabilities, ensuring it continues to provide exceptional value and supports the evolving needs of our users.
Designing a new UI for Teed after the PoC has been finalized was an essential step to enhance user experience, plan ahead for developing for cross-functional platforms and ensure that the product meets the high standards of usability and efficiency our users expect.
I started working on a new UI design for Teed using new design principles, color schemes, typography, components and layout that while developing a custom design system on an existing one.
