The GenAI Compass: a UX framework to design generative AI experiences

[unable to retrieve full-text content]

Patterns for implementing human-centric design thinking and UX to GenAI

Illustration of a compass in a topographical map depicting the complexity of navigating rugged terrain as an analogy for generative AI user experiences

Generative AI is reshaping the landscape of design, ushering us into an era where deeply individualized user experiences become the norm. Personalization reaches beyond the tailored, transcending into the realm of the deeply individualized, fostering one-on-one connections at scale — true hyper-personalization. I’m not calling for the abandonment of established design principles but for their evolution, to harness the potential of GenAI in a human-centric way.

My explorations into user experiences specific for generative AI culminated in the Generative AI Design Compass, a framework born out of practical insights into anchoring GenAI within human-centric design. It’s a tool that reflects my journey to understand how to anchor this technology within the right human context, ensuring that it enriches, not complicates, our interaction with the digital world.

I believe in a world where machines can assist and augment our abilities seamlessly, not replace them.

This framework emerges from a need for a more targeted approach, steering clear from yet complimenting the paths of traditional design thinking. Grounding in ethical mindfulness, user empathy, and a spirit of innovation. With the compass in hand, we are equipped to chart a course through the dynamic terrain of GenAI, where the user remains at the core of every experience we develop.

Consider your most recent interaction with AI — was it distinguishable, a chatbot interface, or was it a more nuanced presence, silently orchestrating your digital experience?

Often, generative AI’s efficacy is gauged by its subtlety, its ability to integrate so seamlessly into our lives that its absence becomes the only indicator of its previous engagement. To me it’s this experience that feels seamless that is where the true value lies.

The compass is more than a guide; it’s a distillation of real-world insights and success stories, a narrative of patterns and approaches that resonate across industries following on my earlier work on architectural patterns for developers. It’s a blueprint for designers who aspire to blend generative AI into their work harmoniously, ensuring that each interaction feels intuitive, meaningful, and distinctly human.

As we delve deeper into each dimension of the compass, we’ll unpack the mechanics behind the framework, highlighting practical strategies and examples that bring these concepts to life for product designers, managers, and all those who shape the user experiences of tomorrow.

Table of Contents

  1. Introducing the Framework
  2. Discovery Dime: Engaging the Curious Minds
  3. Assisting Dimension: Navigating the User Path
  4. Exploration Dimension: Cultivating Creativity
  5. Refinement Dimension: Crafting Precision
  6. Trust Dimension: Ensuring Confidence
  7. Mastery Dimension: Deeper Integration
  8. Key Takeaways and Future Considerations

Unveiling the Framework

The journey through the Generative AI Design Compass is a methodical one, structured to balance the innovative momentum of generative AI with the foundations of intuitive, ethical, and empowering design. Here, we introduce six pivotal dimensions that anchor our interaction with GenAI, each encapsulating a phase from initial curiosity to the mastery of generative AI applications.

Generative AI Design Compass — A UI and UX framework from Vincent Koc and Hyperthink for developing the right UX for GenAI. Framework is a summary of 6 key dimensions.
The Generative AI Design Compass — Vincent Koc & Hyperthink

The framework’s dimensions, while interconnected, provide designers with the flexibility to engage with GenAI with any of these dimension independently, ensuring relevance to a variety of products and services. Not all dimensions will apply to all experiences, products and services and nor should they.

An illustration of an iceberg, depicting there is lots of features under the sea and under the UX for generative AI

1: Discovery Dimension — Engaging Curious Minds

Initiate the GenAI experience with an invitation to curiosity, presenting the AI’s potential through relatable and simple interactions that encourage further exploration. This Discovery dimension employs the Iceberg Principle, presenting GenAI as a gateway to new possibilities without daunting users with its underlying complexity. The art here lies in capturing interest and fostering comprehension without delving into the depths of technicalities that GenAI encompasses.

Color Scheme & Iconography

GenAI is introduced through a visual language that captivates and demystifies, making its presence both noticeable and seamless within the user environment, using color schemes and symbols that make it stand out yet feel inherently part of the user environment. It’s about making GenAI approachable and recognizable at first glance.

Logos and Branding of Google Deepmind and Apple Siri Depicting Orbs. Notion AI using “Purple” on all its iconography with AI

