Ribbit
How might we create a tool that simplifies the planning and coordination of groups, making it easier for friends and families to organize logistics and activities?
Overview
Project Overview
Ribbit is a group planning tool designed to help simplify the planning and coordination of group activities.
Problem
The process of planning group activities can be incredibly stressful and time-consuming due to the coordination required. How might we create a tool that simplifies the planning and coordination of groups, making it easier for friends and families to organize logistics and activities?
Project Goals
Conduct and synthesize research to support the problem
Identify and define key features required for an MVP
Develop branding and define the visual system with a UI kit
Test and Iterate
Project Overview
Ribbit is a group planning tool designed to help simplify the planning and coordination of group activities.
Problem
The process of planning group activities can be incredibly stressful and time-consuming due to the coordination required. How might we create a tool that simplifies the planning and coordination of groups, making it easier for friends and families to organize logistics and activities?
Project Goals
Conduct and synthesize research to support the problem
Identify and define key features required for an MVP
Develop branding and define the visual system with a UI kit
Test and Iterate
Roles
User Research, UI Design, Branding
Tools
Figma, Maze
Timeline
Sep. 2024 - Ongoing
Research
Background
I was approached by a client with an idea that was sparked by their own experiences. My client and his friends go on a trip together every year, with 6-7 people. They found it exhausting and frustrating to nail down a date that everyone was available, all while talking in a very long email chain. Even after everyone chimed in with their availability, someone had to organize all the dates and pinpoint what dates were free for all 7 people. This is where the idea for Ribbit came from. An app that could streamline group trip planning, starting with coordinating availability and finding common travel dates for a group.
Research Goals
Validate and build on the initial research to further support the problem
Discover how users plan and organize trips and general travel habits
Identify support for key features required for an MVP
Background
I was approached by a client with an idea that was sparked by their own experiences. My client and his friends go on a trip together every year, with 6-7 people. They found it exhausting and frustrating to nail down a date that everyone was available, all while talking in a very long email chain. Even after everyone chimed in with their availability, someone had to organize all the dates and pinpoint what dates were free for all 7 people. This is where the idea for Ribbit came from. An app that could streamline group trip planning, starting with coordinating availability and finding common travel dates for a group.
Research Goals
Validate and build on the initial research to further support the problem
Discover how users plan and organize trips and general travel habits
Identify support for key features required for an MVP
Methodologies
User interviews
Competitor Analysis
Methodologies
User interviews
Competitor Analysis
Competitor Analysis
While I couldn't find any products that solve the exact problem we are seeking to solve, I did competitive analysis on the closest related travel products I could find.
Competitor Analysis
While I couldn't find any products that solve the exact problem we are seeking to solve, I did competitive analysis on the closest related travel products I could find.
User Interviews
I conducted user interviews to learn how users plan trips with friends, family, and others. We sought to validate the problem we had discovered, and to learn if there were other use cases that our tool could help solve.
User Interviews
I conducted user interviews to learn how users plan trips with friends, family, and others. We sought to validate the problem we had discovered, and to learn if there were other use cases that our tool could help solve.
Approach
Created an interview discussion guide based on open-ended questions to allow participants to share their experiences
Conducted and recorded interviews remotely using Zoom, Google Meet, Discord, and phone calls
Approach
Created an interview discussion guide based on open-ended questions to allow participants to share their experiences
Conducted and recorded interviews remotely using Zoom, Google Meet, Discord, and phone calls
Participants
5 participants
Ages 25-60
Various degrees of group planning needs and experiences
Participants
5 participants
Ages 25-60
Various degrees of group planning needs and experiences
Key Takeaways
Each user expressed that coordinating availability and finding mutually agreeable dates for group trips is a major pain point, often involving long email/text chains.
There is a need for a consolidated platform to manage all aspects of travel planning - dates, accommodations, activities, checklists, etc.
Users expressed interest in an app that would streamline coordination with others, noting it could reduce stress and improve organization.
Multiple users excitedly shared ideas for features that would be helpful for them.
We also discovered that users already started to brainstorm use cases other than group travel:
Planning hangouts in town
Coordinating group dinners
Arranging volunteer events with a group
Youth sports team travel
Key Takeaways
Each user expressed that coordinating availability and finding mutually agreeable dates for group trips is a major pain point, often involving long email/text chains.
There is a need for a consolidated platform to manage all aspects of travel planning - dates, accommodations, activities, checklists, etc.
Users expressed interest in an app that would streamline coordination with others, noting it could reduce stress and improve organization.
Multiple users excitedly shared ideas for features that would be helpful for them.
We also discovered that users already started to brainstorm use cases other than group travel:
Planning hangouts in town
Coordinating group dinners
Arranging volunteer events with a group
Youth sports team travel
Analyze
Affinity Map
I created an affinity map to help me group observations made during user interviews.
Affinity Map
I created an affinity map to help me group observations made during user interviews.
SYNTHESIZE
User Persona
Using the affinity map and user interview insights, I created a primary user persona that encompassed the 5 participants that I interviewed.
User Persona
Using the affinity map and user interview insights, I created a primary user persona that encompassed the 5 participants that I interviewed.
Sitemap
I created a sitemap and feature roadmap to reflect the goals that my primary user persona needed to achieve. This site map also incorporates a feature roadmap.
Sitemap
I created a sitemap and feature roadmap to reflect the goals that my primary user persona needed to achieve. This site map also incorporates a feature roadmap.
User & Task Flows
To better understand and address user needs, I created user flows that were informed by the goals of our primary user persona. For the user personas, the key flow identified was the overall planner tool, consisting of multiple tasks:
Make a vacation plan
Select Plan type
Search and add a location
Use the calendar tool to enter and save dates
Enter and add attendees
Finalize and confirm plan
User & Task Flows
To better understand and address user needs, I created user flows that were informed by the goals of our primary user persona. For the user personas, the key flow identified was the overall planner tool, consisting of multiple tasks:
Make a vacation plan
Select Plan type
Search and add a location
Use the calendar tool to enter and save dates
Enter and add attendees
Finalize and confirm plan
DESIGN
Lo-Fi to Mid-Fi Wireframes
I began design exploration with digital low-fidelity wireframes to get basic building blocks onto my canvas. After I discovered design patterns and got a better feel of how the information flowed together, I moved onto mid-fidelity wireframes. While I was working on mid-fi's, I was also creating an early prototype as I went so my developer could visualize functionality and start working on the skeleton of our tool that we planned to test with a live coded prototype.
Lo-Fi to Mid-Fi Wireframes
I began design exploration with digital low-fidelity wireframes to get basic building blocks onto my canvas. After I discovered design patterns and got a better feel of how the information flowed together, I moved onto mid-fidelity wireframes. While I was working on mid-fi's, I was also creating an early prototype as I went so my developer could visualize functionality and start working on the skeleton of our tool that we planned to test with a live coded prototype.
Branding
Since I worked with a client on this project, I worked closely with them on creating the logo they had in mind. I interviewed my client and developed a creative brief that I could reference to make sure I was delivering what they wanted. Once we nailed down the look, I chose functional colors and type for the brand while keeping accessibility top of mind.
Branding
Since I worked with a client on this project, I worked closely with them on creating the logo they had in mind. I interviewed my client and developed a creative brief that I could reference to make sure I was delivering what they wanted. Once we nailed down the look, I chose functional colors and type for the brand while keeping accessibility top of mind.
HiFis
I started working on high fidelity wireframes after building out the brand and UI kit. I went ahead and worked on both dark mode and light mode on these screens. The default for this app is dark mode.
HiFis
I started working on high fidelity wireframes after building out the brand and UI kit. I went ahead and worked on both dark mode and light mode on these screens. The default for this app is dark mode.
TEST
Usability Testing
We wanted to test the functionality of the planning tool being developed for Ribbit’s MVP. We were seeking to gain insight on how users use the tool in its current state. I conducted an unmoderated test using Maze, with a live hardcoded prototype that my client developed using early iterations of my Hi-fi screens.
Usability Testing
We wanted to test the functionality of the planning tool being developed for Ribbit’s MVP. We were seeking to gain insight on how users use the tool in its current state. I conducted an unmoderated test using Maze, with a live hardcoded prototype that my client developed using early iterations of my Hi-fi screens.
Results
We instructed users to test the planner via a live website test. Reviewing heat maps and click tracking allowed us to see how our testers were using the planner. Most used it the way we expected, and others used it quite differently but still were able to be successful in completing the tasks. The Calendar screen was one of the main screens that we were excited to see how it was used.
Results
We instructed users to test the planner via a live website test. Reviewing heat maps and click tracking allowed us to see how our testers were using the planner. Most used it the way we expected, and others used it quite differently but still were able to be successful in completing the tasks. The Calendar screen was one of the main screens that we were excited to see how it was used.
Iteration
After reviewing how users interacted with the calendar, the main iteration I made was changing the toggle to input available/unavailable dates to be part of the flow. Now users will enter dates in a 2 step process.
Iteration
After reviewing how users interacted with the calendar, the main iteration I made was changing the toggle to input available/unavailable dates to be part of the flow. Now users will enter dates in a 2 step process.
FINAL
Final Screens
Final Screens
Final Prototype
This is a working prototype to showcase my current MVP screens as of March 2025. The app is currently being developed and I am continuing to work with my client on further screens. Ribbit will be coming soon to app stores!
Final Prototype
This is a working prototype to showcase my current MVP screens as of March 2025. The app is currently being developed and I am continuing to work with my client on further screens. Ribbit will be coming soon to app stores!
Other projects
Fetch: A Rover Feature
How might we make navigating moving or traveling an easier transition on pets?