Ai Playground

P R O J E C T T Y P E

WEB Application

D U R A T I O N

1 year

M Y R O L E

UI & UX Designer

T O O L S

Figma, Slack, Miro, Notion,
Google Meet

About Project

GenAi.xy, also known internally as Playground, is a tool that showcases the power of generative AI in real-world business applications.
Our task was to create a web application, a tool to learn about AI, explore the possibilities of AI and gather inspiration for using AI at work and in your own business.

Project Goal

The primary goal was to create an accessible yet powerful AI playground where users from various industries could explore, test, and implement AI use cases (UCs) tailored to their workflows. This involved:

Designing a clear and intuitive Playground for testing different artificial intelligence models

Creation of a tool for gaining and sharing knowledge on artificial intelligence topics

Creating a scalable, white-label design system for client-specific branding

My Role & Collaboration

UI and UX role

Creating user flows, wireframes, and prototypes
Running product design workshops and user interviews
Collaborating closely with developers and project managers
Maintaining the design system and ensuring cross-client consistency

Collaboration

PO/Project Manager – delivery of tasks and business requirements, support
Frontend and Backend developers – Consultation and supervision of design implementation

Business Setup & Strategy

B2B2C model.
This influenced key aspects of the design:

Customization

The platform had to be easily branded and tailored per company. While the base was consistent (dark mode, grey palette), primary brand colors changed per implementation.

Scalability

Each client had different expectations and AI maturity levels, which meant designing modular features and adaptable UX flows.

Work Organization

1. Dual Daily

One with the client and internal for design and development to clarify and team bonding.

2. Sprint-Based Workflow

Team worked in agile sprints, with milestones defined collaboratively based on contract deliverables.

3. Self-Management

The project required independence in organising work (define subtasks, timelines, and priorities).

Design Process

1. Product Roadmap & Planning

We began by aligning with the client on a design roadmap, defining KPIs and UX goals in parallel with technical planning. We adjusted our process to reflect:

The fast-moving AI landscape, where backend capabilities shifted frequently
Collaborative sprint planning, where design led some of the direction-setting due to vague task descriptions

2. Concept Design

We started with benchmarking, early sketches, and low-fidelity wireframes while simultaneously building a component library.

Adapted quickly to new GenAI tools
Developed deep product and AI domain understanding

3. UX Workshops & User Research

Conducted UX workshops to clarify the product’s purpose, success metrics, and target user needs.

Learned that human behavior and understanding was central to AI adoption
Uncovered user pain points with abstract AI terminology and interaction models

4. MVP Development & Handoff

Delivered clean, developer-ready handoff files. Maintained tight cooperation with the frontend and backend developers.

Worked with developers like Arthur, who was crucial in turning designs into fully functional, responsive interfaces
Handled edge cases and platform-specific nuances due to B2B2C customization

5. Testing & Feedback

We tested the MVP with early users, iterated on flows, and refined the UI based on quick-changing feedback loops.

Faced limitations in broad user testing, but compensated with focused feedback sessions
Adjusted to frequent changes in GPT and AI interfaces (e.g., shift in chat model paradigms)

6. Final Refinements

Continued refining based on user insights, evolving tech, and stakeholder input. Navigated last-minute feature tweaks, and created documentation for future teams.

Product Structure

U S E C A S E L I B R A R Y

A searchable and filterable database of AI use cases, which we refer to as "recipes" for applying AI in work scenarios.

The Use Case Library is the entry point of the GenAi.xy platform and serves as a foundational learning and discovery module. It provides users with structured, searchable “recipes” for applying AI in their day-to-day work.

P L A Y G R O U N D

A hands-on area where users can interact with generative AI models directly.

Users have the opportunity to explore different AI models and types: Text Generation, Code Generation, Image Generation and Q&A with Documents. The development of further types is planned.

C O M M U N I T Y

A place to share and learn about AI topics

Several communication options are available to users: Forum, Knowledge Hub, Events, FAQ. Users can discuss various topics and share news in AI related topics.

Reflections & Outcomes

What worked?

A passionate and autonomous team with shared ownership of outcomes

What was challenging?

Fast-evolving tech, minimal task clarity, and high client customization

What we achieved?

A functional, well-designed, and highly adaptable AI platform, praised by both AppliedAI and their end clients.

Visite my Behnace

This and other projects are also published on Bahence.com. This is the place where I publish my work on a regular basis. I encourage you to take a look and leave a comment.

Go to Behance

Page updated

Google Sites

Report abuse