Travel application

Travel Application - Voting for trip details - To showcase how SQUAGO allows friends to decide on dates, destinations, and budget via votes, making trip planning collaborative and stress-free
Project overview

SQUAGO is an app that helps friends organize their trips without any stress and in the easiest way possible.

Decide on dates, destinations, and budget via votes, share your documents for the trip, upload your incredible photos with everyone on your joint trip, and even more.

Tasks
  • Analyze the idea and explore the market of similar products
  • Create site-map and get an understanding of user flow path
  • Create mobile wireframes and build a completely clickable prototype to test the idea and better form the vision
  • Build a design system in Figma with clear guidelines
  • Create a clickable prototype for two roles Host and Member
Tools
Figma
Figma
Solutions
Outcome

As the result of the work with days of brainstorming, prototyping, and testing we have created an innovative travel app design that covers Host and Member needs for organizing their joint trips.

Solutions

Research

At this stage, we conducted competitors analysis, defined functionality for our future MVP, and based on those results created a sitemap to get a better understanding of our product’s flow.

Research - Competitors analysis - To showcase the comprehensive analysis of competitors conducted during the research stage
Research - Competitors analysis - To showcase the comprehensive analysis of competitors conducted during the research stage

Research

At this stage, we conducted competitors analysis, defined functionality for our future MVP, and based on those results created a sitemap to get a better understanding of our product’s flow.

Research

At this stage, we conducted competitors analysis, defined functionality for our future MVP, and based on those results created a sitemap to get a better understanding of our product’s flow.

Research - Competitors analysis - To showcase the comprehensive analysis of competitors conducted during the research stage
Research - Functionality definition - To illustrate how the functionality for the future MVP was defined based on research findings

Research

At this stage, we conducted competitors analysis, defined functionality for our future MVP, and based on those results created a sitemap to get a better understanding of our product’s flow.

Research - Competitors analysis - To showcase the comprehensive analysis of competitors conducted during the research stageResearch - Functionality definition - To illustrate how the functionality for the future MVP was defined based on research findingsResearch - User journey mapping - To illustrate the mapping of user journeys to ensure a smooth product flow

Research

At this stage, we conducted competitors analysis, defined functionality for our future MVP, and based on those results created a sitemap to get a better understanding of our product’s flow.

Research - Competitors analysis - To showcase the comprehensive analysis of competitors conducted during the research stageResearch - Functionality definition - To illustrate how the functionality for the future MVP was defined based on research findingsResearch - User journey mapping - To illustrate the mapping of user journeys to ensure a smooth product flow

Prototype

Based on the user flow, we've created wireframes of the main app screens and made them clickable for both host and member roles. It helped us in validating ideas and getting feedback for future design decisions.

Prototype - Clickable wireframes - To represent the visual representation of the user flow through the clickable wireframes
Prototype - Clickable wireframes - To represent the visual representation of the user flow through the clickable wireframes

Prototype

Based on the user flow, we've created wireframes of the main app screens and made them clickable for both host and member roles. It helped us in validating ideas and getting feedback for future design decisions.

Prototype

Based on the user flow, we've created wireframes of the main app screens and made them clickable for both host and member roles. It helped us in validating ideas and getting feedback for future design decisions.

Prototype - Clickable wireframes - To represent the visual representation of the user flow through the clickable wireframes

Prototype

Based on the user flow, we've created wireframes of the main app screens and made them clickable for both host and member roles. It helped us in validating ideas and getting feedback for future design decisions.

Prototype - Clickable wireframes - To represent the visual representation of the user flow through the clickable wireframes

Prototype

Based on the user flow, we've created wireframes of the main app screens and made them clickable for both host and member roles. It helped us in validating ideas and getting feedback for future design decisions.

Prototype - Clickable wireframes - To represent the visual representation of the user flow through the clickable wireframes

Design System

We started with the foundations and basic design components, during the design process we were growing the system with new components and modules as well as documenting things for other teammates.

Design System - Foundations and basic components - To showcase the initial foundations and basic design components established for the system
Design System - Foundations and basic components - To showcase the initial foundations and basic design components established for the system

Design System

We started with the foundations and basic design components, during the design process we were growing the system with new components and modules as well as documenting things for other teammates.

Design System

We started with the foundations and basic design components, during the design process we were growing the system with new components and modules as well as documenting things for other teammates.

Design System - Foundations and basic components - To showcase the initial foundations and basic design components established for the system

Design System

We started with the foundations and basic design components, during the design process we were growing the system with new components and modules as well as documenting things for other teammates.

Design System - Foundations and basic components - To showcase the initial foundations and basic design components established for the system

Design System

We started with the foundations and basic design components, during the design process we were growing the system with new components and modules as well as documenting things for other teammates.

Design System - Foundations and basic components - To showcase the initial foundations and basic design components established for the system

Role: Host

We've started from the Host user role since its functionality is noticeably larger and created mobile screens for all possible actions and outcomes. We created a clickable Figma prototype to conduct testing.

Role: Host - Mobile screens for actions and outcomes - To illustrate the mobile screens created for all possible Host actions and outcomes
Role: Host - Mobile screens for actions and outcomes - To illustrate the mobile screens created for all possible Host actions and outcomes

Role: Host

We've started from the Host user role since its functionality is noticeably larger and created mobile screens for all possible actions and outcomes. We created a clickable Figma prototype to conduct testing.

Role: Host

We've started from the Host user role since its functionality is noticeably larger and created mobile screens for all possible actions and outcomes. We created a clickable Figma prototype to conduct testing.