Companies are using color and iconography as a signal to users that something is AI vs non-AI or human — Technology implementations following this pattern can also help users understand where AI is in use.

Besides colors use of certain emojis have been taken on by brands. 🤖 Robots depicting agents and bots, ✨ + 🪄Magic depicting AI and 🔮 Crystal orbs as another depiction of AI such as OpenAI and Siri

Name & Branding

By assigning a distinctive name or branding to GenAI features, this strategy aims to personalize and distinguish GenAI — it’s about creating an identity that users can connect with.

Salesforce “Einstein”, Miro “Assist” and Canva’s “Magic Studio”

It’s the difference between calling an AI-powered design tool “Magic Design Assistant” versus a sterile “Design Tool 5.0”. The former, much like Canva’s Magic Studio, promises an experience; the latter, merely a function. We are starting to see the proliferation of “assistants” and “co-pilots” as common terminology to AI services.

Magic Moments

Introducing GenAI’s capabilities through “Magic Moments” — those instances of unexpected delight that showcase the power of AI in solving user problems.

Side by Side — Grammarly’s AI Assistant and Arc Browsers “Browse for Me” Feature

Grammarly’s real-time writing assistance that not only corrects but educates going beyond expectations. Arc a new AI powered browser uses a number of intuitive methods along a users existing journey to introduce AI summary.

Consideration — Realistic Expectations

The challenge is to inspire without overwhelming. The introduction should be a careful blend of engagement and education, setting the stage for deeper interaction without creating false expectations. Just as Miro’s ‘Assist’ feature guides without overpowering, our aim is to foster intrigue and understanding in equal measure, ensuring that the allure of GenAI translates into a lasting relationship with the user. Focus on the user problem and how GenAI can help simplify this for the user.

Illustration of a butler and a magician heading it off depecting its a balance of ideas and complexity with UX when using Generative AI.

2: Assisting Dimension — Navigating the User Path

In the Assisting dimension, we carefully calibrate the guidance and autonomy offered to users, ensuring they feel supported yet free to explore GenAI’s capabilities. We empower users to independently explore GenAI’s potential, creating a dynamic that shifts from structured guidance to autonomous discovery. It’s a space where we nurture user independence while offering the scaffolding necessary for them to navigate the potential of GenAI confidently.

Cue’s

Subtle cues like nudges and suggestions are our compass needles here, pointing users toward deeper engagement with GenAI. These gentle suggestions are critical when your tool can do a zillion things with AI we can give intuitive cues like a guide that's ready to help users to these new features.

Providing contextual cue’s to generative AI features — Sources: LinkedIn and Hex Magic Feature

These can come as simple magic AI feature buttons to help complete a task like writing your LinkedIn post, or in a contextual point such as an error when you are writing your code as an engineer in the Hex editor example to magic fix your issue.

Templates & Examples

Structured templates and intutive examples can demystify GenAI, inviting users to interact and customize without requiring them to first become experts. These templates are like open doors to GenAI’s possibilities, allowing users to walk through and explore at their own pace.

Intutive suggestions or more in-depth examples through templates to guide users — Sources: Google Gemini and Jasper AI

For instance Google’s gemini starts users off with some example prompts, where as we have more in-depth templates from Jasper’s AI content writing tool guiding user towards a personalized creation without removing self-discovery.

Consideration — Ensure We Are Balancing Needs

We need to calibrate the balance between guiding and liberating our users. We must address their pain points with the right mix of assistance. The needs will change dependent on context and needs, such as elderly care AI focuses on simplicity and clear communication, while AI for legal professionals might prioritize depth and customization options.

As we craft these experiences, we constantly refer to the user’s feedback, iterating our designs to better serve their unique journeys. The GenAI experience should not be a one-size-fits-all solution but a selection of paths that users can navigate, aligning with their individual preferences, abilities, and objectives. This dimension is about giving users the map and the compass, empowering them to find their own north star in the GenAI landscape.

An illustration of a translucent digital and analogue machine made of gears, used to demonstrate the complexities of Generative AI can be exposed where it makes sense to users.

3: Exploration Dimension — Cultivating Creativity

