## Team

3+1

## Scope

UI/UX Design, Product Strategy, Design System, User Research, UX Writing

## Problem Statement

Product designers spend a lot of time doing grunt, monotonous, non-creative work, which leads to larger product development cycles & compromised design quality.

## Challenges

* Identifying the most critical pain point within the product development cycle.

* Evaluating effort versus impact for each stage of product development.

* Designing a scalable system that meets the diverse needs of a growing product.

* Analyzing competitor offerings and understanding market dynamics to build a valuable, differentiated product.

## Solution

### Initial Research & Hypothesis

Through early research, we noticed designers were spending a surprising amount of time outside of Figma, making decisions and preparing rather than designing. We thought, why not streamline this in a single space? So, we set out to build a tool that could save designers time and reduce decision-related back-and-forth.

Our user research confirmed a pattern: designers often loop through decisions, visualizing choices, gathering feedback, and iterating until the design aligns with both branding and stakeholder expectations. But when time gets tight, documentation often falls short—something I’d experienced at Nuclei, where missing documentation meant I had to redesign an entire app from screenshots. It was a clear lesson in how much time a solid design system could save, especially if set up early.

### Version 0.1: Testing the waters

To test our idea, we built a quick MVP focused on helping designers see branding and style guides in real-time. Our goal? help designers make decisions faster and reduce rework.

Version 0.1 let designers adjust essentials like colors, typography, spacing, and shadows, and see immediate visual updates across designs.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHDHVhw52QKeygU3iHmrja8O6gNm2%2FZzvfjsu84GFfzdlXtoYJ%2Ff2ccc89e-3504-42b7-9bb5-d48d982ce8ee.png?alt=media&token=7f25b298-6c32-4fca-99f1-6dd6554ae470","id":"f2ccc89e-3504-42b7-9bb5-d48d982ce8ee","width":1440,"height":1024,"filename":"v0.1_figrcase study.png","type":"image/png","caption":"initial wireframe of v0.1 of identity","border":false}]}
```

### What we learned from designers

What surprised me during user testing was how much time designers spent preparing to start a project. The real work? Not the design, but the endless decisions that had to be made first. This made us rethink how we could add real value. How could we streamline this process?

### Adjusting the Solution: Version 0.2

Based on our new insights, we expanded the tool’s features to offer visualization options across websites, mobile, branding, and more. A style generator was added to generate style guides based on few initial inputs of their project. The goal? Faster decisions and fewer delays.

But was this enough to make a real difference in their workflow?

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHDHVhw52QKeygU3iHmrja8O6gNm2%2FZzvfjsu84GFfzdlXtoYJ%2F26089d83-6682-4572-bf10-630ac880a47e.png?alt=media&token=116f66dd-0096-419c-9e92-9249baebe29e","id":"26089d83-6682-4572-bf10-630ac880a47e","width":1416,"height":780,"filename":"v0.2_figrcasestudy.png","type":"image/png","caption":"home screen of v0.2, user can visualise on multiple mobile screens ","border":false}]}
```

### User reaction

While the tool was useful for shortlisting options, it didn’t completely solve the core problem. They appreciated the visualizations, but it wasn’t enough to reduce the time they spent iterating and aligning their style guides. What did we miss? The challenge wasn’t just about visualizing—it was about making the decision-making process more effective.

### Version 0.3

Based on feedback, we refined the tool. Now, designers could not only visualize across assets but also export style guides directly to Figma. This was a critical test: would this version truly reduce effort and time, or were we still missing something?

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHDHVhw52QKeygU3iHmrja8O6gNm2%2FZzvfjsu84GFfzdlXtoYJ%2F4b8773eb-d669-4f70-afb1-4328a082a885.png?alt=media&token=1f889c82-ef66-46a0-a250-8fe6389de8b3","id":"4b8773eb-d669-4f70-afb1-4328a082a885","width":1440,"height":812,"filename":"v0.3_figrcasestudy.png","type":"image/png","caption":"v0.3 home screen. Choose a design style that goes with your project -> visualize it -> export it to figma. Designed 150+ shadows (different styles & their variants) to help designers visualise different design styles","border":false}]}
```

### What stood out

* Experienced designers had a pre-established process for selecting style guides.

* Most tools simply visualized the design elements but didn’t provide real-time decision-making support.

* Designers preferred building out 2-3 screens for feedback rather than generating generic templates.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHDHVhw52QKeygU3iHmrja8O6gNm2%2FZzvfjsu84GFfzdlXtoYJ%2F1cb7a773-094d-454b-866f-79e2544cd6d0.png?alt=media&token=12f75f0f-b130-4470-b1fe-0c9caf401c2d","id":"1cb7a773-094d-454b-866f-79e2544cd6d0","width":1464,"height":1540,"filename":"Screenshot 2024-12-04 at 1.25.11 PM.png","type":"image/png","caption":"user groups categorised to understand their respective design processes and responsibilities","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHDHVhw52QKeygU3iHmrja8O6gNm2%2FZzvfjsu84GFfzdlXtoYJ%2Fd0ad62ae-bbbb-4dec-86d2-b26cfb6be665.png?alt=media&token=a3303441-2823-4d59-940e-d4dd287cb8c9","id":"d0ad62ae-bbbb-4dec-86d2-b26cfb6be665","width":1940,"height":939,"filename":"Screenshot 2024-12-04 at 1.08.03 PM.png","type":"image/png","caption":"","border":false}]}
```

