The landing page presents a number of options for users to view popular examples, open and create new models.
Challenge: As part of Microsoft Azure's 2022 integration of OpenAI, the task was to redesign the OpenAI Playground to provide a more intuitive and accessible experience for a broad range of users, including those without technical backgrounds. The existing interface required improvements to make parameter adjustments for model training more user-friendly, along with clearer guidance for users unfamiliar with AI workflows.
Approach: I redesigned the Playground using Microsoft’s Fluent Design System, incorporating a WYSIWYG editor that simplified the process of creating and editing AI models. A key enhancement was the introduction of an expandable side panel, offering real-time tooltips and definitions for model adjustments, making complex AI concepts easier to grasp for non-developers. I worked closely with Azure UI guidelines to integrate Cognitive Services elements, ensuring seamless alignment with the broader Azure ecosystem.
To streamline the project, I conducted a comprehensive audit of existing content and site structure, developed wireframes, and produced detailed prototypes. I also created custom components tailored to OpenAI’s new controls, all while adhering to Azure’s workflow for model training and token management. Meeting aggressive production timelines, I coordinated asset delivery, developer handoffs, and led beta testing, ensuring a smooth and timely rollout of the redesigned Playground.
This design not only improved usability but also made the AI training process more accessible, supporting a wide range of users in harnessing OpenAI’s powerful capabilities within Azure.
Experiment with video and parameter settings.
User flow ideation
Playground current version
First run CTA, without a mandatory deployment.
Signed in landing page with preset examples.
Resource settings, list view name sorting.
Signed out first use.
