Pyxer is a generative AI photo editing & fashion app where users can edit their outfits in photos and shop similar looks from real brands. As the UI/UX design intern, I designed a messaging platform feature with an integrated AI chatbot to ultimately foster user engagement and retention.
TIMELINE
2 weeks (July 2024)
ROLE
UX Design Intern
TEAM
1 Lead Designer (me!)
2 Engineers
1 Product Manager
SKILLS
Interaction Design
Design Systems
Product Strategy
Challenge
Pyxer currently consists of only independent user actions involving visual AI generations. There is potential to maximize user engagement and retention by fostering interactivity with other users, while still highlighting Pyxer's AI features.
How might we seamlessly integrate Pyxer’s main AI features into a new communication platform, all while under a tight timeline for handoff?
Results
As the lead designer for this project, I handed off a minimum viable messaging platform with an integrated AI chatbot feature from 0 to 1.
My designs are currently in development and is set to launch in Fall 2024.
INTRO / FINAL DESIGNS
Fostering seamless interactivity between both users and AI.
An MVF messaging platform with an integrated AI chatbot.
Create group chats with other Pyxer users
Find users through your contacts and create the perfect group chat to discuss AI photo edits and looks.
Frictionless introduction to the AI chatbot
Easily discover, access, & trigger Pyxer's AI capabilities through guided prompts and shortcuts.
Edit photos & shop for looks during your conversation
Use AI within the comfort of your own chat—no need to waste time by exiting the chat to make edits or shop for similar looks.
CHAPTER 1 / PROBLEM SCOPE
The plan? Churn out a new feature for hand-off… scheduled for 2 weeks from now.
CONTEXT
What exactly is Pyxer?
Pyxer is a generative AI fashion photo editing app that helps users find their perfect look through AI clothing and accessories edits.
Pyxer also partners with real brands by recommending purchasable items and styles that are similar to the user's AI generated looks.
MVF GOALS & CONSTRAINTS
What are my goals as the lead designer?
As the lead designer, I was tasked to design an MVF version of messaging that integrates the app's core AI features, with the ultimate goal of boosting user engagement and retention after launch.
DESIGN GOAL
Flesh out the core features for messaging
Designing the most core, bare bones messaging features to allow for fast handoff.
DESIGN GOAL
Integrate the AI features
Designing seamless integration of Pyxer’s AI capabilities within messaging.
ULTIMATE MVF GOAL
Boost user engagement and retention
Designing ways for users to send more messages and create more AI generations.
CHAPTER 2 / RESEARCH
Figuring out where AI currently fits into communication.
COMPETITIVE AUDIT
First of all, how is AI integrated in chats in other apps?
With such a tight deadline, my user research efforts were severely limited. Thus, I began my research with a quick competitive audit of existing AI chatbots, in order to gain insight on how AI is triggered and used within conversations.
Although ChatGPT only caters to an individual user, I took note of its functionality due to its mass popularity.
FEATURE VALIDATION & USER INTERVIEWS
Turns out, Pyxer's AI should not be integrated the same as other apps
After researching into competitors, I had to remember that there is one key differentiator between those apps and Pyxer: Pyxer's main use case is for AI photo generations, not communication. Given this major key differentiator, I conducted 4 user interviews to gain insight on how users would utilize messaging specifically within Pyxer.
Unlike the apps mentioned above, users expect AI to play a much larger role within Pyxer's conversations, as it aligns with Pyxer's primary use case.
CHAPTER 3 / IDEATION
Defining how AI integration within Pyxer chats should look and feel like.
DESIGN APPROACH
Outlining how AI should be presented in chats
After gaining insight on the role AI should play within Pyxer conversations, I formulated a How Might We statement to clarify what this "larger" role should exactly prioritize.
HOW MIGHT WE…
empower users to seamlessly use AI in conversations through easy discoverability & accessibility?
In other words… maximizing AI engagement by helping users discover and access chatbot features with ease.
DESIGN STRATEGIES
Identifying the main tactics
In order to tackle discoverability and accessibility, I focused on 3 main strategies to achieve the overarching mission.
🎯 Easy + obvious trigger access
Motivate new users to start using the AI chatbot, and encourage retention in usage.
👌 Fluid experience + integration
Reduce as much friction as possible in both chatting and producing AI chatbot commands.
💡 Encourage user creativity + freedom
Inspire users to access the AI chatbot's full potential through limitless prompt exploration.
USER FLOW
Specifying all use and edge cases
Although I had severely limited time, I still set out to create user flows—this step was especially essential for informing the design system components I had to create. I scheduled conversations with my PM and engineers to solidify which features were possible and how flows should look like in every possible scenario.
CHAPTER 4 / EXPLORATIONS
Exploring the interplay between interaction design + information design
AI CHATBOT FUNCTIONALITY
Settling the debate between @, /, and natural language processing
I began my exploration by tackling how users address the AI to write prompts. After discussing with my team, we decided that we were able to spend higher technological efforts in order to prioritize natural language processing for more free-flowing AI-integrated conversations.
AI CHATBOT TRIGGERS
Providing easy access to the AI chatbot
With the functionality now figured out, I explored message bar iterations that would best highlight the discoverability and accessibility of the chatbot. I aimed to simplify the message bar, maintaining as much space for the text box as possible while easing access to the AI chatbot, camera, and photos.
INITIAL AI CHATBOT DISCOVERY
Introducing users to the AI chatbot for the first time
CONTINUOUS AI CHATBOT AWARENESS
Guiding users through AI chatbot usage
Eventually, users may forget the chatbot's capabilities and may require guidance. Thus, to encourage longer-term retention with the chatbot, I explored ways to gently remind users of possible prompt ideas.
CHAPTER 5 / DESIGN SYSTEM
Documenting the puzzle pieces together in one design system.
UI COMPONENTS
Assigning components for each use & edge case
Because I was also designing the messaging platform from scratch, a significant portion of my project involved creating & organizing components to account for every single use and edge case possible.
CONCLUSION / IMPACT
Successfully handed-off for development!
A LOOK INTO THE FUTURE
Coming soon in Fall 2024…
My designs are currently in development, and are projected to launch in Fall 2024. To measure post-launch impact, we'll be tracking daily active users and # of AI generations, as well as app downloads.
In the meantime, I've designed and shipped other features within Pyxer, resulting in massive growth in engagement and traction.
400%+
in AI generations
190%+
in app downloads
NEXT STEPS
What would I have done if I had more than one week?
AI generated polls
An initial idea I came up with to boost AI & user engagement—but ultimately postponed in the roadmap.
More usability tests
Due to the tight timeline, I was only able to conduct 3 usability tests for detecting major friction points.
AFTERWORD / LEARNINGS
Almost anything is technically feasible—deadlines & priorities are the true blockers.
REFLECTION
Just because you can, doesn't mean you should (for right now)
As the sole and lead designer with a talented team of engineers, it felt like I had so much power. I realized that virtually any design is possible to implement—if only deadlines, priorities, and business goals didn't exist.
With such little time to design, I learned to prioritize the most impactful design decisions, even if it meant sacrificing ideas and traditional steps in the design process.
