To highlight my skills in working with complex Design Systems and Libraries, I will showcase a messaging and calling app with a virtual number that I designed for two platforms: Web using React MUI and mobile devices using Flutter. My approach to this project involves creating reusable components and leveraging platform-specific design elements to maintain a consistent look and feel across both web and mobile platforms.
Problems
Limited client's budget for both Web and Mobile projects.
Ensuring safety when sharing a virtual number in an unknown environment.
Providing an efficient way to manage multiple virtual numbers.
Solutions
Achieved 30% faster design time with proper component usage, saving the client precious hours. Additionally, using MUI on the web app resulted in approximately 20% faster development time, further optimizing costs.
The app allows you to create a virtual number, send messages, receive calls, and make calls with no hidden fees and full transparency, ensuring your personal number remains private.
Created a user-friendly dashboard that allows users to easily manage and switch between multiple virtual numbers. Utilized tools like Hotjar to monitor user interactions, creating heatmaps and session recordings to identify areas for improvement.
Industry:
Telecommunications
Platform:
Mobile, WebApp
Year:
2024
Role:
Lead UX/UI
Challenges & Approach
To deliver a faster and more efficient solution to developers and the client, I initially developed a core component structure for Mobile - Flutter. Then, I adapted these components to their React MUI equivalents for web development, ensuring that each platform maintained its cohesive look and feel while sharing a common design foundation.
Scalability: Carefully prepared components were built to scale dynamically across devices and screen sizes, ensuring a consistent user experience.
Variables for Fonts: Using design tokens allowed me to tailor typography to each platform effortlessly.
Icons: I utilized Phosphor icons for mobile platform and MUI for web.
Figma-to-Code Efficiency: Exported variables like colors and typography directly from Figma to theme.js using the official MUI plugin. This sped up the development process by providing developers with ready-to-use styles.
Interactive Prototyping: With reusable components, I quickly created clickable prototypes to improve communication between clients, designers, and developers.
Accessibility: Additionally, I ensured that all designs met accessibility standards, adhering to WCAG guidelines for contrast and readability, to provide an inclusive experience for all users.
Results
Lightning-Fast Delivery: Designed all three apps quicker than with traditional methods by starting with one and adapting it for each platform.
Time and Cost Cuts: My experience cut redundancy, and saved time and money for everyone.
Ready for the Future: With modular design and best practices in place, updates and adjustments will be a breeze.
Conclusion
Confused client? Complex apps for a specific group? No worries. Before you know it, I’ll turn your scattered ideas into a clear, clickable prototype. With a focus on smart, reusable design, I make sure the final product isn’t just good—it’s ready to grow and adapt for whatever’s next.
When a prototype isn’t needed, no problem—I can step in to create and refine designs using my tried-and-true “best practices” component-based approach. Every project I deliver is built with structure, scalability, and usability in mind.
Example component - Exported with Lottie
