Naren's portfolio

Design Playground - Interactive games for Product Designers

Overview

Design Playground is a web application that offers a series of engaging and interactive games that help designers learn, retain, and apply key principles of product design.

My Role

Research, Design

Project Type

Personal Project.

Status

In Progress

Concept Game Designs

Try MVP

The Problem being solved

Many aspiring product designers struggle with the overwhelming amount of online resources available for learning product design. These resources often lack interactivity, practical application and a structure, making it difficult for designers to retain knowledge and apply it effectively in real-world scenarios.

Interviews

I interviewed 5 people who are learning Product design through various sources to understand what are the major problems they faced in their learning journey.

Anecdotes from Users

"Too many resources"
"Hard to filter out good content"
"Too many fundamental concepts to master"
"Difficult to have a structured learning process"
"Difficult to keep up with the new trends/tools"
"Applying theoretical knowledge to real-world projects is challenging".

"Too many resources"
"Hard to filter out good content"
"Too many fundamental concepts to master"
"Difficult to have a structured learning process"
"Difficult to keep up with the new trends/tools"
"Applying theoretical knowledge to real-world projects is challenging".

Existing Platforms Offering Interactive Experience

While exploring online, I discovered that there's a scarcity of interactive apps tailored specifically for learning product design. Uxcel stands out as a rare platform offering an interactive learning experience crafted for product designers. Most of the other games were specific to Typography, Colors etc. and do not cover all the concepts of product design.

Even on Uxcel, I noticed that the interactive games tend to follow a similar pattern across various design topics. However, given the diverse nature of product design, each topic presents distinct challenges and requires a unique approach to mastery.

User Persona

From the synthesis of the interview data, I made a persona to define my ideal user and cater the design decisions for it.

Brainstorming Ideas

Based on interviews and discussions with fellow designers, I have identified a few core problems and proposed solutions for each.

Problem: Lack of a structured, self-paced learning process.

Idea: Implement persona-based and skill-based onboarding to identify the needs and current skillset of users, and design a personalized learning path for each user.

Problem: Too many fundamental concepts to master.

Idea: Develop multiple interactive games for each topic to create a fun and engaging learning experience.

Problem: Too many resources to filter and find good content.

Idea: Provide explanations and resources for each question so that users can delve deeper into specific topics.

Based on interviews and discussions with fellow designers, I have identified a few core problems and proposed solutions for each.

Problem: Lack of a structured, self-paced learning process.

Idea: Implement persona-based and skill-based onboarding to identify the needs and current skillset of users, and design a personalized learning path for each user.

Problem: Too many fundamental concepts to master.

Idea: Develop multiple interactive games for each topic to create a fun and engaging learning experience.

Problem: Too many resources to filter and find good content.

Idea: Provide explanations and resources for each question so that users can delve deeper into specific topics.

Based on interviews and discussions with fellow designers, I have identified a few core problems and proposed solutions for each.

Problem: Lack of a structured, self-paced learning process.

Idea: Implement persona-based and skill-based onboarding to identify the needs and current skillset of users, and design a personalized learning path for each user.

Problem: Too many fundamental concepts to master.

Idea: Develop multiple interactive games for each topic to create a fun and engaging learning experience.

Problem: Too many resources to filter and find good content.

Idea: Provide explanations and resources for each question so that users can delve deeper into specific topics.

Concept Designs

Game 1 - Design Detective

In this game users will be provided with an app screen with one component having a design flaw. Users need to identify the component and click on it.
This is will designers develop a keen eye for design and identify design flaws easily.

In this game users will be provided with an app screen with one component having a design flaw. Users need to identify the component and click on it.
This is will designers develop a keen eye for design and identify design flaws easily.

Game 2 - Design Duel

In this game, users are provided with 2 similar screens with one of the screen having a design flaw. users need to pick the correct screen.
Similar to Design Detective, this game also helps designers develop a keen eye for design and differentiate Good design vs Bad design easily.

In this game, users are provided with 2 similar screens with one of the screen having a design flaw. users need to pick the correct screen.
Similar to Design Detective, this game also helps designers develop a keen eye for design and differentiate Good design vs Bad design easily.

Game 3 - UI Pro/UX Pro

This game has a series of MCQ questions along with explanation of each answer and few online resources through which users can learn more about a specific topic.
This will help designers gain access to filtered online resources to learn more about a specific topic.

This game has a series of MCQ questions along with explanation of each answer and few online resources through which users can learn more about a specific topic.
This will help designers gain access to filtered online resources to learn more about a specific topic.

Game 4 - Design Crossword

As the name suggests this is a crossword game with design related terms aimed to improve the design vocabulary of product designers.

Building an MVP

Implementing the MCQ based games felt like an easier task as it is a very common game and writing the code for it would be comparatively easier.

I took the help of ChatGPT to write code for the MVP. My plan was to get the basic functionality and then work on the Visual Design.

After 5 Prompts

After 50+ Prompts

Visual Design using Figma's Dev Mode

I arranged all the components I got from chatGPT like the tabs for proficiency levels, Progress bar, containers for question, options, explanation etc. and arranged them in a layout in Figma.

I couldn't implement the exact interaction I envisioned, hence I experimented with a design a bit and tried Dark mode for the MVP.

I used Dev mode to extract the CSS code of each component and built a responsive web application.

I arranged all the components I got from chatGPT like the tabs for proficiency levels, Progress bar, containers for question, options, explanation etc. and arranged them in a layout in Figma.