The Problem
How might we support non-technical users in creating AI prompts?
The overall prompt creation experience lacks necessary context and guidance for non-technical users, leaving them confused and frustrated with their user experience. The design challenge was to improve usability while ensuring that additional support features don't overwhelm technical power-users.
Ideation: 1st iteration
Reducing cognitive load with a wizard flow
Terms like "Temperature, Top P, System Context, and Blocks" are all unfamiliar to non-technical users with no background in prompt engineering. The wizard flow helps to break up the necessary context required to empower non-technical users to use these features efficiently and effectively.
Stakeholder Feedback
Product Managers & Engineers said:
"Having so many steps across different pages would frustrate technical users who already know their way around prompt engineering terminology and settings."
"Only power users and technical experts will be adjusting LLM settings, most non-technical users will keep the default settings and only adjust the model."
Ideation: 2nd iteration
Pivoting to explore new solutions
Based on the stakeholder feedback, we realized the wizard flow solution would not meet the pain points of our audience's varying levels of technical experience with AI tools. We pivoted away from this solution and implemented the targeted changes:
1. Tooltips for contextual guidance and improved UX writing for greater clarity
2. Enhanced visual hierarchy to streamline the creation process for novice and advanced users
3. Added confirmation pop-ups to mitigate risks during critical actions
4. Revamped Calls to Action to support progress-saving and clearly communicate status within the user flow
Usability Testing
Talking to real users to gather insights
We conducted usability tests with two users and found that users struggled to differentiate input sections affecting prompt performance, confusing "Prompt Description" with "System Context." To address this, we improved the visual separation between descriptor elements and key input fields, clarifying their distinct roles.
Developing new UI
User Interface Improvements
Final Designs
Our journey led us to the following solutions
01. Tooltips & Default Text
Tooltips and default text provide clear, contextual explanations and examples for complex fields like "Variables", "Blocks", and "Variations" empowering users to understand and confidently interact with the tool without external guidance.
02. Establishing Visual Hierarchy
The Variable input fields are now grouped into the System Context card since they directly affect prompt behavior. Spacing was added between Prompt Descriptors and the System Context to distinguish informational fields from actionable ones. This reorganization makes the interface cleaner and more intuitive for users.
03. LLM Model Selection Redesign
The original model dropdown allowed users to select models that they did not have access to. The redesigned drop down clearly communicates which models users can test with and which ones they need API keys for.
Reflections
Takeaways from this project included:
Cross Collaboration
Meaningfully collaborating with stakeholders such as product managers, engineers, marketing teams, and users to ensure that designs aligned with business and user needs.
Jobs to Be Done Framework
Applied JTBD to identify users' core tasks and motivations, to design more efficient solutions that enhanced the product's overall usability.
Communicating Design Decisions
Regularly presented designs to cross functional teams through weekly standups & regularly sought out feedback.
Agile Development
Collaborated closely with cross-functional teams to iteratively design, test, and refine product features based on user feedback and changing requirements.
View More Work
