UX DESIGN
UI DESIGN
DESIGN SYSTEM
About
Uify is a collaborative low-code platform, which allows to build custom internal tools. With its real-time collaborative drag&drop builder, teams can quickly create dashboards apps, admin interfaces and operations portals. Uify offers more than 12 native integrations with external resources (including PostgreSQL, MongoDB, MySQL, Snowflake, Slack and many more), and can connect to anything exposing a REST API.
The visual UI builder offers more than 50 components, ranging from basic input fields to complex charts and tables. The in-browser development environment allows to define business logic by using JavaScript in our in-browser IDE, which offers sophisticated engineering features like IntelliSense, usage tracking and reactive UI updates.
Uify serves two primary user segments: engineering users, responsible for application development and maintenance, and business users, who utilize these apps in their daily operations. Satisfying both groups simultaneously has been our critical success factor from day one. I achieved this by providing an intuitive application building environment that empowers engineering teams to rapidly produce high-performing, user-friendly applications seamlessly integrated with their team's existing software infrastructure.
Learn more at https://uify.io
My role
My role was Founding Lead Designer of the product since the inception of the company, in a team of 7 engineers, a product manager and 3 founders. I established the design system, created the company branding and designed all features and interfaces from scratch.
Problem
Our users wanted to display a dynamic set of data records, for example as part of a product catalog or a list of available hotel rooms in a grid layout. However, our application builder did not offer the ability to define a UI widget once, for example a product card, and then flexibly repeat it based on dynamic data retrieved from an API or database.
Process
Discovery
During the discovery phase, I initiated the design process by conducting in-depth UX research and analysis.
This involved:
Conducting user interviews and surveys to understand pain points and user needs.
Analyzing user feedback and support tickets to identify recurring issues related to dynamic data display.
Studying competitor solutions and industry trends to gain insights into best practices. Using Miro board to collect all data.
Initiating a workshop with engineers for possible solutions and timeframe
Define
Based on the insights gathered during the discovery phase, I defined the problem statement and set clear objectives for the new feature. At this phase my steps were following:
Creating a problem statement that outlined the challenge of enabling flexible repetition of components for dynamic data sets.
Identifying the specific user segments that would benefit from the new feature, such as application builders and end-users.
Establishing success metrics to measure the effectiveness of the solution.
Develop
In the development phase, I collaborated closely with the engineering team to ideate, prototype, and refine the List Component feature. This step involved:
Brainstorming and ideating potential solutions with cross-functional teams, including founders, developers and product manager.
Generating multiple design concepts and exploring different approaches to implementing the new component.
Creating low-fidelity wireframes to visualize different approaches and gather feedback from engineers and product manager.
Deliver
In the delivery phase, I focused on delivering the final product to users and ensuring its successful implementation. This phase included:
Creating interactive prototypes of the List Component feature in Figma.
Iterating on the prototype based on internal feedback and usability tests.
Handing over design and documentation to engineers for implementation.
Conducting usability tests to detect bugs and edge cases for further improvements.
Success metrics
The List Component was successfully released to our users after selectively testing the solution with core user groups in our Slack communities. After several weeks of adoption, we validated the success of the implementation with the following key metrics:
User satisfaction: An automated survey to all application building users with exposure to the List Component resulted in 82% of participants answering that the new component is “highly useful” for their applications.
Adoption: We observed a consistently rising share of new applications containing the List Component of 7% after 6 weeks and 16% after 18 weeks.
New use cases: After promoting the feature to the ca. 50 customers with which we had established direct communication channels (e.g. shared Slack), we were able to identify 18 new use cases that would have been either impossible or very tedious to build without the new List Component.
In addition to the quantitative metrics derived from our user base, we observed immediate adoption of the new component within our own usage scenarios. As avid users of our own platform, we began creating new applications centered around the List Component and also revising existing ones. This project stands out as a resounding success, with the new component serving as a crucial enhancement to our platform and enriching our value proposition for users.
My learnings
Given the considerable complexity in design and numerous technical hurdles to overcome to satisfy our engineering users, this project proved both challenging and exciting for me. I would like to highlight the importance of the following methodologies and approaches that enabled me to deliver a compelling solution and successful project outcome:
User-Centric Design: Demonstrating the importance of listening to user feedback and understanding their needs. By addressing the challenge of dynamically repeating sets of components, I showcased my commitment to user-centric design and my ability to iterate and improve our platform based on user input.
Iterative Development Process: Emphasizing the value of an iterative development process in product design. Through multiple rounds of ideation, prototyping, and testing, I was able to refine the repeating component feature to meet user requirements effectively while maintaining usability and simplicity.
Cross-Functional Collaboration: Highlighting the benefits of cross-functional collaboration between design, engineering, and product management teams. By collaborating closely with engineering counterparts, I was able to translate design concepts into a functional feature that seamlessly integrated into our platform.
Usability Testing and Feedback: Underscoring the importance of usability testing and gathering feedback throughout the design process. By conducting usability tests with real users and soliciting feedback at each stage of development, I was able to identify and address usability issues, ensuring that the repeating component feature met user needs and expectations.
Impact on User Experience: Showcasing the positive impact of the List Component feature on the overall user experience of our platform. By enabling users to create flexible layouts with dynamic data displays, I enhanced the usability, efficiency, and versatility of our platform, ultimately improving user satisfaction and retention.
For a general understanding of the Uify platform, please watch the video below. You can see how I designed the product and how it works 🚀
UX DESIGN
UI DESIGN
DESIGN SYSTEM
About
Uify is a collaborative low-code platform, which allows to build custom internal tools. With its real-time collaborative drag&drop builder, teams can quickly create dashboards apps, admin interfaces and operations portals. Uify offers more than 12 native integrations with external resources (including PostgreSQL, MongoDB, MySQL, Snowflake, Slack and many more), and can connect to anything exposing a REST API.
The visual UI builder offers more than 50 components, ranging from basic input fields to complex charts and tables. The in-browser development environment allows to define business logic by using JavaScript in our in-browser IDE, which offers sophisticated engineering features like IntelliSense, usage tracking and reactive UI updates.
Uify serves two primary user segments: engineering users, responsible for application development and maintenance, and business users, who utilize these apps in their daily operations. Satisfying both groups simultaneously has been our critical success factor from day one. I achieved this by providing an intuitive application building environment that empowers engineering teams to rapidly produce high-performing, user-friendly applications seamlessly integrated with their team's existing software infrastructure.
Learn more at https://uify.io
My role
My role was Founding Lead Designer of the product since the inception of the company, in a team of 7 engineers, a product manager and 3 founders. I established the design system, created the company branding and designed all features and interfaces from scratch.
Problem
Our users wanted to display a dynamic set of data records, for example as part of a product catalog or a list of available hotel rooms in a grid layout. However, our application builder did not offer the ability to define a UI widget once, for example a product card, and then flexibly repeat it based on dynamic data retrieved from an API or database.
Process
Discovery
During the discovery phase, I initiated the design process by conducting in-depth UX research and analysis.
This involved:
Conducting user interviews and surveys to understand pain points and user needs.
Analyzing user feedback and support tickets to identify recurring issues related to dynamic data display.
Studying competitor solutions and industry trends to gain insights into best practices. Using Miro board to collect all data.
Initiating a workshop with engineers for possible solutions and timeframe
Define
Based on the insights gathered during the discovery phase, I defined the problem statement and set clear objectives for the new feature. At this phase my steps were following:
Creating a problem statement that outlined the challenge of enabling flexible repetition of components for dynamic data sets.
Identifying the specific user segments that would benefit from the new feature, such as application builders and end-users.
Establishing success metrics to measure the effectiveness of the solution.
Develop
In the development phase, I collaborated closely with the engineering team to ideate, prototype, and refine the List Component feature. This step involved:
Brainstorming and ideating potential solutions with cross-functional teams, including founders, developers and product manager.
Generating multiple design concepts and exploring different approaches to implementing the new component.
Creating low-fidelity wireframes to visualize different approaches and gather feedback from engineers and product manager.
Deliver
In the delivery phase, I focused on delivering the final product to users and ensuring its successful implementation. This phase included:
Creating interactive prototypes of the List Component feature in Figma.
Iterating on the prototype based on internal feedback and usability tests.
Handing over design and documentation to engineers for implementation.
Conducting usability tests to detect bugs and edge cases for further improvements.
Success metrics
The List Component was successfully released to our users after selectively testing the solution with core user groups in our Slack communities. After several weeks of adoption, we validated the success of the implementation with the following key metrics:
User satisfaction: An automated survey to all application building users with exposure to the List Component resulted in 82% of participants answering that the new component is “highly useful” for their applications.
Adoption: We observed a consistently rising share of new applications containing the List Component of 7% after 6 weeks and 16% after 18 weeks.
New use cases: After promoting the feature to the ca. 50 customers with which we had established direct communication channels (e.g. shared Slack), we were able to identify 18 new use cases that would have been either impossible or very tedious to build without the new List Component.
In addition to the quantitative metrics derived from our user base, we observed immediate adoption of the new component within our own usage scenarios. As avid users of our own platform, we began creating new applications centered around the List Component and also revising existing ones. This project stands out as a resounding success, with the new component serving as a crucial enhancement to our platform and enriching our value proposition for users.
My learnings
Given the considerable complexity in design and numerous technical hurdles to overcome to satisfy our engineering users, this project proved both challenging and exciting for me. I would like to highlight the importance of the following methodologies and approaches that enabled me to deliver a compelling solution and successful project outcome:
User-Centric Design: Demonstrating the importance of listening to user feedback and understanding their needs. By addressing the challenge of dynamically repeating sets of components, I showcased my commitment to user-centric design and my ability to iterate and improve our platform based on user input.
Iterative Development Process: Emphasizing the value of an iterative development process in product design. Through multiple rounds of ideation, prototyping, and testing, I was able to refine the repeating component feature to meet user requirements effectively while maintaining usability and simplicity.
Cross-Functional Collaboration: Highlighting the benefits of cross-functional collaboration between design, engineering, and product management teams. By collaborating closely with engineering counterparts, I was able to translate design concepts into a functional feature that seamlessly integrated into our platform.
Usability Testing and Feedback: Underscoring the importance of usability testing and gathering feedback throughout the design process. By conducting usability tests with real users and soliciting feedback at each stage of development, I was able to identify and address usability issues, ensuring that the repeating component feature met user needs and expectations.
Impact on User Experience: Showcasing the positive impact of the List Component feature on the overall user experience of our platform. By enabling users to create flexible layouts with dynamic data displays, I enhanced the usability, efficiency, and versatility of our platform, ultimately improving user satisfaction and retention.
For a general understanding of the Uify platform, please watch the video below. You can see how I designed the product and how it works 🚀
UX DESIGN
UI DESIGN
DESIGN SYSTEM
About
Uify is a collaborative low-code platform, which allows to build custom internal tools. With its real-time collaborative drag&drop builder, teams can quickly create dashboards apps, admin interfaces and operations portals. Uify offers more than 12 native integrations with external resources (including PostgreSQL, MongoDB, MySQL, Snowflake, Slack and many more), and can connect to anything exposing a REST API.
The visual UI builder offers more than 50 components, ranging from basic input fields to complex charts and tables. The in-browser development environment allows to define business logic by using JavaScript in our in-browser IDE, which offers sophisticated engineering features like IntelliSense, usage tracking and reactive UI updates.
Uify serves two primary user segments: engineering users, responsible for application development and maintenance, and business users, who utilize these apps in their daily operations. Satisfying both groups simultaneously has been our critical success factor from day one. I achieved this by providing an intuitive application building environment that empowers engineering teams to rapidly produce high-performing, user-friendly applications seamlessly integrated with their team's existing software infrastructure.
Learn more at https://uify.io
My role
My role was Founding Lead Designer of the product since the inception of the company, in a team of 7 engineers, a product manager and 3 founders. I established the design system, created the company branding and designed all features and interfaces from scratch.
Problem
Our users wanted to display a dynamic set of data records, for example as part of a product catalog or a list of available hotel rooms in a grid layout. However, our application builder did not offer the ability to define a UI widget once, for example a product card, and then flexibly repeat it based on dynamic data retrieved from an API or database.
Process
Discovery
During the discovery phase, I initiated the design process by conducting in-depth UX research and analysis.
This involved:
Conducting user interviews and surveys to understand pain points and user needs.
Analyzing user feedback and support tickets to identify recurring issues related to dynamic data display.
Studying competitor solutions and industry trends to gain insights into best practices. Using Miro board to collect all data.
Initiating a workshop with engineers for possible solutions and timeframe
Define
Based on the insights gathered during the discovery phase, I defined the problem statement and set clear objectives for the new feature. At this phase my steps were following:
Creating a problem statement that outlined the challenge of enabling flexible repetition of components for dynamic data sets.
Identifying the specific user segments that would benefit from the new feature, such as application builders and end-users.
Establishing success metrics to measure the effectiveness of the solution.
Develop
In the development phase, I collaborated closely with the engineering team to ideate, prototype, and refine the List Component feature. This step involved:
Brainstorming and ideating potential solutions with cross-functional teams, including founders, developers and product manager.
Generating multiple design concepts and exploring different approaches to implementing the new component.
Creating low-fidelity wireframes to visualize different approaches and gather feedback from engineers and product manager.
Deliver
In the delivery phase, I focused on delivering the final product to users and ensuring its successful implementation. This phase included:
Creating interactive prototypes of the List Component feature in Figma.
Iterating on the prototype based on internal feedback and usability tests.
Handing over design and documentation to engineers for implementation.
Conducting usability tests to detect bugs and edge cases for further improvements.
Success metrics
The List Component was successfully released to our users after selectively testing the solution with core user groups in our Slack communities. After several weeks of adoption, we validated the success of the implementation with the following key metrics:
User satisfaction: An automated survey to all application building users with exposure to the List Component resulted in 82% of participants answering that the new component is “highly useful” for their applications.
Adoption: We observed a consistently rising share of new applications containing the List Component of 7% after 6 weeks and 16% after 18 weeks.
New use cases: After promoting the feature to the ca. 50 customers with which we had established direct communication channels (e.g. shared Slack), we were able to identify 18 new use cases that would have been either impossible or very tedious to build without the new List Component.
In addition to the quantitative metrics derived from our user base, we observed immediate adoption of the new component within our own usage scenarios. As avid users of our own platform, we began creating new applications centered around the List Component and also revising existing ones. This project stands out as a resounding success, with the new component serving as a crucial enhancement to our platform and enriching our value proposition for users.
My learnings
Given the considerable complexity in design and numerous technical hurdles to overcome to satisfy our engineering users, this project proved both challenging and exciting for me. I would like to highlight the importance of the following methodologies and approaches that enabled me to deliver a compelling solution and successful project outcome:
User-Centric Design: Demonstrating the importance of listening to user feedback and understanding their needs. By addressing the challenge of dynamically repeating sets of components, I showcased my commitment to user-centric design and my ability to iterate and improve our platform based on user input.
Iterative Development Process: Emphasizing the value of an iterative development process in product design. Through multiple rounds of ideation, prototyping, and testing, I was able to refine the repeating component feature to meet user requirements effectively while maintaining usability and simplicity.
Cross-Functional Collaboration: Highlighting the benefits of cross-functional collaboration between design, engineering, and product management teams. By collaborating closely with engineering counterparts, I was able to translate design concepts into a functional feature that seamlessly integrated into our platform.
Usability Testing and Feedback: Underscoring the importance of usability testing and gathering feedback throughout the design process. By conducting usability tests with real users and soliciting feedback at each stage of development, I was able to identify and address usability issues, ensuring that the repeating component feature met user needs and expectations.
Impact on User Experience: Showcasing the positive impact of the List Component feature on the overall user experience of our platform. By enabling users to create flexible layouts with dynamic data displays, I enhanced the usability, efficiency, and versatility of our platform, ultimately improving user satisfaction and retention.
For a general understanding of the Uify platform, please watch the video below. You can see how I designed the product and how it works 🚀