Overview - ToGathr is a web platform that helps individuals and event planners easily plan personal or professional events. This platform aims to generate all your event tasks with an AI assistant for each event type and combine event planning, such as tracking budgets, finding vendors/venues, managing guests through RSVPs, and collaborating with a team — all within one platform.
Role - Ux Researcher | UI/UX Designer
Toolkit - Figma, FigJam, Pencil & Paper
"I served as one of the UX/UI designers for the ToGathr project, where I designed user flows and developed the information architecture, low- and mid-fidelity screen designs for key features, including the vendor screen, budget screen, event creation screen, and a dedicated vendor portal dashboard. Additionally, I created custom icons for the vendor overview screen and crafted a couple of illustrations for the vendor portal to enhance its visual appeal."
UX Research
1. Overview
Event planning is messy—too many apps, unreliable vendors, and confusing reviews. Togather helps managing budgets, sending invites to guests, venues, and vendors across different apps is a headache. Finding good vendors? Even worse—most rely on word-of-mouth or sketchy reviews.
Pain Point & User Motivation
One app for everything—guest lists, verified vendors, budget tracking. Honest reviews, easy comparisons. Less stress, more seamless planning.
2. Methodologies
To build ToGathr, we started with a deep Competitor Analysis to spot market gaps and unique feature opportunities. User Interviews helped us understand real event planning struggles. From these insights, we created User Personas to shape our design. Following an Agile Design Approach, we iterated continuously, refining the app based on regular feedback.
Competitor Analysis
ToGathr stands out from its competitors by offering a comprehensive solution for event planning. Unlike others that provide only partial features, such as budget tracking without vendor options or RSVP management without budget tracking, ToGathr integrates all essential tools in one platform. Additionally, it includes a collaborative workspace—a unique feature that enhances teamwork and coordination during event planning. Furthermore, ToGathr distinguishes itself with AI integration, a capability that none of its competitors currently offer.
3. Design Thinking Workshop
As a collaborative team of developers and designers, we conducted a comprehensive Design Thinking Workshop to ideate and refine the Togathr application. This workshop included a structured plan to guide participants through each phase of the process. Starting with Empathy Mapping, we identified the core needs and pain points of users. We then defined clear problem statements and brainstormed innovative solutions during the Ideation Phase. These ideas were translated into quick Prototypes, enabling us to visualize the features. The workshop fostered cross-functional collaboration, encouraging diverse perspectives to shape the application's user-centric design.
UX Design
Our design process began with competitor analysis and user research, which informed the creation of an Information Architecture (IA) that served as the foundation for our user flows and wireframes. The platform's structure includes a landing page and login, leading to a dashboard that organizes tabs for core features, along with an overview page summarizing all sections. With the IA and user flows in place, we developed mid-fidelity wireframes to fully visualize and detail the platform's features. These wireframes evolved into high-fidelity mock-ups, incorporating branding, UI components, and supporting design elements such as custom illustrations.
1. Information Architecture
ToGathr’s information architecture ensures easy navigation with clear sections. Using Card Sorting and User Flow Mapping, we designed a simple, intuitive layout for smooth event planning.
2. User Flow
After the research, I’ve identified two important flows Finding and booking vendors Managing the budget spent on event.
3. Wireframes
First, I’ve developed vendor booking screen, which I’ve divided in 3 main steps: List different Vendor categories, Search vendor, View vendor information(bio).Second, I focused on creating Login and onboarding flow.
UI Design
1. Brand Identity
Our Logo should convey simplicity, collaboration, and trust. we managed to use a modern, clean font combined with an abstract or event-related symbol. Ensure it's easily recognizable and works well in both full-color and monochrome formats. The logo design combines the concepts of people, celebration, and the letters T and G, encapsulating the essence of the platform.
2. UI Library Components
The component library emphasizes rounded radius to maintain a clean and approachable aesthetic. Bold colors are balanced with ample white space and subtle lines. Custom illustrations, created in a line-drawing style with curves and no fills, complement the overall design and add a unique visual identity to the platform. This comprehensive design process brought our vision to life, creating a product that is functional, visually appealing, and user-centric.
3. Typography and Color Palette
For branding, we identified key adjectives—seamless, boisterous, and memorable to reflect
the excitement and energy of event planning. These guided the creation of a vibrant and
versatile color palette suitable for various event types.
For typography, we chose Meta Pro for headings due to its character and flexibility,
paired with Noto Sans for body text for its versatility.
4. High-Fidelity Screens
We created high-fidelity wireframes for Togathr, showing detailed designs with layouts, colors, typography, and interactive elements. These wireframes represented the final product, including screens for event creation, task management, vendor bookings, budget tracking, and guest RSVPs. They helped align the design and development teams and gave stakeholders a chance to see and give feedback before development started.
Usability Test
Following are the redesigned screens based on the usability test feedback for the ToGathr application.
1. Side Bar Navigation
Based on the feedback, we redesigned the side navigation to remain open instead of being collapsed. This change improves discoverability and makes navigation more intuitive for users.
2. Added confirmation alerts in the required place
Users highlighted the need for confirmation alerts after completing specific actions. We implemented these alerts to provide feedback and reassurance for activities like adding items to the budget or composing guest invitations.
3. Simplified Guest Management Interface
To address the confusion caused by multiple Add Guest buttons, we redesigned the interface. The new design replaces the stacked layout with a tab-based view, which organizes information more effectively and reduces user confusion.
Marketing Materials
Following are the marketing materials, including a one-pager, LinkedIn post, and project proposal, designed by me to showcase the innovative features and user-focused enhancements of the ToGathr application.
Key Challenges and Takeaways
Following are the key challenges and takeaways identified and documented by me during the development process of the ToGathr application.
Key Challenges
1. Design Consistency:
Ensuring the app has a cohesive look and feel across all screens while keeping it user-friendly.
Solution: Work closely with the design team to establish clear design guidelines early on, so everyone is aligned.
2. Balancing Features:
Deciding which features to prioritize during development without overwhelming the user.
Solution: Collaborate with the team to narrow down features based on user feedback and core functionality, focusing on what truly adds value.
3. Real-Time Collaboration Tools:
Making sure the collaboration features (task assignments, updates) work smoothly for multiple users.
Solution: Test collaboration tools early in the design process to ensure they are intuitive and responsive for all users involved.
4. Responsive Design:
Ensuring the app works seamlessly across all devices (desktop, tablet, mobile).
Solution: Keep user experience consistent by designing with mobile-first principles and regularly testing across devices.
5. Feedback Loops:
Gathering and incorporating feedback from the team and users throughout the design process.
Solution: Set up regular check-ins with the team to discuss user feedback and adjust the design accordingly, keeping the app aligned with user needs.
Key Takeaways
1. Team Alignment:
Clear communication and consistent guidelines are essential to maintain design coherence.
2. Feature Prioritization:
Focus on the core features that solve real problems, based on team and user insights.
3. Testing Collaboration Tools:
Prioritize testing collaborative features to ensure they're seamless and easy to use.
4. Mobile-First Design:
Start with mobile design and ensure consistency across devices for a smooth user experience.
5. Iterate Based on Feedback:
Make design decisions that respond directly to feedback from both the team and users.