Geta
Geta
Geta
UI Designer • Design Team of 7
August 2023 • Present
*Business fields changed due to NDA*
Sienna Pulati • Digital Product Design Lead
Napta Hag • UX/UI Designer
Stacey Campbell • UX/UI Designer + Illustrator
Morton Nicolaysen • UX/UI Designer + Frontend Developer
Kizito Chidike • UX/UI Designer + Frontend Developer
Heeman Prajpat • UX/UI Designer
UI Designer • Design Team of 7
August 2023 • Present
*Business fields changed due to NDA*
Sienna Pulati • Digital Product Design Lead
Napta Hag • UX/UI Designer
Stacey Campbell • UX/UI Designer + Illustrator
Morton Nicolaysen • UX/UI Designer + Frontend Developer
Kizito Chidike • UX/UI Designer + Frontend Developer
Heeman Prajpat • UX/UI Designer
UI Designer • Design Team of 7
August 2023 • Present
*Business fields changed due to NDA*
Sienna Pulati • Digital Product Design Lead
Napta Hag • UX/UI Designer
Stacey Campbell • UX/UI Designer + Illustrator
Morton Nicolaysen • UX/UI Designer + Frontend Developer
Kizito Chidike • UX/UI Designer + Frontend Developer
Heeman Prajpat • UX/UI Designer
The
Client
The Client
The Client
Manufacturers and suppliers share a crucial interdependence, as manufacturers rely on suppliers for a steady and quality supply of materials, and suppliers depend on manufacturers for sustained business and market opportunities.
Manufacturers and suppliers share a crucial interdependence, as manufacturers rely on suppliers for a steady and quality supply of materials, and suppliers depend on manufacturers for sustained business and market opportunities.
Manufacturers and suppliers share a crucial interdependence, as manufacturers rely on suppliers for a steady and quality supply of materials, and suppliers depend on manufacturers for sustained business and market opportunities.
The Problem
The Problem
The Problem
However, the lack of platforms available to connect manufacturers with suppliers poses significant challenges. Many of these platforms demand different accessibility requirements and lack user-friendliness and security, ultimately leading to inefficiencies and excessive costs. Without a platform for mutual support, potential collaborations and partnerships struggle to materialize, causing both manufacturers and suppliers to miss out on valuable opportunities in a competitive market.
However, the lack of platforms available to connect manufacturers with suppliers poses significant challenges. Many of these platforms demand different accessibility requirements and lack user-friendliness and security, ultimately leading to inefficiencies and excessive costs. Without a platform for mutual support, potential collaborations and partnerships struggle to materialize, causing both manufacturers and suppliers to miss out on valuable opportunities in a competitive market.
However, the lack of platforms available to connect manufacturers with suppliers poses significant challenges. Many of these platforms demand different accessibility requirements and lack user-friendliness and security, ultimately leading to inefficiencies and excessive costs. Without a platform for mutual support, potential collaborations and partnerships struggle to materialize, causing both manufacturers and suppliers to miss out on valuable opportunities in a competitive market.
The Solution
The Solution
The Solution
Geta, a mobile matching app tailored for manufacturers and suppliers, is a centralized platform where manufacturers and suppliers can create profiles detailing their capabilities, specialties, and business requirements. Then, through an intuitive matching algorithm, the app analyzes compatibility based on factors such as production needs, material specifications, and geographical proximity.
The platform incorporates the use of auto-generated non-disclosure agreements (NDAs) at a minimal cost, ensuring the security and confidentiality of shared information between manufacturer-supplier matches.
This streamlined approach to connecting businesses will facilitate efficient partnerships, reduce communication gaps, and ensure that both parties are well-aligned in terms of quality standards, pricing, and ethical practices.
Geta, a mobile matching app tailored for manufacturers and suppliers, is a centralized platform where manufacturers and suppliers can create profiles detailing their capabilities, specialties, and business requirements. Then, through an intuitive matching algorithm, the app analyzes compatibility based on factors such as production needs, material specifications, and geographical proximity.
The platform incorporates the use of auto-generated non-disclosure agreements (NDAs) at a minimal cost, ensuring the security and confidentiality of shared information between manufacturer-supplier matches.
This streamlined approach to connecting businesses will facilitate efficient partnerships, reduce communication gaps, and ensure that both parties are well-aligned in terms of quality standards, pricing, and ethical practices.
Geta, a mobile matching app tailored for manufacturers and suppliers, is a centralized platform where manufacturers and suppliers can create profiles detailing their capabilities, specialties, and business requirements. Then, through an intuitive matching algorithm, the app analyzes compatibility based on factors such as production needs, material specifications, and geographical proximity.
The platform incorporates the use of auto-generated non-disclosure agreements (NDAs) at a minimal cost, ensuring the security and confidentiality of shared information between manufacturer-supplier matches.
This streamlined approach to connecting businesses will facilitate efficient partnerships, reduce communication gaps, and ensure that both parties are well-aligned in terms of quality standards, pricing, and ethical practices.
The Process
The Process
The Process
The Handoff
The Handoff
The Handoff
I joined this project as a UI Designer in August 2023 (it began in May 2023) just after the completion of the mid-fidelity wireframes. It was time to jump in and empathize to understand the work done by the team, the tone of the product, and the brand identity and start creating the visuals for the app.
I joined this project as a UI Designer in August 2023 (it began in May 2023) just after the completion of the mid-fidelity wireframes. It was time to jump in and empathize to understand the work done by the team, the tone of the product, and the brand identity and start creating the visuals for the app.
I joined this project as a UI Designer in August 2023 (it began in May 2023) just after the completion of the mid-fidelity wireframes. It was time to jump in and empathize to understand the work done by the team, the tone of the product, and the brand identity and start creating the visuals for the app.
Mood boards
Mood boards
Mood boards
After debriefing with the project lead, I began piecing together a mood board to present to the stakeholders. Understanding the direction of professional but not boring, more character than corporate, and using a “dark” mode, I began to scour the internet for inspiration. This springboard helped the UI begin to come into focus. Each designer presented their mood boards and we meshed them together creating a clear vision to begin designing.
After debriefing with the project lead, I began piecing together a mood board to present to the stakeholders. Understanding the direction of professional but not boring, more character than corporate, and using a “dark” mode, I began to scour the internet for inspiration. This springboard helped the UI begin to come into focus. Each designer presented their mood boards and we meshed them together creating a clear vision to begin designing.
After debriefing with the project lead, I began piecing together a mood board to present to the stakeholders. Understanding the direction of professional but not boring, more character than corporate, and using a “dark” mode, I began to scour the internet for inspiration. This springboard helped the UI begin to come into focus. Each designer presented their mood boards and we meshed them together creating a clear vision to begin designing.
Mood board
Mood board
Mood board
Hi-Fidelity Mockups
Hi-Fidelity Mockups
Hi-Fidelity Mockups
Now that we had some well-founded inspiration, the team and I decided to choose 3 of the most vital screens to the app and each work on a design to present to the stakeholders.
Thinking about color psychology, I wanted my design to feel trustworthy, rich, secure, and powerful, so I chose a royal blue as the base. With a near-white font and an orange CTA (enthusiasm, optimism, and freedom), I kept the design simple with an easily repeatable background that wouldn’t take away too much from the business profiles.
After a feedback loop with the team and stakeholders, we combined the presented designs as a guide for all the screens. The blended sample screens certainly aren't perfect, but they worked as a true guide for us to refine the design and begin building our UI kit.
Now that we had some well-founded inspiration, the team and I decided to choose 3 of the most vital screens to the app and each work on a design to present to the stakeholders.
Thinking about color psychology, I wanted my design to feel trustworthy, rich, secure, and powerful, so I chose a royal blue as the base. With a near-white font and an orange CTA (enthusiasm, optimism, and freedom), I kept the design simple with an easily repeatable background that wouldn’t take away too much from the business profiles.
After a feedback loop with the team and stakeholders, we combined the presented designs as a guide for all the screens. The blended sample screens certainly aren't perfect, but they worked as a true guide for us to refine the design and begin building our UI kit.
Now that we had some well-founded inspiration, the team and I decided to choose 3 of the most vital screens to the app and each work on a design to present to the stakeholders.
Thinking about color psychology, I wanted my design to feel trustworthy, rich, secure, and powerful, so I chose a royal blue as the base. With a near-white font and an orange CTA (enthusiasm, optimism, and freedom), I kept the design simple with an easily repeatable background that wouldn’t take away too much from the business profiles.
After a feedback loop with the team and stakeholders, we combined the presented designs as a guide for all the screens. The blended sample screens certainly aren't perfect, but they worked as a true guide for us to refine the design and begin building our UI kit.
My Sample Screens
My Sample Screens
My Sample Screens
Combined Sample Screens
Combined Sample Screens
Combined Sample Screens
Design System
Design System
Design System
Instead of creating everything from scratch, we pieced together a custom UI kit for the beginnings of our Design System. Combining elements and components from various open-source UI Kits saved us time and kept the project on track schedule-wise. We were able to tailor the kits with ease, allowing our high-fidelity screens to be built out consistently and efficiently. I was specifically in charge of icons, control (checkboxes and radio dials), and images and videos.
I cannot emphasize the impact that building out this design system had on our efficiency as a team of designers. Crafting the high-fidelity screens was a seamless process as a result of this work in the beginning. Setting up the Figma file with proper color and text styles combined with the componentized UI kit saved us from design inconsistencies, allowing each designer to tackle their section of the app without question. Of course, we had to edit and add some components as we went - there is always room for expansion and unforeseen needs during this process. I have to say this was the quickest transition from wireframes to high-fidelity that I have ever been a part of.
Instead of creating everything from scratch, we pieced together a custom UI kit for the beginnings of our Design System. Combining elements and components from various open-source UI Kits saved us time and kept the project on track schedule-wise. We were able to tailor the kits with ease, allowing our high-fidelity screens to be built out consistently and efficiently. I was specifically in charge of icons, control (checkboxes and radio dials), and images and videos.
I cannot emphasize the impact that building out this design system had on our efficiency as a team of designers. Crafting the high-fidelity screens was a seamless process as a result of this work in the beginning. Setting up the Figma file with proper color and text styles combined with the componentized UI kit saved us from design inconsistencies, allowing each designer to tackle their section of the app without question. Of course, we had to edit and add some components as we went - there is always room for expansion and unforeseen needs during this process. I have to say this was the quickest transition from wireframes to high-fidelity that I have ever been a part of.
Instead of creating everything from scratch, we pieced together a custom UI kit for the beginnings of our Design System. Combining elements and components from various open-source UI Kits saved us time and kept the project on track schedule-wise. We were able to tailor the kits with ease, allowing our high-fidelity screens to be built out consistently and efficiently. I was specifically in charge of icons, control (checkboxes and radio dials), and images and videos.
I cannot emphasize the impact that building out this design system had on our efficiency as a team of designers. Crafting the high-fidelity screens was a seamless process as a result of this work in the beginning. Setting up the Figma file with proper color and text styles combined with the componentized UI kit saved us from design inconsistencies, allowing each designer to tackle their section of the app without question. Of course, we had to edit and add some components as we went - there is always room for expansion and unforeseen needs during this process. I have to say this was the quickest transition from wireframes to high-fidelity that I have ever been a part of.
Control Components for UI Kit
Control Components for UI Kit
Control Components for UI Kit
Icon Components for UI Kit
Icon Components for UI Kit
Icon Components for UI Kit
Style Guide
Style Guide
Style Guide
After completing the high-fidelity MVP prototype, the team and I created a Style Guide to aid the developers as they brought the product to life. Giving the developers all the details necessary for spacing, exact colors, fonts, and more would ensure a thorough handoff.
After completing the high-fidelity MVP prototype, the team and I created a Style Guide to aid the developers as they brought the product to life. Giving the developers all the details necessary for spacing, exact colors, fonts, and more would ensure a thorough handoff.
After completing the high-fidelity MVP prototype, the team and I created a Style Guide to aid the developers as they brought the product to life. Giving the developers all the details necessary for spacing, exact colors, fonts, and more would ensure a thorough handoff.
Style Guide Slideshow
Style Guide Slideshow
Style Guide Slideshow
Animation
Animation
Animation
While the developers were beginning to code the app, the design team and I worked on the prototype a bit more to create an animated video of the product for marketing materials. The stakeholders asked for something that shows the product without having to click through the prototype - a video that shows the capabilities of the product they can share with potential investors. Working in Figma we created an auto-play walk through of the app.
While the developers were beginning to code the app, the design team and I worked on the prototype a bit more to create an animated video of the product for marketing materials. The stakeholders asked for something that shows the product without having to click through the prototype - a video that shows the capabilities of the product they can share with potential investors. Working in Figma we created an auto-play walk through of the app.
While the developers were beginning to code the app, the design team and I worked on the prototype a bit more to create an animated video of the product for marketing materials. The stakeholders asked for something that shows the product without having to click through the prototype - a video that shows the capabilities of the product they can share with potential investors. Working in Figma we created an auto-play walk through of the app.
Matching Flow Preview
Matching Flow Preview
Matching Flow Preview
The
Conclusion
The
Conclusion
The
Conclusion
I am so grateful to have been a part of this project. I learned so much working with other designers and thinking in systems to move the project ahead with ease. The most valuable takeaway for me was how important the idea of mise en place is for UI. Utilizing open-source kits that we tailored to our needs kept the project on its schedule. Taking the necessary time to customize the Figma file for our high-fidelity look truly allowed each designer to transform wireframes into polished developer-ready screens without tons of revision. While there will always be misclicks and necessary edits, I found this prep easily took care of a high percentage of expected errors. I want to apply this technique to future projects. Why reinvent the wheel when it’s on the internet for free?
I am so grateful to have been a part of this project. I learned so much working with other designers and thinking in systems to move the project ahead with ease. The most valuable takeaway for me was how important the idea of mise en place is for UI. Utilizing open-source kits that we tailored to our needs kept the project on its schedule. Taking the necessary time to customize the Figma file for our high-fidelity look truly allowed each designer to transform wireframes into polished developer-ready screens without tons of revision. While there will always be misclicks and necessary edits, I found this prep easily took care of a high percentage of expected errors. I want to apply this technique to future projects. Why reinvent the wheel when it’s on the internet for free?
I am so grateful to have been a part of this project. I learned so much working with other designers and thinking in systems to move the project ahead with ease. The most valuable takeaway for me was how important the idea of mise en place is for UI. Utilizing open-source kits that we tailored to our needs kept the project on its schedule. Taking the necessary time to customize the Figma file for our high-fidelity look truly allowed each designer to transform wireframes into polished developer-ready screens without tons of revision. While there will always be misclicks and necessary edits, I found this prep easily took care of a high percentage of expected errors. I want to apply this technique to future projects. Why reinvent the wheel when it’s on the internet for free?