At the heart of the Exploration dimension lies a clear yet profound purpose: to foster user autonomy and creativity with GenAI as a catalyst. This phase is like turning the gears of a transparent watch; every movement and cog is visible, unraveling the complexity and inspiring trust. By inviting users into the inner sanctum of GenAI’s workings, we encourage not just interaction but a genuine dialogue, unlocking an experience where innovation flourishes.

Blending and Synthesis

Encourage users to innovate with GenAI through tools that blend various inputs, unlocking a landscape of creativity that transcends traditional interfaces; instead, they are the composers of their experiences.

The multi-modal capabilities of tools like Brilliant Frame glasses or Midjourney’s in-painting provide a canvas where the only limit is imagination. These platforms demonstrate the versatility of GenAI, heroing the adaptability and possibility of human creativity.

Brilliant Frame Glasses for AI with AR, Midjourney Inpainting allowing us to blend with AI, and Rabbit R1 AI pocket companion with eyes.

These tools serve as the enablers within the exploration phase, inviting users to stretch their imagination and push the boundaries of conventional input. By enabling users to seamlessly combine prompts or integrate their inputs with GenAI’s capabilities, a new realm of innovative outcomes becomes accessible.

Conversational Dynamics

GenAI excels as a conversationalist, navigating the nuances of human dialogue from mirroring emotions to use of the right tone. It is in these exchanges — as fluid and natural as a chat with a trusted confidant — that GenAI can help users explore. The potential for a personalized AI coach, as seen in platforms like Rosebud, exemplifies this dynamic.

Here, the exchange is not merely transactional but transformative, guiding users to insights they might never have uncovered alone. Through open and adaptive dialogue, GenAI becomes a conversational partner, enhancing user interactions with a natural and intuitive exchange we naturally prefer.

An AI personal coach which is entirely a chat experience and feels like talking to a friend, and a chat agent experience which can carry out actions such as refunds instantly without the need for an agent— Source: Rosebud and Klarna

This approach emphasizes the fluidity of interaction between users and GenAI, facilitating a dialogue that can distill complex data into actionable insights or creative outputs. It’s about leveraging GenAI as a collaborative partner in the creative process, enhancing the user’s ability to generate unique content or instant solutions.

Consideration — Guiding Creative Journeys

We must ensure users feel anchored, not adrift. It is essential to equip them with navigational aids — intuitive tools and responsive feedback mechanisms that anchor their open-ended creative journeys. This care in design supports a journey that’s as rewarding as the destination, nurturing an environment where users are emboldened to take creative leaps toward innovation and discovery. Users can take creative risks, leading to unexpected discoveries and innovative solutions.

An illustration of a retro car with two seats and lots of buttons in the control, its about putting the user in the driver seat and giving control where it makes sense.

4: Refinement Dimension — Crafting Precision

The Refinement dimension represents a space where precision meets personalization. Here, the experience is sharpened, allowing users to sculpt GenAI interactions that resonate with their unique needs, experiences and expectations. This stage is where users can leverage GenAI’s adaptability to reflect their voice and style with meticulous detail.

Direct Control

Empower users with control over GenAI by providing intuitive customization options that align the AI’s output with their specific needs and vision, users are given the dials to fine-tune their GenAI interactions. Comparable to the careful adjustments one might make to a high-end camera to capture the perfect shot, these tools offer the granularity needed to ensure that the AI’s output is not just satisfactory, but exceptional.

Various Forms of Customization and Control of Generative AI — Sources: Open AI ChatGPT, Leonardo AIBlaze

We have a number of cases where this has been done at various levels. OpenAI’s Custom Instructions enable users to direct the AI with precision, leading to tailored responses that fit their specific context or requirements. Leonardo AI’s canvas allows you to paint what you want the AI to imagine and lastly Blaze allows you to fine tune the exact style, tone and output when generating content. All of these scenarios allow you to go beyond the initial AI synthesis to something more deeply personalized to the users needs.

Personal Voice & Modalities

The quest for a personalized experience culminates in the alignment of GenAI outputs with the user’s individual voice. It’s in this nuanced interplay that GenAI becomes less of a tool and more of a personal medium, an echo of the user’s own thinking and expression.

https://medium.com/media/68805fc4d47a0234887350c1b18e25a8/href

