Bubble
Katie Kunesh (me)
Elena Chen
Lexi Foster
Elise Farley
Sarah Hoover
Yuening Li
Web Application
January - May 2024
User Interface Design
Front-end Development
Figma, React, Typescript, Mantine
Overview
In a semester-long project, my team and I designed, built, and deployed a web application called Bubble. We aimed to create a supportive platform for Vanderbilt University alumni who have recently relocated to new cities after graduation. Bubble helps individuals connect with fellow alumni in their new communities, fostering both personal and professional relationships.
The Problem
Relocating to a new city often comes with challenges, particularly for recent graduates who may lack an established social network. The absence of familiar connections can lead to increased stress, isolation, and a slower integration into one's new surroundings. Without a support system, individuals may find it difficult to navigate new environments, form meaningful relationships, or find job opportunities that match their career goals.
The Goal
Our objective was to provide a platform where alumni from Vanderbilt University could easily connect with one another after relocating to new cities. The app would allow users to build networks based on shared academic experiences through interactions such as:
- Joining different cities represented as communities where users interact with others in their shared locale
- Posting events for other users in your community to RSVP to
- Asking our AI chatbot about recommendations for activities in a user's area
- Exploring the home page for upcoming events in one's community
User Stories
To grasp a better understanding of our target users' needs, our team generated a list of user stories. These user stories guided our development process by focusing our efforts on essential interactions, such as the ability to create and attend events, manage profile privacy, and find new connections within alumni communities. By clearly defining what a user may want to accomplish and why, we prioritized features that addressed user needs, as well as focused on ease of navigation.
Some of these user stories included:
- As a user, I want to edit my profile information so I can add additional details about myself for my friends to see.
- As a user, I want to post an event for a museum I want to visit so that I can find other people who want to go with me.
- As a user, I want to see upcoming events near me so I can make connections with people in my community.
Sketches
Based on the user stories we generated for different pages of the application, each team member individually sketched their design for each page with pencil and paper. Together, we went through the elements we liked and disliked from each design and then consolidated our ideas into one paper prototype.
The Process
Plan
Analyze the requirements and create user stories
Design
Sketch and develop wireframes for each page on the site
Develop
Add functionality, test, fix bugs, and deploy the final release
Wireframes
Once our paper-based designs were established, the front-end team and I translated them into low fidelity wireframes using Figma. At this stage, we developed a mid-fidelity prototype to test and gain feedback on the design and navigation of the application.
Development and Final Release
Using the designs our team created in Figma, the front-end team began building out the static pages for Bubble. We used React with TypeScript and Mantine as our component library to ensure an efficient development process. My primary role was developing the home page of the application, accurately transitioning our prototype design in order to keep the application visually consistent and user-friendly. Additionally, I ensured the entire application was mobile-responsive, as we hoped to allow our users to engage with our application in all environments.
Once the back-end team completed setting up the API, I collaborated closely with them to integrate the front and back ends of both the home and events pages. This integration transformed these pages into fully dynamic, interactive components, which enabled real-time updates and user interaction.
Finally, we deployed Bubble and showcased our work at the Senior Design Project poster fair, where our peers signed up, explored the platform, and engaged with each other.
The home page
Viewing event details
Searching for events
Feedback and Revision
Using the prototype our team created, we presented our application to our peers to receive feedback on how we could improve its design and usability. With the feedback we received, the front-end team made adjustments and designed the branding for the application.
