Visiolab
Project type
Consulting
Deliverables
Web App UI/UX
Visiolab
Project type
Consulting
Deliverables
Web App UI/UX
Visiolab
Project type
Consulting
Deliverables
Web App UI/UX
![](https://framerusercontent.com/images/22k8m8vlphSPR7C0hmuqXDQQAdU.png)
![](https://framerusercontent.com/images/22k8m8vlphSPR7C0hmuqXDQQAdU.png)
Developing a canteen management system for business stakeholders.
Visiolab serves as a consumer-facing mobile app primarily focused on optimizing the checkout process for customers. Through the integration of a food recognition system, the app automates checkout, resulting in expedited payments for customers. Additionally, this innovation empowers business owners to enhance operational efficiency without the necessity of hiring additional cashiers.
The project goal was to provide design guidelines and offer close assistance to frontend developers in implementing new information architecture and user flows for the desktop app aimed at business owners.
Developing a canteen management system for business stakeholders.
Visiolab serves as a consumer-facing mobile app primarily focused on optimizing the checkout process for customers. Through the integration of a food recognition system, the app automates checkout, resulting in expedited payments for customers. Additionally, this innovation empowers business owners to enhance operational efficiency without the necessity of hiring additional cashiers.
The project goal was to provide design guidelines and offer close assistance to frontend developers in implementing new information architecture and user flows for the desktop app aimed at business owners.
Developing a canteen management system for business stakeholders.
Visiolab serves as a consumer-facing mobile app primarily focused on optimizing the checkout process for customers. Through the integration of a food recognition system, the app automates checkout, resulting in expedited payments for customers. Additionally, this innovation empowers business owners to enhance operational efficiency without the necessity of hiring additional cashiers.
The project goal was to provide design guidelines and offer close assistance to frontend developers in implementing new information architecture and user flows for the desktop app aimed at business owners.
Design process
Starting a new collaboration involves diving into a design UI/UX audit to understand available resources and address practical design issues, ensuring smooth scalability and alignment with the team.
![](https://framerusercontent.com/images/3IbYxkBX5fckUn6luSXGHj2JY.png)
![](https://framerusercontent.com/images/TVZ9NvOX2y1nqqDHVdwr2hVj8Lc.png)
Startups aim to iterate quickly, which means setting up a basic design system or even adopting an existing one. Untitled UI is typically my default choice.
Close collaboration and communication are key to shaping the best possible product. Slack and Loom are my tools of choice for keeping everyone in the loop with regular updates.
![](https://framerusercontent.com/images/9q3gP09qvWNjhaiymrP77ADI.png)
Design process
Starting a new collaboration involves diving into a design UI/UX audit to understand available resources and address practical design issues, ensuring smooth scalability and alignment with the team.
![](https://framerusercontent.com/images/3IbYxkBX5fckUn6luSXGHj2JY.png)
![](https://framerusercontent.com/images/TVZ9NvOX2y1nqqDHVdwr2hVj8Lc.png)
Startups aim to iterate quickly, which means setting up a basic design system or even adopting an existing one. Untitled UI is typically my default choice.
Close collaboration and communication are key to shaping the best possible product. Slack and Loom are my tools of choice for keeping everyone in the loop with regular updates.
![](https://framerusercontent.com/images/9q3gP09qvWNjhaiymrP77ADI.png)
Design process
Starting a new collaboration involves diving into a design UI/UX audit to understand available resources and address practical design issues, ensuring smooth scalability and alignment with the team.
![](https://framerusercontent.com/images/3IbYxkBX5fckUn6luSXGHj2JY.png)
![](https://framerusercontent.com/images/TVZ9NvOX2y1nqqDHVdwr2hVj8Lc.png)
Startups aim to iterate quickly, which means setting up a basic design system or even adopting an existing one. Untitled UI is typically my default choice.
Close collaboration and communication are key to shaping the best possible product. Slack and Loom are my tools of choice for keeping everyone in the loop with regular updates.
![](https://framerusercontent.com/images/9q3gP09qvWNjhaiymrP77ADI.png)
Defining the information architecture for the app enabled us to make progressive improvements to its components.
The main goal of the project was to define top priorities and establish a foundation for the app to grow consistently. Knowing from the outset that the frontend would be built using TailwindCSS, the decision to use UntitledUI was made, as it is clearly one of the best solutions for translating Figma designs into code.
We began by undertaking a major rework and reorganization of the navigation system. Simultaneously, we initiated the development of the appropriate component system for the various areas of the layout. Facilitating the design-to-development handoff was a significant aspect of this collaboration. To ensure clarity and alignment, we created regular videos to explain design decisions throughout the process. This approach also facilitated a deeper understanding of my design rationale by the development team.
Defining the information architecture for the app enabled us to make progressive improvements to its components.
The main goal of the project was to define top priorities and establish a foundation for the app to grow consistently. Knowing from the outset that the frontend would be built using TailwindCSS, the decision to use UntitledUI was made, as it is clearly one of the best solutions for translating Figma designs into code.
We began by undertaking a major rework and reorganization of the navigation system. Simultaneously, we initiated the development of the appropriate component system for the various areas of the layout. Facilitating the design-to-development handoff was a significant aspect of this collaboration. To ensure clarity and alignment, we created regular videos to explain design decisions throughout the process. This approach also facilitated a deeper understanding of my design rationale by the development team.
Defining the information architecture for the app enabled us to make progressive improvements to its components.
The main goal of the project was to define top priorities and establish a foundation for the app to grow consistently. Knowing from the outset that the frontend would be built using TailwindCSS, the decision to use UntitledUI was made, as it is clearly one of the best solutions for translating Figma designs into code.
We began by undertaking a major rework and reorganization of the navigation system. Simultaneously, we initiated the development of the appropriate component system for the various areas of the layout. Facilitating the design-to-development handoff was a significant aspect of this collaboration. To ensure clarity and alignment, we created regular videos to explain design decisions throughout the process. This approach also facilitated a deeper understanding of my design rationale by the development team.
![](https://framerusercontent.com/images/2cPkWXYA1DZO6YWWGpKe4xEREY.png)
![](https://framerusercontent.com/images/2cPkWXYA1DZO6YWWGpKe4xEREY.png)
![](https://framerusercontent.com/images/RdtYv4P4zyVS6Znw3eakcwByuAE.png)
![](https://framerusercontent.com/images/RdtYv4P4zyVS6Znw3eakcwByuAE.png)
Proving a clear path to improve the product by defining core problems and providing solutions.
Even without major feedback form the users of the web app we knew by the get go that it would be important to define a core structure and naming conventions for user management while also provide a clear hierarchy for the user roles.
This provided internal alignment to prevent terminology confusion in the future, especially if there is a need for customer support to address issues related to specific roles.
![](https://framerusercontent.com/images/9pn7Ew9aMDSpSmtIEpgElrrAI.png)
![](https://framerusercontent.com/images/9pn7Ew9aMDSpSmtIEpgElrrAI.png)
Bring up the results while adapting to every team's workflow.
This collaboration aimed to provide a strong foundation by establishing a framework for the fast-paced development of the front-end team. Therefore, there was a strong emphasis on collaborating with the founders and developers to build systems that could scale easily.
Bring up the results while adapting to every team's workflow.
This collaboration aimed to provide a strong foundation by establishing a framework for the fast-paced development of the front-end team. Therefore, there was a strong emphasis on collaborating with the founders and developers to build systems that could scale easily.
![](https://framerusercontent.com/images/QVXA1fuVMZqyaSKPgSVW23zDhnA.png)
![](https://framerusercontent.com/images/QVXA1fuVMZqyaSKPgSVW23zDhnA.png)
![](https://framerusercontent.com/images/unnWTUwXgUHAIVj5QYDJeIoVns.png)
![](https://framerusercontent.com/images/unnWTUwXgUHAIVj5QYDJeIoVns.png)
![](https://framerusercontent.com/images/qLWcJKk9T9efhRJt0WUNoFYUoZY.png)
![](https://framerusercontent.com/images/qLWcJKk9T9efhRJt0WUNoFYUoZY.png)
![](https://framerusercontent.com/images/ZxFDxnp8oykAvftwOallMRka4.png)
![](https://framerusercontent.com/images/ZxFDxnp8oykAvftwOallMRka4.png)
![](https://framerusercontent.com/images/7lyBRxzow7WG6V83Y0y18KLQD4.png)
![](https://framerusercontent.com/images/7lyBRxzow7WG6V83Y0y18KLQD4.png)
![](https://framerusercontent.com/images/lmM8b9TZQbicfjN8SkY0sgnUYA.png)
![](https://framerusercontent.com/images/lmM8b9TZQbicfjN8SkY0sgnUYA.png)
![](https://framerusercontent.com/images/9Nkl6wDiT2dGCUZldRpWqUTSnn4.png)
![](https://framerusercontent.com/images/9Nkl6wDiT2dGCUZldRpWqUTSnn4.png)
![](https://framerusercontent.com/images/KGlYA41BvyqK4IFah35sCQqW1Q.png)
![](https://framerusercontent.com/images/KGlYA41BvyqK4IFah35sCQqW1Q.png)