### Breakthrough: the climax

The real aha! moment? Generic visualizers alone weren’t enough. Designers worked in specific contexts, and generic templates didn’t quite capture that. And while they spent plenty of time building style guides, documenting these systems often took just as much time.

Another key takeaway? Designers preferred staying within Figma rather than switching platforms, which only disrupted their flow.

### The Pivot

It wasn’t just about the tool; it was about fitting seamlessly into designers’ workflows. With eyes wide open, we pivoted from a web app to a Figma plugin—creating a tool that not only visualized style guides but also automated the creation of design systems and documentation. This shift bridged the gap between exploration and implementation, reducing the manual work involved in creating and maintaining design systems.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHDHVhw52QKeygU3iHmrja8O6gNm2%2FZzvfjsu84GFfzdlXtoYJ%2F2886a561-033d-464a-9405-c05e95ca57df.png?alt=media&token=0cf943f1-9f96-45ae-93fd-7807bff68675","id":"2886a561-033d-464a-9405-c05e95ca57df","width":804,"height":669,"filename":"v1.0_figrcasestudy.png","type":"image/png","caption":"Initial wireframe of v1.0. A figma plugin to generate design systems","border":false}]}
```

### A Shift to Figma Plugin (Version 1.0)

Our final product was a Figma plugin that allowed designers to create custom design systems directly within their Figma projects. With it, they could input style guide elements, test them on custom components, and export the full style guide—all within Figma. Designers could stay focused on the creative side while the tool handled the tedious work of building and documenting the system.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FHDHVhw52QKeygU3iHmrja8O6gNm2%2FZzvfjsu84GFfzdlXtoYJ%2F75c10a1e-b939-4359-8426-ee7172e50fb2.mov?alt=media&token=ddfd9887-99a7-4dd6-853c-854a6e164e76","id":"75c10a1e-b939-4359-8426-ee7172e50fb2","width":2724,"height":1766,"filename":"Figr-identity_casestudyvideo (1) (1) (1).mov","type":"video/quicktime","caption":"Figr Identity - a figma plugin (version 1.0, launched)","border":false}]}
```

From 0 to Impact: Building Scalable Products and Tools at Fig

Product Designer

UI/UX Design Course

Organised event on DU campus to promote education for all & motivate people to read by conducting workshops, competitions & engaging games. 

Intern

Taught communication skills, life skills, English and mathematics to 30 underprivileged kids aged 8-12.

Teaching Volunteer

Researched & published blogs on Social & Gender norms.

Research & Content Intern

- Led logistics of the entire event for the esteemed guest Padma Bhusan Pandit Vishwa Mohan Bhatt Mohanveena
- Designed posters, and art installations & promoted the event by spearheading discussions on classical art

Creative & Management Coordinator

- Selected in the conference of Harvard College along with 2200 delegates from the pool of 100000+ applicants and 67+ nations
- Led discussions in Executive Seminar, among a group of 40 odd delegates, with RPA lead, Global Strategy & Operations at Dell Technologies

Delegate

Worked on an API-based platform that enables 18+ banks globally (ICICI, Bank of Baroda, Canara, IndusInd Bank, etc.) to become Super-apps

* Spearheaded design operations to address delays in product development, reducing the cycle from 4 weeks to 1 week by building and implementing a comprehensive design system
* Collaborated with product managers and data analysts to address drop-offs on the booking review page. Redesigned the page to emphasise offers & benefits, resulting in a 12% increase in booking completions
* Led research and execution for a 0-to-1 product, addressing the need for a unified platform to buy and manage multiple subscriptions
* Initiated designing a Home screen for the super-app bundle

Associate Product Designer

* Led social media marketing for the successful launch of the Micromax IN Note 2, driving engagement and product visibility
* Contributed to content strategy of brands like RAGE Coffee, Paytm Insider
* Initiated and executed a pre-launch social media strategy for Revlon’s Super Lustrous Matte campaign, increasing brand awareness

Jr Copywriter

* Led the creation of the annual Bangalore Festival “BLR Hubba” website ([read case study](https://rectangular-spirit-94c.notion.site/Currently-Designing-Bangalore-s-Annual-Festival-Website-1530606140bc8066af0fc366e4c13abd?pvs=4))

* Identified the need for clearer feature visualization to ensure feasibility and alignment

* Initiated user flows and prototypes to bridge gaps between the team and clients, resulting in streamlined decision-making and a faster development process

Product Design Consultant

* Spearheaded the 0-to-1 development of [Figr Identity](https://www.figma.com/community/plugin/1350743748296105581/figr-identity-v2-generate-design-systems-quickly), the company’s flagship product enabling designers to generate design systems, serving over 40,000 users

* Built the MVP of [Figr AI](https://app.figr.design/) with a focus on functionality and feedback loop; collaborated with the growth team to collect 1000+ feedbacks and 70 user interviews to refine the product

* Collaborated with the growth team on a product-led growth initiative, designing mini tools and a landing page to drive user acquisition

Ritika Pareek

2024