Lisa was a voice I co-created with ElevenLabs generative AI for a project called fieldstudy aimed to personalizing vast amounts of research papers into modalities that resonate with our personal needs. Even after this project I saw myself re-using this voice to help read complex research notes back to me for reflection. It’s as if I had recreated the scenes from the movie Her. I was looking for a way to almost export and take this voice and persona of Lisa into other AI tools.

https://medium.com/media/f224d3a43a889777e2dc5405fba8f0bb/href

By ensuring that GenAI outputs consistently reflect the user’s unique voice, tone, and style, this approach deeply personalizes the user experience. It’s as if the GenAI becomes an extension of the user themselves, capable of communicating in a manner that’s distinctly theirs.

Considerations — Controls Where and When Required

Foster a user experience where GenAI’s adaptability is blended with the user’s autonomy, creating a personalized and intuitive interaction to help them discover the optimal balance for their needs, enhancing their overall experience and satisfaction with GenAI enhanced interfaces. The trick here is to only allow for customization where it makes sense or in the right way. Users have the expectation that AI should already know them and their needs, how do we deliver on this?

An illustration of a translucent cube inside an AI machine which is meant to depict trust and transparency

5: Trust Dimension— Ensuring Confidence

Trust which is critical for any relationship, becomes more crucial when it intersects with GenAI. It’s about envisioning AI as an ally, akin to a universal assistant, built around a users existing workflow and expectations. The aim is to amplify capabilities subtly, enhancing without disrupting the ecosystem of the user experience with added friction. We want to give assurance and built trust through the process where and when it makes sense.

Managing Expectations

Emphasize the importance of transparency about GenAI’s limitations and risks, coupled with providing users the ability to adjust or even stop certain features. It’s about empowering users with knowledge and control, ensuring they can navigate their GenAI experience with confidence.

Warnings and ethical guardrails built into Generative AI language models. Links to further information — Source: Anthropic Claude and Open AI ChatGPT

This is not only about giving the ability to find out more or blocking certian requests but adding key messaging at the right points to manage the expectations of the user.

Traceability

Implementing mechanisms for ensuring users are able to see under the hood to a degree to ensure they can recreate or walk-back on their choices later and making the AI’s decision-making process collaborative. This collaborative approach reinforces accountability and trust, positioning users not just as consumers but as active contributors. It ensures users not only have a voice but also a clear understanding of how their input shapes GenAI interactions.

Source in-line and watermarking files from with the prompt — Source: Perplexity.ai and Midjourney

We have a number of examples where GenAI tools and platforms are showing their inner workings from Perplexity AI citing sources, to ChatGPT showing code that was run or Midjourney watermarking the filenames with parts of the prompt allowing you to walk back or peer inside the machine.

Graceful Degradation

Graceful degradation ensures that even when GenAI fails — be it due to data availability or resource constraints — the user experience remains resilient. This strategy is about anticipating the unforeseeable and embedding robustness into the design, guaranteeing that the user journey persists smoothly, irrespective of AI’s performance.

Ensuring your product or individual features that rely on AI provide useful output even when certain data or computing resources are unavailable, ensuring the user experience remains positive. We must consider how our service degrades gracefully where possible to offline or limited functionality through rules-based or simpler model perhaps, example a GenAI chatbot falling back to a simpler NLP model based on FAQ content.

This can also go the other way, where GenAI can be used to plug an existing heavily used process that could fail with a generative experience which might be able to support the user in generative offline mode of sorts.

Consideration — Trust Is Key

Fostering a symbiotic relationship between users and GenAI, nurturing confidence through mutual understanding and informed interaction. By prioritizing transparent communication and ethical design practices, we present GenAI as a reliable and indispensable part of the user experience. This trust is not blind but informed and interactive, fostering a sense of security and partnership — Users are more likely to engage deeply and rely on GenAI when they feel heard, understood, and in control.

An illustration of an architects workbench and studio as a depiction on mastery

6: Mastery Dimension — Deeper Integration

The final dimension mastery is where the full potential of GenAI user experience is born through assistive, semi-autonomous, and fully autonomous user experiences. Here, mastery is characterized by the ability to navigate complex systems effortlessly, where deep and highly complex AI customization is facilitated by intuitive and simplified controls. This stage is about transcending traditional interaction patterns to craft experiences that are both deeply personal and expansively creative.

