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
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.