Adobe Firefly A.I. Plugin for Microsoft Teams
Adobe’s text-to-image A.I. generator inside Microsoft Teams
Goal: Improve texting by enabling coworkers to quickly visualize their ideas through generative A.I.
Project Details
2023 Adobe Employee Hackathon, challenge given to Adobe employees in North America, Europe, and India.
Duration
2 months
Team
2 Software Engineers
1 Data Engineer
Skills
Illustrator
Photoshop
Figma
Public Speaking
Achievements
Pioneered an A.I. business expansion opportunity for the company
Identified and resolved three critical API bugs.
Delivered a 5-minute presentation to an audience of 200 panel guests and c-suite judges
TLDR Summary
Designed an end-to-end product using Figma and Illustrator
Utilized my programming background to communicate and collaborate with engineers
Video Demo
Discovery
Starting the project:
To explore Firefly's utility, I conducted interviews with colleagues to identify gaps in workplace communication.
User Research
I distributed a survey to 20 members of our Adobe AOMF enterprise sales team, seeking their insights and experiences to guide our project direction
Our survey identified a gap in image-based communication among Adobe's sales engineers. Employees felt they had ideas to express in images, but not the tools to do so.
User Personas
Using our data insights, I created user personas to better understand our target audience, ensuring our designs meet their specific behaviors, needs, and motivations.
I crafted user personas inspired by my colleagues at Adobe
User Stories
I then consulted ChatGPT to create practical user scenarios, focusing on capturing a relevant use case for our product.
Feedback on our initial script revealed it was too long. I then revised the story while keeping its core—organizing a pizza party.
Product
Question: What do we prototype?
With deeper audience insights, next in our quest was to design a prototype. A couple of options considering:
Build an app using Javascript, CSS, React
Develop a plugin within an exisitng platform
I recommended to my engineers to use an existing platform to meet our goals and timelines efficiently.
There is no need to reinvent the wheel
Affinity Mapping
We engaged in an affinity mapping session to select the right platform for our product.
I chose to integrate our product with an existing platform to conserve time and resources. I now faced the critical decision of selecting the most suitable platform. Below is a competitive analysis of our top three choices.
Slack
Usage: Popular at tech companies for professional and social
Upside: Integrating Firefly could expand user base.
Downside: Lacks established API for development.
Discord
Usage: From gaming hub to diverse community platform.
Upside: A.I. meme generation aligns with user habits
Downside: May appear unprofessional due to entertainment focus.
Microsoft Teams
Usage: Default tool for messaging, meetings, and calls at Adobe
Upside: Offers development API. Being the official tool, could gain leadership support
Downside: Perceived as uncool due to corporate feel; lacks playful design and social communities of Slack.
Decision
After evaluation, I selected Microsoft Teams for its strong developer support. As Adobe's official messaging platform, a Teams' integration promises higher chances of success. The platform's perceived lack of "coolness" actually complements our aim to enhance messaging experiences, turning a drawback into a strategic advantage.
Wireframes and Sketches
Navigating this phase proved challenging with the endless possibilities. Crafting a persuasive board presentation and pinpointing our plugin's exact integration within Microsoft Teams added layers of complexity, essential for realizing our vision and ensuring project success.
sketches drawn by me using pen and paper
Design Prototype
Designing our prototype involved crucial visual and functional decisions. We reviewed the 6 layout sketches.
Functionality was prioritized, leading us to incorporate the Firefly plugin into Microsoft Teams' toolbar. This choice aligned with our efficiency and intuitiveness goals, reflected in sketch 5 from our above series.
The sketch went with
Sketch 5. The chatbar pop out window option
Wireframe
After deciding on Sketch 5, I created a visualization to present to our stakeholders for feedback
Icon Choice
Choosing the right iconography for "Firefly" involved deciding between the iconic Adobe logo and a custom Firefly logo featuring a stylized hummingbird. Each option had its unique branding implications and visual resonance.
Adobe Company Logo
Firefly Product Logo
I went for the Adobe Company Logo due to its broad recognition and familiarity, which aids in user understanding and comfort.
Prototype Mockups
I then created mockups using Photoshop to present to our stakeholders. I also encourage you to check out the demo video at the beginning of this case study.
Mockup made in Photoshop instead of Figma because I found a template that saves time
Outcome and Reflection
Throughout this project, we documented specific limitations within Firefly’s API including:
The API's image generation is capped at three, and its processing of branded content is inaccurate.
It frequently returns a 500 error when dealing with proper nouns.
It has a tendency to misspell text and misrepresent human and object anatomy.
We presented this project in a keynote presentation on the morning of 11/2/23 at 8am. 5 of our colleagues came to watch. The project highlighted Firefly's API potential and opened new doors for A.I. in workplace communication.
Working on a product end-to-end enhanced my understanding of design thinking. Collaborating closely with engineers highlighted the synergy between programming and design for product success and a vibrant team culture. Looking to the future, I want to continue building products collaboratively.
Other Projects