Music it Up

Concert Search and Filtering Screen
Individual Concert Details and Buddy Finder Screen
Trending Page
About Page
Error Page
Login Page
Sign up Page
Home Page

Inspiration

Amidst our busy school and work schedules, we've always tried to find time to relax at our favorite music festivals. Given our budget as students, we don't have a lot to spend. This motivated us to build an app to help us find free concerts near us, so we can listen to the best of local artists. Another concern we both had were conflicting schedules. Sometimes it's hard a friend to come along with you, so we also decided to incorporate a buddy finder, so you'll have someone to go to concerts with!

What it does

Our hack is a user interface for a concert and buddy finder website. Our concert finder page allows the user to search for concerts by name, type and other keywords that may describe it. If a user is undecided, they are also given the option to scroll through the list of concerts. They are also able to filter by location and distance, time and date, and specific age restrictions. Our buddy finder features a form the user can fill out to be matched with a buddy if they opt to. Each concert listed on the website can be expanded for additional details, covid regulations, ticket links, and a short memo about the event itself.

Users are also able to create accounts to bookmark and save concerts that they're interested in. A trending page features current trends in the music industry, which features posts selected from social media, top songs, and artists.

Our trending page showcases some recent media and upcoming events. Top hit songs, recent events from artists, and clips from recent concerts are presented.

How we built it

We first decided upon the functionality of our website. We specifically decided upon which pages we absolutely needed to have, what features were nice to have, and some extraneous, yet cool features. We ranked those features by importance and drew mock-ups of our designs. Next, we split up the pages and recreated our designs using Framer. We integrated a Typeform chat feature for user interactivity and buddy finding. Canva was used to design and animate our logo.

Challenges we ran into

We're both beginners with design and it's our first time creating prototypes. As teammates, we both come from different backgrounds. One of us is a beginner and is participating in our first hackathon, and the other specializes in backend and machine learning. We completely stepped out of our comfort zones and prioritized learning over all.

Accomplishments that we're proud of

We learned to use a new program we have never interacted with previously. Despite its similarity with Figma, creating interactive components was something we have never done before. We're most proud of stepping out of our comfort zones to create a UI project where each step was a learning process.

What we learned

We learned that one-size does not fit all when it comes to screen sizes. The alignment of components would differ from screen to screen. We had different screen dimensions, which allowed us to check how some pages looked and if they needed tweaking, so they would look great on both screens.