Role: Host - Mobile screens for actions and outcomes - To illustrate the mobile screens created for all possible Host actions and outcomes
Role: Host - Comprehensive role coverage - To represent the thorough coverage of all possible actions and outcomes for the Host role

Role: Host

We've started from the Host user role since its functionality is noticeably larger and created mobile screens for all possible actions and outcomes. We created a clickable Figma prototype to conduct testing.

Role: Host - Mobile screens for actions and outcomes - To illustrate the mobile screens created for all possible Host actions and outcomesRole: Host - Comprehensive role coverage - To represent the thorough coverage of all possible actions and outcomes for the Host roleRole: Host - Event creation and management - To illustrate the screens and flows for creating and managing events as a HostRole: Host - Streamlined interface for managing events and content - To represent the intuitive and efficient interface that allows Hosts to seamlessly manage notes, events, and images, ensuring a smooth and user-friendly experience

Role: Host

We've started from the Host user role since its functionality is noticeably larger and created mobile screens for all possible actions and outcomes. We created a clickable Figma prototype to conduct testing.

Role: Host - Mobile screens for actions and outcomes - To illustrate the mobile screens created for all possible Host actions and outcomesRole: Host - Comprehensive role coverage - To represent the thorough coverage of all possible actions and outcomes for the Host roleRole: Host - Event creation and management - To illustrate the screens and flows for creating and managing events as a HostRole: Host - Streamlined interface for managing events and content - To represent the intuitive and efficient interface that allows Hosts to seamlessly manage notes, events, and images, ensuring a smooth and user-friendly experience

Mutual screens

There were also some mutual pages in the app, such as “Explore”, “Trips” and “Chats”, so we designed them based on what different roles of users will need to use.

Mutual Screens - Customized layouts for diverse user roles - To represent how the Explore, Trips, and Chats pages were designed with features and layouts that cater to the specific requirements of various user roles
Mutual Screens - Customized layouts for diverse user roles - To represent how the Explore, Trips, and Chats pages were designed with features and layouts that cater to the specific requirements of various user roles

Mutual screens

There were also some mutual pages in the app, such as “Explore”, “Trips” and “Chats”, so we designed them based on what different roles of users will need to use.

Mutual screens

There were also some mutual pages in the app, such as “Explore”, “Trips” and “Chats”, so we designed them based on what different roles of users will need to use.

Mutual Screens - Customized layouts for diverse user roles - To represent how the Explore, Trips, and Chats pages were designed with features and layouts that cater to the specific requirements of various user roles
Mutual Screens - Integrated user experience on mutual pages - To highlight the cohesive design approach taken for the Explore, Trips, and Chats pages, ensuring consistency across different user roles

Mutual screens

There were also some mutual pages in the app, such as “Explore”, “Trips” and “Chats”, so we designed them based on what different roles of users will need to use.

Mutual Screens - Customized layouts for diverse user roles - To represent how the Explore, Trips, and Chats pages were designed with features and layouts that cater to the specific requirements of various user rolesMutual Screens - Integrated user experience on mutual pages - To highlight the cohesive design approach taken for the Explore, Trips, and Chats pages, ensuring consistency across different user roles

Mutual screens

There were also some mutual pages in the app, such as “Explore”, “Trips” and “Chats”, so we designed them based on what different roles of users will need to use.

Mutual Screens - Customized layouts for diverse user roles - To represent how the Explore, Trips, and Chats pages were designed with features and layouts that cater to the specific requirements of various user rolesMutual Screens - Integrated user experience on mutual pages - To highlight the cohesive design approach taken for the Explore, Trips, and Chats pages, ensuring consistency across different user roles

Role: Member

At the next stage of the design process, we focused on the Member role. It has lots of similar screens with the Host’s role, but gets less functionality and gives users a different experience to fit their needs.

Role: Member - Consistent user experience with tailored functionalities - To represent the consistent user experience provided for Members, with functionalities tailored to their specific needs and roles
Role: Member - Consistent user experience with tailored functionalities - To represent the consistent user experience provided for Members, with functionalities tailored to their specific needs and roles

Role: Member

At the next stage of the design process, we focused on the Member role. It has lots of similar screens with the Host’s role, but gets less functionality and gives users a different experience to fit their needs.

Role: Member

At the next stage of the design process, we focused on the Member role. It has lots of similar screens with the Host’s role, but gets less functionality and gives users a different experience to fit their needs.

Role: Member - Consistent user experience with tailored functionalities - To represent the consistent user experience provided for Members, with functionalities tailored to their specific needs and roles
Role: Member - Accessible event information - To showcase how Members can easily access detailed information about events they are participating in

Role: Member

At the next stage of the design process, we focused on the Member role. It has lots of similar screens with the Host’s role, but gets less functionality and gives users a different experience to fit their needs.

Role: Member - Consistent user experience with tailored functionalities - To represent the consistent user experience provided for Members, with functionalities tailored to their specific needs and rolesRole: Member - Accessible event information - To showcase how Members can easily access detailed information about events they are participating in

Role: Member

At the next stage of the design process, we focused on the Member role. It has lots of similar screens with the Host’s role, but gets less functionality and gives users a different experience to fit their needs.

Role: Member - Consistent user experience with tailored functionalities - To represent the consistent user experience provided for Members, with functionalities tailored to their specific needs and rolesRole: Member - Accessible event information - To showcase how Members can easily access detailed information about events they are participating in
No items found.

Outcome

As the result of the work with days of brainstorming, prototyping, and testing we have created an innovative travel app design that covers Host and Member needs for organizing their joint trips.

Linkedin

Linkedin

More works

Looking for an expert?

Let's discuss how WebFolks can help!

Contact Us
WebFolks logo outline