QUEST AI - BRAND & PRODUCT

QUEST AI - BRAND & PRODUCT

QUEST AI - BRAND & PRODUCT

2022-2023

2022-2023

2022-2023

See More

See More

See More

GOAL

Quest is a nocode developer platform that converts Figma designs into ReactJS with AI. In mid 2022, our startup decided we were going to focus on primarily on ReactJS (formerly HTML) and that shift would require a new brand web app. The new product needed to have features & messaging that would resonate with developer needs.


Company

Company

Quest AI

Quest AI

Year

Year

10 months - 2022

10 months - 2022

Skills

Skills

Product Design

Creative Direction

UI / UX

Product Design

Creative Direction

UI / UX

Product Design

Creative Direction

UI / UX

ROLE

As Head of Product Design, I had to job of coming up with a brand new UI and UX user flow for the product. While some parts of the original product would persists (a plugin in Figma to convert design to code) the entire web app would get refreshed and rethought in order to work for a new audience: developers. The entire process took 10 months, from start to release of our MVP.

As Head of Product Design, I had to job of coming up with a brand new UI and UX user flow for the product. While some parts of the original product would persists (a plugin in Figma to convert design to code) the entire web app would get refreshed and rethought in order to work for a new audience: developers. The entire process took 10 months, from start to release of our MVP.

As Head of Product Design, I had to job of coming up with a brand new UI and UX user flow for the product. While some parts of the original product would persists (a plugin in Figma to convert design to code) the entire web app would get refreshed and rethought in order to work for a new audience: developers. The entire process took 10 months, from start to release of our MVP.

PROCESS

RESEARCH

I started with competitive research and broke it up into 2 different parts. First, who would be considered our direct competition and what language and clear value were they trying to provide. Second, I looked at dev tools as a whole to see what styling resonated mostly with developers: simple & dark.


Additionally, before launching our MVP, we started a private Beta group which allowed us to get direct feedback from customers we would demo to and also some who started actively using it before launch. We tried to start with a Typeform survey but realized quickly that we needed to have direct conversations to get meaningful data points. I was apart of all these early conversations so that I could understand user concerns before we went to market. It helped shape our roadmap and define a clear picture of what necessary features would define the MVP.

I started with competitive research and broke it up into 2 different parts. First, who would be considered our direct competition and what language and clear value were they trying to provide. Second, I looked at dev tools as a whole to see what styling resonated mostly with developers: simple & dark.


Additionally, before launching our MVP, we started a private Beta group which allowed us to get direct feedback from customers we would demo to and also some who started actively using it before launch. We tried to start with a Typeform survey but realized quickly that we needed to have direct conversations to get meaningful data points. I was apart of all these early conversations so that I could understand user concerns before we went to market. It helped shape our roadmap and define a clear picture of what necessary features would define the MVP.

I started with competitive research and broke it up into 2 different parts. First, who would be considered our direct competition and what language and clear value were they trying to provide. Second, I looked at dev tools as a whole to see what styling resonated mostly with developers: simple & dark.


Additionally, before launching our MVP, we started a private Beta group which allowed us to get direct feedback from customers we would demo to and also some who started actively using it before launch. We tried to start with a Typeform survey but realized quickly that we needed to have direct conversations to get meaningful data points. I was apart of all these early conversations so that I could understand user concerns before we went to market. It helped shape our roadmap and define a clear picture of what necessary features would define the MVP.

IDEATION & MVP

Moving fast, I quickly created wireframes and prototypes for the UI and user flows in Figma. As we continued to evolve the technology, we started to transition the designs I would do in Figma as prototypes into working React components using the plugin we built. This helped us build the product much faster than we'd initially anticipated but also made scoping the project more complicated. Suddenly we could release more features and get more ideas into the MVP. Ultimately we decided to narrow our focus just to the core features we felt customers would need and set a deadline of 10 months from start as our official release date. I was also doing visual & motion design for marketing so this hard deadline helped in more ways than one.


Below are some screenshots of the product that are actually both Figma components/prototypes and the final product as it is a 1-1 translation by using Quest.

Moving fast, I quickly created wireframes and prototypes for the UI and user flows in Figma. As we continued to evolve the technology, we started to transition the designs I would do in Figma as prototypes into working React components using the plugin we built. This helped us build the product much faster than we'd initially anticipated but also made scoping the project more complicated. Suddenly we could release more features and get more ideas into the MVP. Ultimately we decided to narrow our focus just to the core features we felt customers would need and set a deadline of 10 months from start as our official release date. I was also doing visual & motion design for marketing so this hard deadline helped in more ways than one.


Below are some screenshots of the product that are actually both Figma components/prototypes and the final product as it is a 1-1 translation by using Quest.

