COLAB12- WEB APP

Socialite

A simple web-based app that will allow users to easily invite friends to social gatherings, communicate details, and keep track of attendees.

Problem Space

Problem Background  

It has always been difficult to plan and organise social events with groups of friends. For any individual who likes organising social gatherings with a relatively large number of attendees (5+ attendees) on a regular basis, the process of inviting, confirming attendance, communicating event details, and assigning help/tasks to attendees is disjointed and ‘messy’. 

Research Insights

User Pain Points

After our user research, we learned that the journey of organising social events has 4 parts, each coming with their own set of pain points:

  1. Event planning
  2. Event creation
  3. Event delivery
  4. Post event

Event planning pain points:

  • Single event organizer has a general idea of what to do but doesn’t know specifics like group size, date/time/location or a group of individuals want to hang out, but don’t know what to do.
  • Group will need to do things like coordinating schedules, inviting additional attendees, aligning on date/time/location, working out cost splitting or payment for events.
  • Group will use things like polls, excel spreadsheets, constant back and forth in the messaging chat, sourcing various websites like BlogTO.

Event creation pain points:

  • Someone messages details of an event in a group chat with instructions and RSVP requests but these messages get pushed up in the chat causing people to miss them. This same problem exists for any updates to the event instructions or changes to the event details.
  • Invitees who RSVP to the event are left to their own devices to put the event details in their own personal calendars, which often times is not done causing invitees to forget about or be ill-prepared for events. 

Event delivery looks like:

  • Very difficult for event organizers to do things like order food, order Ubers for a group, update final destination, pay for group tickets, hold onto group documentation, track group spending, get last min supplies.

Post event looks like:

  • Can be tedious to give everyone access to post event videos and photos. 
  • Can be difficult to chase down attendees for after the fact cost splitting.

Feedback

Research indicated that there were two core pain points from the list above that were true for every social event that is ever organized.  

  1. It was very difficult for event organizers to track attendees and communicate details of the event. 
  2. It was very hard for event invitees to be notified of events and keep track of details or event updates in real time. 

Landing on the Solution

Explanation of the Solution

We knew we wanted to work on features that address the two main pain points above since they would solve pain points that arise in every single social event organization scenario. 

Solution summary: A web based interface that allows an event organizer to create a social event, invite attendees, and track RSVPs in real time. We will have an event creation function and will allow users to create and event page and send invites to attendees via a shareable ‘join’ link. Attendees will be able to add the event details to their personal calendars and can access the event page via this calendar ‘invite’.

Feature list:

  • Organizer will be able to create an event page, assign an event name, date/time, location, and write up a description that is visible to all attendees. 
  • Once created, the organizer can then add the event to their personal calendar by providing their email (apple or gmail) which will contain all the relevant details of the event pushed into the calendar event. The organizer will be able to access the event page via their calendar event and also make updates to the event webpage by making updates to their calendar invite. 
  • Organizer will then be able to invite attendees via a shareable link. 
  • Organizer will be able to make edits to the event page.
  • Attendees will be able to join an event by clicking on a shareable link. By joining an event, they will be able to access the event webpage and confirm or decline the invite. By confirming the invite, the attendees will be able to add the event to their personal calendars (apple or gmail) and access the event page to update their attendance status at any time.

Lofi & Hifi Mockups 

Figma Link to Lofi and Hifi mockups

Iterative Design Learnings

After speaking with users, we realised our initial MVP scope did not allow users to re-access the web based event page if they lost the unique URL link. We decided that we would require users to provide their emails when using the web app so that we could send event details (including the link to the event webpage) directly to users inboxes. This is similar to the workflow of how apps like Calendly send confirmation emails with meeting details to the users inbox after meetings have been booked. 

Implementation Details 

Technical implementation

Socialite’s front-end is hosted on Netlify and its back-end is hosted on Heroku. Our tech-stack includes a front-end React framework, a cloud-host firebase database as well as a server hosted on Heroku to handle the sending of emails to users/clients.

Technical challenges

Our biggest technical challenge was the implementation of a virtual server. We had experience in building front-end applications, with cloud-based databases. However, we had never built a server from the ground-up. This was necessary in order to implement our email sending feature to clients/users. 

Future Steps

We will not be continuing with the project however, we expect to be able to use the web app amongst our own friend groups to organise social gatherings. 

Learnings

Product Manager Learnings:

Bryan Jok

Designer Learnings:

Kim Alvarez

Designer Learnings:

Jo Sturdivant

  1. Adapting to an Established Team: Joining the team in week 6 of 8 was challenging, as I had to quickly adapt to existing workflows, dynamics, and goals. This mirrors real-world situations where you often integrate into teams mid-project, and flexibility is essential.
  2. Work-Blocking for Efficiency: With only two weeks to complete the project, I learned the importance of a structured work-blocking system. This approach allowed me to manage my time effectively and meet deadlines under pressure.
  3. Making Data-Driven Design Decisions: Unlike my past projects, I had to rely on research conducted by others. This was a valuable experience in using pre-existing data to guide design decisions, helping me focus on the core insights without starting from scratch.

Developer Learnings:

Daniel McIntyre

Developer Learnings:

Vanady Beard

&

As the back-end developer, I learned how important it is to create efficient and reliable systems that support the entire application. This experience also taught me the importance of optimising the database and ensuring the backend is scalable and easy to maintain.

Developer Learnings:

Stephen Asiedu

&

As a back-end developer, I've come to understand the importance of being familiar with various database systems and modules. This knowledge enables me to build diverse applications and maintain versatility in my work. I've also learned that the responsibility for making the right choices rests on my shoulders, guided by my best judgement.

Developer Learnings:

Sejuti Banik

&

Developer Learnings:

Maurquise Williams

&

  1. Process of Creating an MVP: Developing a Minimum Viable Product (MVP) taught me how to focus on delivering core functionalities balancing between essential features and avoiding scope creep.
  2. Collaboration in a Real-World Tech Setting: This experience taught me how to collaborate efficiently in a fast-paced tech environment, keeping the team aligned and productive, even while working remotely across time zones.
  3. Sharpening Critical Thinking and Problem-Solving Skills: This experience honed my ability to think critically and solve problems efficiently. By tackling challenges and finding quick solutions, I sharpened my decision-making and troubleshooting skills in a dynamic, real-world setting.

Developer Learnings:

Jeremiah Williams

&

All in all this experience was very awesome I learned that in coding with others being transparent is key

Developers Learnings:

Justin Farley

&

I learned how important communication is when working with a team. Communication provides understanding, advice, ideas, and much more. While working with the product team, I’ve found that communication keeps everything flowing smoothly. Working with a team also showed me that every member brings something different to the table and we all have to work together in order to align and meet our end goal.

Full Team Learning