SIPPO is a micro mobile app solving the frustration of long commutes, unproductive home setups, and expensive co-working spaces for professionals.
SIPPO is a micro mobile app solving the frustration of long commutes, unproductive home setups, and expensive co-working spaces for professionals.
SIPPO is a micro mobile app solving the frustration of long commutes, unproductive home setups, and expensive co-working spaces for professionals.
BOLD UI
BOLD UI
BOLD UI
LEVERAGING AI
LEVERAGING AI
LEVERAGING AI
DESIGN SYSTEM
DESIGN SYSTEM
DESIGN SYSTEM
Prototype
Prototype
Prototype
This is my signature project
I am quite proud of myself for creating this product (SIPPO)
It is the most content rich project you have ever seen!
ADPList mentors loved ❤ this micro app
I also created a design system: SONATA; for this Micro App
Sneak Peek
Behind the Design
Design System Integration
Artifacts
What is it all about?
"Let's get straight to the point"
Problem
Busy professionals struggle to find affordable, convenient workspaces that let them escape unproductive home environments and long commutes.
Solution
SIPPO provides a micro mobile app for on-demand booking of nearby workspaces and meeting rooms, offering flexibility, affordability, and convenience at their fingertips.
Pain Points
Lack of accessible and affordable co-working spaces near residential areas.
Cafes and restaurants limit how long individuals can stay without making a purchase.
🌏 Real World Applications
Final Prototype
Project Specifics
"The What, Wow 🤯 and How part of the project!"
WHAT
Duration
7 Months
My Role
Product Designer - Research & Design
Scope
End - to end miro app
Design system creation
User-focused research & strategy
Brand visuals, icons & business modelling
WOW 🤯
Going The
Extra Mile ✨
Variables & conditional logic (Figma)
Custom icons & graphics (AI powered)
Original food menu
Design Level
Custom UI and design language
New design system (built from scratch)
Documentation (with tokens & components)
Business Level
Business Model
Value Proposition Canvas
HOW
Approach
Double diamond combined with user-centric design
Research Methods
Secondary research
Competitor analysis
Personal interviews
Usability Testing
Tools Used
Figma
Clipchamp
ChatGPT
Canva
Freepik AI
🤯 Fun Fact
This project is the most content rich and technically complex(tool wise) project I have ever done. This micro app made use of about 87 variables (including design tokens) and a lot of conditional logic in Figma in order to achieve the awesome micro app that you will experience in this project.
P.S. This micro app is best experienced on an android mobile device.
Contents
"Sneak Peak into the research, features and design of SIPPO!"
App Screenshots
Personas
Secondary Research
Usability Testing Insights
Sitemap
Business Model
EM
Value Proposition Canvas
EM
EM
- Extra mile stuff I did for this project
the
MENU
The entire Dine & Eats menu images are AI-generated using Freepik's AI image generator, with fine-tuned prompts to create the most realistic visuals in the app.
Explore menu
Unique Selling Points (USPs)
"What Makes SIPPO Stand Out 🏆"
FOR USERS
Location-Based Convenience
Finding workspaces near the user's home, reducing commute time.
Integrated Meal Options
Add healthy meals to your booking, a unique feature not commonly found in other apps.
Flexible Day-Based Booking
Book workspaces only for the days you need, offering more user flexibility than fixed passes found on other apps.
FOR BUSINESS
Revenue Streams Diversity
Multiple income sources from bookings, memberships(coming soon), food services, and events.
High Utilization Rate
Maximizes workspace occupancy with flexible booking, increasing revenue potential per square foot.
Cost Efficiency
Provides affordable options for freelancers and businesses, with transparent pricing and meal inclusions not offered by competitors.
Let’s create something Amazing together—reach out for exciting work opportunities, whether full-time or freelance!
Say Hi! 👋
What is it all about?
"Let's get straight to the point"
Problem
Busy professionals struggle to find affordable, convenient workspaces that let them escape unproductive home environments and long commutes.
Solution
SIPPO provides a micro mobile app for on-demand booking of nearby workspaces and meeting rooms, offering flexibility, affordability, and convenience at their fingertips.
Pain Points
Lack of accessible and affordable co-working spaces near residential areas.
Cafes and restaurants limit how long individuals can stay without making a purchase.
🌏 Real World Applications
Final Prototype
Project Specifics
"The What, Wow 🤯 and How part of the project!"
WHAT
Duration
7 Months
My Role
Product Designer - Research & Design
Scope
End - to end miro app
Design system creation
User-focused research & strategy
Brand visuals, icons & business modelling
WOW 🤯
Going The
Extra Mile ✨
Variables & conditional logic (Figma)
Custom icons & graphics (AI powered)
Original food menu
Design Level
Custom UI and design language
New design system (built from scratch)
Documentation (with tokens & components)
Business Level
Business Model
Value Proposition Canvas
HOW
Approach
Double diamond combined with user-centric design
Research Methods
Secondary research
Competitor analysis
Personal interviews
Usability Testing
Tools Used
Figma
Clipchamp
ChatGPT
Canva
Freepik AI
🤯 Fun Fact
This project is the most content rich and technically complex(tool wise) project I have ever done. This micro app made use of about 87 variables (including design tokens) and a lot of conditional logic in Figma in order to achieve the awesome micro app that you will experience in this project.
P.S. This micro app is best experienced on an android mobile device.
Contents
"Sneak Peak into the research, features and design of SIPPO!"
App Screenshots
Personas
Secondary Research
Usability Testing Insights
Sitemap
Business Model
EM
Value Proposition Canvas
EM
EM
- Extra mile stuff I did for this project
the
MENU
The entire Dine & Eats menu images are AI-generated using Freepik's AI image generator, with fine-tuned prompts to create the most realistic visuals in the app.
Explore menu
Unique Selling Points (USPs)
"What Makes SIPPO Stand Out 🏆"
FOR USERS
Location-Based Convenience
Finding workspaces near the user's home, reducing commute time.
Integrated Meal Options
Add healthy meals to your booking, a unique feature not commonly found in other apps.
Flexible Day-Based Booking
Book workspaces only for the days you need, offering more user flexibility than fixed passes found on other apps.
FOR BUSINESS
Revenue Streams Diversity
Multiple income sources from bookings, memberships(coming soon), food services, and events.
High Utilization Rate
Maximizes workspace occupancy with flexible booking, increasing revenue potential per square foot.
Cost Efficiency
Provides affordable options for freelancers and businesses, with transparent pricing and meal inclusions not offered by competitors.
Let’s create something Amazing together—reach out for exciting work opportunities, whether full-time or freelance!
Say Hi! 👋
Sneak Peek
Behind the Design
Design System Integration
Artifacts
What is it all about?
"Let's get straight to the point"
Problem
Busy professionals struggle to find affordable, convenient workspaces that let them escape unproductive home environments and long commutes.
Solution
SIPPO provides a micro mobile app for on-demand booking of nearby workspaces and meeting rooms, offering flexibility, affordability, and convenience at their fingertips.
Pain Points
Lack of accessible and affordable co-working spaces near residential areas.
Cafes and restaurants limit how long individuals can stay without making a purchase.
🌏 Real World Applications
Final Prototype
Project Specifics
"The What, Wow 🤯 and How part of the project!"
WHAT
Duration
7 Months
My Role
Product Designer - Research & Design
Scope
End - to end miro app
Design system creation
User-focused research & strategy
Brand visuals, icons & business modelling
HOW
Approach
Double diamond combined with user-centric design
Research Methods
Secondary research
Competitor analysis
Personal interviews
Usability Testing
Tools Used
Figma
Clipchamp
ChatGPT
Canva
Freepik AI
WOW 🤯
Going The
Extra Mile ✨
Variables & conditional logic (Figma)
Custom icons & graphics (AI powered)
Original food menu
Design Level
Custom UI and design language
New design system (built from scratch)
Documentation (with tokens & components)
Business Level
Business Model
Value Proposition Canvas
🤯 Fun Fact
This project is the most content rich and technically complex(tool wise) project I have ever done. This micro app made use of about 87 variables (including design tokens) and a lot of conditional logic in Figma in order to achieve the awesome micro app that you will experience in this project.
P.S. This micro app is best experienced on an android mobile device.
Contents
"Sneak Peak into the research, features and design of SIPPO!"
App Screenshots
Personas
Secondary Research
Usability Testing Insights
Sitemap
Business Model
EM
Value Proposition Canvas
EM
EM
- Extra mile stuff I did for this project
the
MENU
The entire Dine & Eats menu images are AI-generated using Freepik's AI image generator, with fine-tuned prompts to create the most realistic visuals in the app.
Explore menu
Unique Selling Points (USPs)
"What Makes SIPPO Stand Out 🏆"
FOR USERS
Location-Based Convenience
Finding workspaces near the user's home, reducing commute time.
Integrated Meal Options
Add healthy meals to your booking, a unique feature not commonly found in other apps.
Flexible Day-Based Booking
Book workspaces only for the days you need, offering more user flexibility than fixed passes found on other apps.
FOR BUSINESS
Revenue Streams Diversity
Multiple income sources from bookings, memberships(coming soon), food services, and events.
High Utilization Rate
Maximizes workspace occupancy with flexible booking, increasing revenue potential per square foot.
Cost Efficiency
Provides affordable options for freelancers and businesses, with transparent pricing and meal inclusions not offered by competitors.
Let’s create something Amazing together—reach out for exciting work opportunities, whether full-time or freelance!
Say Hi! 👋
Sneak Peak
Methodology & Approach
"Just the jist physicist 😉"
SIPPO’s design journey followed the Double Diamond model integrated with a User-Centered approach. This combination allowed me to explore user needs with clarity, define the problem with precision, develop ideas that are focused on real-world issues, and deliver a tested, user-validated solution. The outcome? A design that’s not only functional but also genuinely centered on the users’ day-to-day workspace needs.
Discover Phase
"Let's Empathize and Explore the market 🕵️♂️"
The Discover phase involved extensive research to empathize with users. I conducted user interviews, secondary research and competitive analysis to understand frustrations with traditional co-working spaces, particularly focusing on flexibility, cost, and proximity. I ensured this exploration was broad and open-ended, focusing on capturing as much information about user needs and pain points as possible.
Outcome
The combination allowed for a user-centered foundation that helped identify recurring challenges like commute times, workspace costs, and productivity needs.
Open the images in a new tab and zoom to view the images if not clearly visible
Like what you are seeing so far? Let’s create something Amazing together—reach out for exciting work opportunities, whether full-time or freelance!
Say Hi! 👋
Define Phase
"Zeroing in on what they want"
The insights from the Discover phase were distilled into specific user personas and journey maps. Following the Double Diamond’s Define process allowed me to narrow the focus and craft a precise, user-centric problem statement
Outcome
A refined understanding of the core user problem, leading to a targeted solution that directly addressed users’ needs, such as flexible, affordable, and accessible workspace options.
Open the images in a new tab and zoom to view the images if not clearly visible
Develop Phase
"Alright! Let's get to work. It's time to ideate and prototype 🧪"
In the Develop phase, I focused on ideation and prototyping, testing multiple concepts with users. Based on their feedback, I was able to refine key features such as day-based booking and meal add-ons. Iterative testing ensured each design choice resonated with users’ expectations for flexibility and convenience.
Outcome
This led to the creation of crazy 8s, wireframes and early prototypes that reflected user preferences and addressed pain points. The iterative testing confirmed that the solutions aligned with users’ expectations.
Crazy 8s
Wireframes
Usability Testing Insights
Lo-Fi Screens
Initial Designs
Open the images in a new tab and zoom to view the images if not clearly visible
Deliver Phase
"Post Usability Testing UI Revamp and Final Prototype"
The Deliver phase was used to finalize designs, ensuring that the solution effectively addressed the problem statement and fulfilled user needs. By focusing on real user feedback in this phase, I ensured that the final design was practical, usable, and ready for launch.
Outcome
The solution was polished and prepared for implementation, with the design system ensuring consistency. The app met users’ needs for flexibility, cost-effectiveness, and ease of access.
💡 Pro Tip:
SIPPO micro app is best experienced on an Android phone. I'm not making this up, it really is smooth and awesome with amazing interactions, animations and vibrant pages!
Conclusion
"We have reached the end"
By combining the Double Diamond model’s structured phases with the user-centered focus of UCD, I was able to keep users at the heart of the design process while following a clear, methodical approach to problem-solving. Each Double Diamond phase was supported by UCD methods, ensuring that SIPPO’s development was both thorough and user-focused at every stage.
Like what you are seeing so far? Let’s create something Amazing together—reach out for exciting work opportunities, whether full-time or freelance!
Say Hi! 👋
Methodology & Approach
"Just the jist physicist 😉"
SIPPO’s design journey followed the Double Diamond model integrated with a User-Centered approach. This combination allowed me to explore user needs with clarity, define the problem with precision, develop ideas that are focused on real-world issues, and deliver a tested, user-validated solution. The outcome? A design that’s not only functional but also genuinely centered on the users’ day-to-day workspace needs.
Discover Phase
"Let's Empathize and Explore the market 🕵️♂️"
The Discover phase involved extensive research to empathize with users. I conducted user interviews, secondary research and competitive analysis to understand frustrations with traditional co-working spaces, particularly focusing on flexibility, cost, and proximity. I ensured this exploration was broad and open-ended, focusing on capturing as much information about user needs and pain points as possible.
Outcome
The combination allowed for a user-centered foundation that helped identify recurring challenges like commute times, workspace costs, and productivity needs.
Open the images in a new tab and zoom to view the images if not clearly visible
Like what you are seeing so far? Let’s create something Amazing together—reach out for exciting work opportunities, whether full-time or freelance!
Say Hi! 👋
Define Phase
"Zeroing in on what they want"
The insights from the Discover phase were distilled into specific user personas and journey maps. Following the Double Diamond’s Define process allowed me to narrow the focus and craft a precise, user-centric problem statement
Outcome
A refined understanding of the core user problem, leading to a targeted solution that directly addressed users’ needs, such as flexible, affordable, and accessible workspace options.
Open the images in a new tab and zoom to view the images if not clearly visible
Develop Phase
"Alright! Let's get to work. It's time to ideate and prototype 🧪"
In the Develop phase, I focused on ideation and prototyping, testing multiple concepts with users. Based on their feedback, I was able to refine key features such as day-based booking and meal add-ons. Iterative testing ensured each design choice resonated with users’ expectations for flexibility and convenience.
Outcome
This led to the creation of crazy 8s, wireframes and early prototypes that reflected user preferences and addressed pain points. The iterative testing confirmed that the solutions aligned with users’ expectations.
Crazy 8s
Wireframes
Usability Testing Insights
Lo-Fi Screens
Initial Designs
Open the images in a new tab and zoom to view the images if not clearly visible
Deliver Phase
"Post Usability Testing UI Revamp and Final Prototype"
The Deliver phase was used to finalize designs, ensuring that the solution effectively addressed the problem statement and fulfilled user needs. By focusing on real user feedback in this phase, I ensured that the final design was practical, usable, and ready for launch.
Outcome
The solution was polished and prepared for implementation, with the design system ensuring consistency. The app met users’ needs for flexibility, cost-effectiveness, and ease of access.
💡 Pro Tip:
SIPPO micro app is best experienced on an Android phone. I'm not making this up, it really is smooth and awesome with amazing interactions, animations and vibrant pages!
Conclusion
"We have reached the end"
By combining the Double Diamond model’s structured phases with the user-centered focus of UCD, I was able to keep users at the heart of the design process while following a clear, methodical approach to problem-solving. Each Double Diamond phase was supported by UCD methods, ensuring that SIPPO’s development was both thorough and user-focused at every stage.
Like what you are seeing so far? Let’s create something Amazing together—reach out for exciting work opportunities, whether full-time or freelance!
Say Hi! 👋
Behind the Design
Hello
SONATA!
"This is my attempt at creating a functional design system for Android mobile devices"
SONATA is SIPPO’s custom design system, created to bring visual consistency, reusability, and a streamlined design-development workflow across the app. Purpose-built to address SIPPO's specific needs for a cohesive and flexible design, ensuring each component aligns with SIPPO’s user experience goals.
Why was it built?
"It's purpose is to aid in providing a seamless app experience"
Scalability: SIPPO’s evolving feature set needed a scalable system for seamless additions.
Consistency: By centralizing design assets, SONATA ensures SIPPO’s branding and design language remain uniform.
Efficiency: Reduces repetitive design work by providing ready-to-use components, enhancing productivity.
Inconsistency in initial designs of the micro app:
Open the images in a new tab and zoom to view the images if not clearly visible
Building Blocks of SONATA
"Core foundational elements of SONATA"
Core Components: Essential elements like buttons, cards, icons, and typographic scales that provide the foundation for SIPPO’s UI.
Design Tokens: A structured set of variables for colors, fonts, and spacing, making it easy to maintain and change themes across the app.
Like what you are seeing so far? Let’s create something Amazing together—reach out for exciting work opportunities, whether full-time or freelance!
Say Hi! 👋
Integration Process with SIPPO
"The marriage between design system and mobile app"
Research & Planning: Extensive research and learning was done to identify essential components, interactions, and patterns needed in SIPPO by looking at other Design Systems like Base and Material Design.
Design & Prototyping: Components were prototyped in Figma and iteratively tested to ensure they fit seamlessly with SIPPO’s user flows.
Open the images in a new tab and zoom to view the images if not clearly visible
Benefits of SONATA for SIPPO
"Why does this marriage work?"
Consistency: SONATA ensures a uniform look and feel, improving the user experience by reducing visual inconsistencies.
Speed & Efficiency: Pre-built components accelerate the design-to-development pipeline, enabling faster feature rollouts.
Maintainability: With centralized design tokens and reusable modules, updates to the app’s design are seamless and efficient.
User Satisfaction: By addressing pain points through intuitive design elements, SONATA contributes directly to improved user - satisfaction and engagement with SIPPO.
Open the images in a new tab and zoom to view the images if not clearly visible
Accessibility
"A step forward in the right direction"
Inclusive Design: SONATA is built to be accessible, following WCAG standards to make SIPPO usable for people of all abilities.
High Contrast & Readable Fonts: Carefully chosen contrast and font sizes enhance readability, especially for visually impaired users.
Future upgrades
Since this micro app is a prototype and not an actual app, only basic accessibility requirements have been met. Future versions will focus on making the design system more accessible in areas like Keyboard navigation, Scalable UI for different zoom levels and screen reader technology.
Like what you are seeing so far? Let’s create something Amazing together—reach out for exciting work opportunities, whether full-time or freelance!
Say Hi! 👋
Hello
SONATA!
"This is my attempt at creating a functional design system for Android mobile devices"
SONATA is SIPPO’s custom design system, created to bring visual consistency, reusability, and a streamlined design-development workflow across the app. Purpose-built to address SIPPO's specific needs for a cohesive and flexible design, ensuring each component aligns with SIPPO’s user experience goals.
Why was it built?
"It's purpose is to aid in providing a seamless app experience"
Scalability: SIPPO’s evolving feature set needed a scalable system for seamless additions.
Consistency: By centralizing design assets, SONATA ensures SIPPO’s branding and design language remain uniform.
Efficiency: Reduces repetitive design work by providing ready-to-use components, enhancing productivity.
Inconsistency in initial designs of the micro app:
Open the images in a new tab and zoom to view the images if not clearly visible
Building Blocks of SONATA
"Core foundational elements of SONATA"
Core Components: Essential elements like buttons, cards, icons, and typographic scales that provide the foundation for SIPPO’s UI.
Design Tokens: A structured set of variables for colors, fonts, and spacing, making it easy to maintain and change themes across the app.
Like what you are seeing so far? Let’s create something Amazing together—reach out for exciting work opportunities, whether full-time or freelance!
Say Hi! 👋
Integration Process with SIPPO
"The marriage between design system and mobile app"
Research & Planning: Extensive research and learning was done to identify essential components, interactions, and patterns needed in SIPPO by looking at other Design Systems like Base and Material Design.
Design & Prototyping: Components were prototyped in Figma and iteratively tested to ensure they fit seamlessly with SIPPO’s user flows.
Open the images in a new tab and zoom to view the images if not clearly visible
Benefits of SONATA for SIPPO
"Why does this marriage work?"
Consistency: SONATA ensures a uniform look and feel, improving the user experience by reducing visual inconsistencies.
Speed & Efficiency: Pre-built components accelerate the design-to-development pipeline, enabling faster feature rollouts.
Maintainability: With centralized design tokens and reusable modules, updates to the app’s design are seamless and efficient.
User Satisfaction: By addressing pain points through intuitive design elements, SONATA contributes directly to improved user - satisfaction and engagement with SIPPO.
Open the images in a new tab and zoom to view the images if not clearly visible
Accessibility
"A step forward in the right direction"
Inclusive Design: SONATA is built to be accessible, following WCAG standards to make SIPPO usable for people of all abilities.
High Contrast & Readable Fonts: Carefully chosen contrast and font sizes enhance readability, especially for visually impaired users.
Future upgrades
Since this micro app is a prototype and not an actual app, only basic accessibility requirements have been met. Future versions will focus on making the design system more accessible in areas like Keyboard navigation, Scalable UI for different zoom levels and screen reader technology.
Like what you are seeing so far? Let’s create something Amazing together—reach out for exciting work opportunities, whether full-time or freelance!
Say Hi! 👋
Design System Integration
Artifacts
RELATED LINKS
MY SOCIALS
@2024 Vishal's Portfolio. All rights reserved.
Brainstormed in Figma & designed in Framer
Brainstormed in Figma & designed in Framer