Moving fast, I quickly created wireframes and prototypes for the UI and user flows in Figma. As we continued to evolve the technology, we started to transition the designs I would do in Figma as prototypes into working React components using the plugin we built. This helped us build the product much faster than we'd initially anticipated but also made scoping the project more complicated. Suddenly we could release more features and get more ideas into the MVP. Ultimately we decided to narrow our focus just to the core features we felt customers would need and set a deadline of 10 months from start as our official release date. I was also doing visual & motion design for marketing so this hard deadline helped in more ways than one.


Below are some screenshots of the product that are actually both Figma components/prototypes and the final product as it is a 1-1 translation by using Quest.

Components for the Quest web app made in Figma with auto-layout and variants for different states.

Components for the Quest web app made in Figma with auto-layout and variants for different states.

Components for the Quest web app made in Figma with auto-layout and variants for different states.

The Quest web app Code Editor mode. Here developers can see generated code, view any auto-generated breakpoints and write their own business logic.

The Quest web app Code Editor mode. Here developers can see generated code, view any auto-generated breakpoints and write their own business logic.

The Quest web app Code Editor mode. Here developers can see generated code, view any auto-generated breakpoints and write their own business logic.

This is the Quest Visual Editor where you can first check out the Figma-to-code translation. This example also showcases the ChatGPT integration where users can ask it to make changes, write logic and connect to their database.

This is the Quest Visual Editor where you can first check out the Figma-to-code translation. This example also showcases the ChatGPT integration where users can ask it to make changes, write logic and connect to their database.

This is the Quest Visual Editor where you can first check out the Figma-to-code translation. This example also showcases the ChatGPT integration where users can ask it to make changes, write logic and connect to their database.

This is the component selection page, where all components a user has create will live for a single app.

This is the component selection page, where all components a user has create will live for a single app.

This is the component selection page, where all components a user has create will live for a single app.

This is the template starter page for users that prefer not to start with Figma. This also showcases the quick-start onboarding modal to help new users get up to speed.

This is the template starter page for users that prefer not to start with Figma. This also showcases the quick-start onboarding modal to help new users get up to speed.

This is the template starter page for users that prefer not to start with Figma. This also showcases the quick-start onboarding modal to help new users get up to speed.

This is the Design Systems tab. Here users can see which design system they're using and when it was last modified. This light and dark theme will apply to the entire app.

This is the Design Systems tab. Here users can see which design system they're using and when it was last modified. This light and dark theme will apply to the entire app.

This is the Design Systems tab. Here users can see which design system they're using and when it was last modified. This light and dark theme will apply to the entire app.

This is the Export tab. Here is where you choose what specific App settings you want the code to be set to. Also, this is where you connect your GitHub repo for syncing individual components or the entire app all at once.

This is the Export tab. Here is where you choose what specific App settings you want the code to be set to. Also, this is where you connect your GitHub repo for syncing individual components or the entire app all at once.

This is the Export tab. Here is where you choose what specific App settings you want the code to be set to. Also, this is where you connect your GitHub repo for syncing individual components or the entire app all at once.

RESULTS

Since the launch of the product, Quest has steadily grew and is currently at 27% mo/mo user growth. The product went from 0-$70K ARR and has seen some 250K projects built. Additionally we had an awesome day as #1 Product of the Day on Product Hunt and #1 Developer Tool of the week. Recently Quest was part of the final pitch at the Vercel AI accelerator. The transition from HTML to React has proved pretty successful.


You can check out the Quest website to learn more.

Since the launch of the product, Quest has steadily grew and is currently at 27% mo/mo user growth. The product went from 0-$70K ARR and has seen some 250K projects built. Additionally we had an awesome day as #1 Product of the Day on Product Hunt and #1 Developer Tool of the week. Recently Quest was part of the final pitch at the Vercel AI accelerator. The transition from HTML to React has proved pretty successful.


You can check out the Quest website to learn more.

Since the launch of the product, Quest has steadily grew and is currently at 27% mo/mo user growth. The product went from 0-$70K ARR and has seen some 250K projects built. Additionally we had an awesome day as #1 Product of the Day on Product Hunt and #1 Developer Tool of the week. Recently Quest was part of the final pitch at the Vercel AI accelerator. The transition from HTML to React has proved pretty successful.


You can check out the Quest website to learn more.

More Case Studies

Motion Design

Interaction Direction

UI / UX

Interaction Design

UI / UX

FIGMA PORTFOLIO

FIGMA PORTFOLIO

To view my work in Figma: https://tinyurl.com/yesjasper

A

A

N

N

D

D

R

R

E

E

W

W

J

J

A

A

S

S

P

P

E

E

R

R

UI/UX PRODUCT DESIGNER

UI/UX PRODUCT
DESIGNER

andyjasper@gmail.com

andyjasper@gmail.com

andyjasper@gmail.com

201.615.3861

201.615.3861

201.615.3861

©2023 Andrew Jasper

Site designed and developed by Jasper. All Rights Reserved.