Advanced Customization

This approach empowers users to fine-tune GenAI interactions with unprecedented precision. It reflects a deep understanding and control over the technology, allowing for the creation of highly tailored and user-centric designs. Advanced customization is where the true potential of GenAI can be realized, offering solutions and creations that are as unique as the users themselves. However the critical point in this is to ensure with the high degree of customization there is a level of simplicity

No-code generative AI builders with deep personalization — Sources: FlowiseAI and ComfyUI

The two examples FlowiseAI and ComfyUI have taken what was traditionally only available to AI engineers through complex code and infrastructure and simplifying through no-code interfaces.

Additive Interfaces

As we navigate towards more autonomous experiences, the role of additive interfaces becomes crucial. These are complementary layers that enhance existing UIs, offering sidecars or canvases that augment the user’s capability.

Additive interfaces where existing experiences and processes are elevated — Source Cognition Labs Devin and Relume

A prime example is Devin, an autonomous software engineer agent that not only performs tasks but also showcases its process, allowing users to understand, guide, and edit actions in real-time. This transparency and control are key to building trust and enhancing collaboration between user and AI. There are also signs of other unique co-creation and co-pilot additive experiences such as Relume which is build a site generator layer on-top of Webflow no-code site building tool to supercharge concept to finished website without compromising on control.

With agents, the UX problem is flipped. Rather than helping you as the main driver, you’re the copilot and you need to help guide the agent to the correct result. And agents don’t work reliably — it’ll misinterpret the goals, it’ll plan poorly, and it’ll go down some bad paths and won’t recover. Jordan Burgess

It’s key we craft the right experience when we work with semi and fully autonomous agents.

Ethical Features

In the Mastery dimension, a deep understanding of GenAI paves the way for ethical and innovative applications, enabling designers to create with both precision and conscience. This entails designing with inclusivity, privacy, and fairness at the forefront, ensuring that the innovative solutions generated are beneficial and accessible to all. It’s about setting a standard for GenAI usage that honors individual rights and societal norms, fostering a responsible and progressive tech culture.

Considerations — Thinking Deeper About Co-Creation

Users and GenAI should collaborate deeply, shaping experiences that are innovative, intuitive, and reflective of genuinely transformative ability of humans coupled with machines. At this stage, GenAI becomes more than a tool or assistant — it becomes a co-creator, embarking on a journey of innovation where each step is informed by foresight and creative ambition.

An illustration of a multi-dimensional experience of images coming to life in 3D out of a screen with people watching. Depicting generative AI experiences of the future

Further Thinking

As we continue to integrate GenAI into user experiences our design approach must evolve, grounded in ethical considerations and a relentless focus on the user, ensuring our designs remain human-centric and ethically grounded, it’s imperative to reflect on the implications of our designs, prioritize user empowerment, and remain committed to transparency. This capability requires continuous learning and adaptation, embracing the possibilities GenAI offers while staying grounded in the principles of human-centric design.

Key Takeaways

  1. Generative AI has the potential to revolutionize experience design, but it demands a new approach and fresh thinking.
  2. The Generative AI Design Compass provides a structured framework for integrating GenAI into design practices. Use this as another tool in your toolkit to build the right experiences.
  3. Balancing innovation with ethical considerations and user empowerment is crucial. Especially when there is distrust and lack of understanding with emerging technology.
  4. Continuous learning and adaptation are key to mastering GenAI applications in design. This goes for you but also how you expose your users to AI across their experience progressively.

The framework is designed to guide you through the complexities of GenAI, helping to create experiences that are not only innovative but also intuitive, ethical, and empowering for all users.

Further Reading and Inspiration

Enjoyed This Story?

Vincent Koc is a highly accomplished, commercially-focused technologist and futurist with a wealth of experience focused in data-driven and digital disciplines.

Subscribe for free to get notified when Vincent publishes a new story. Or follow him on LinkedIn and X.

Unless otherwise noted, all images are by the author with the support of generative AI for illustration design


The GenAI Compass: a UX framework to design generative AI experiences was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.