Adobe Firefly for Microsoft Teams

Achievements

• Pioneered A.I. business expansion for Adobe and Microsoft

• Delivered 5-minute presentation to 200 audience guests and c-suite judges

• Discovered and reported 3 API bugs.

TLDR Summary

• Architected and designed fully functional SaaS product

• Utilized programming knowledge to collaborate with engineers

• Organized coworkers to participate in competition

Discovery

User Research

I surveyed 20 members of our Adobe AOMF enterprise sales team to gather insights into their workflows and challenges. This feedback was essential for identifying areas where our tools could be improved to better support the team’s needs. The survey provided valuable data, helping us make informed decisions to optimize processes, enhance collaboration, and improve overall efficiency, ensuring that our solutions align with the team’s objectives and workflow.

My survey identified a significant gap in image communication among Adobe professionals, highlighting challenges in quickly and effectively conveying visual ideas across teams. This insight revealed an opportunity to enhance collaboration by improving how images are shared, interpreted, and created, ensuring that visual content is seamlessly integrated into workflows and aligns with the team's communication needs. Addressing this gap can streamline processes, foster clearer communication, and ultimately improve overall productivity within Adobe's professional teams.

Employees often have creative ideas they want to visually express, but lack an efficient method to quickly generate and share those visuals. This gap creates a bottleneck in communication, as employees are unable to convey their concepts in real-time, hindering collaboration and slowing down workflow. Addressing this issue by providing an intuitive, fast solution for visual expression could significantly enhance communication, streamline the ideation process, and improve overall team productivity.

User Personas

I created detailed user personas to gain a deeper understanding of our target audience, helping to identify their needs, behaviors, and pain points. These personas allowed us to humanize the data and tailor our design decisions to better align with the specific goals and preferences of our users. By mapping out the characteristics of our audience, we were able to make more informed, user-centered choices that ensured the final product resonated with the people it was meant to serve, ultimately enhancing the overall user experience.

User Stories

I consulted ChatGPT to generate practical user scenarios that helped visualize how our target audience would interact with the product in real-world settings. By leveraging AI-driven insights, I was able to explore various use cases and anticipate potential challenges users might face. This allowed me to design more intuitive and effective solutions tailored to users' needs, ensuring a smoother and more engaging experience. These scenarios also helped guide decision-making, aligning the product design with realistic user expectations and improving overall usability.

Stakeholder feedback revealed that the script was too long and needed to be more concise. To address this, I streamlined the content by eliminating redundancies and focusing on key messages. This revision made the script more impactful and easier to follow, ensuring that it effectively communicated the core ideas while respecting the audience’s time and attention. By condensing the script, I improved its clarity and enhanced its overall effectiveness in delivering the intended message.

Product

Question: How to prototype?

Options:

• Build using Javascript, CSS, React

• Develop plugin within an existing platform

I recommended to my engineers to use an existing platform to meet our goals efficiently.

There is no need to reinvent the wheel

Affinity Mapping

We engaged in an affinity mapping session to organize and prioritize key insights, which helped us select the right platform for our project. This collaborative process involved grouping related ideas and themes, allowing the team to visually assess and compare various options. By identifying patterns and aligning our choices with user needs and project goals, we were able to make an informed decision on the most suitable platform, ensuring that it supported both our short-term requirements and long-term vision for success.

Competitive analysis of top 3 choices.

Decision

I selected Microsoft Teams as the platform for our project due to its strong developer support and the fact that it is Adobe’s official platform, which significantly increases the likelihood of buy-in from stakeholders. Additionally, Teams’ perceived lack of "coolness" actually aligns with our goal of enhancing workplace messaging rather than focusing on trendy, superficial features. This focus on functionality and productivity ensures that the platform serves as a solid foundation for improving communication, while its widespread adoption within enterprises further supports its long-term viability and potential for scaling.

Sketches and Wireframe

Icon Choice

Choosing the right iconography for "Firefly x Teams" involved extensive discussion to ensure the design aligned with both Adobe’s branding and Microsoft Teams’ established visual language. We carefully considered elements that would resonate with users while maintaining a clean, professional aesthetic. The icon needed to represent the integration of generative AI with collaboration tools in a way that felt both intuitive and visually appealing. Through collaborative brainstorming and feedback from stakeholders, we ultimately selected an icon that balanced creativity and simplicity, effectively communicating the tool’s purpose while seamlessly fitting into the Teams environment.

We chose the iconic Adobe Company Logo as the main icon to represent Adobe's product in the Teams UI. This decision was based on the need for immediate brand recognition and trust, as the Adobe logo is universally associated with creativity, design, and innovation. By using this well-established symbol, we ensured that users would instantly identify the integration as a trusted Adobe solution within the Teams environment. The simplicity and recognizability of the logo also allowed the design to seamlessly fit within the Teams interface, maintaining a clean, professional look while clearly indicating Adobe’s presence and functionality.

Prototype Mockups

Here are the mockups showcasing the design and functionality of the Firefly x Teams integration. I also encourage you to check out the demo video at the beginning of this case study, where you can see the platform in action. The video provides a detailed walkthrough of how the integration works in real-time, highlighting key features and demonstrating the seamless user experience. It serves as a valuable visual reference to help you better understand the design choices and the overall impact on the user journey.

Outcome and Reflection
API limitations discovered: 

• Image generation capped at 3; processing of branded content inaccurate.

• Returns a 500 error dealing with proper nouns.

• Tendency to misspell text and misrepresent human anatomy.

I had the opportunity to present this project to over 200 people, with 5 of our colleagues attending to support the initiative. The presentation showcased the potential of Firefly's API, demonstrating how its integration could transform workplace communication. It highlighted the innovative role of AI in enhancing team collaboration and opened up new possibilities for improving productivity through seamless visual communication. This project exemplifies the powerful synergy between programming and design, showing how both disciplines contribute to the success of a product and foster a vibrant team culture. Moving forward, I’m excited to continue building products collaboratively, leveraging the intersection of technology and design to create impactful solutions.

Other Projects