Union

The login screen for Union. Newcomers will have to set preferences and existing members will be taken to the landing page.
The home page of Union! Access club announcement, CUNY announcements and upcoming events for students to take part in.
User's profile page, displays information and allows user to edit their information. It allows easy access to their clubs on the bottom.
A Union club page, full of information for the club displayed in an organized manner. It shows the highlights and achievements of the club.
List of clubs & organizations, with a sorting system. This will allow students to have easy access to join clubs and teams.
A simple, easy method to create clubs. Students can have their club officialized by the campus and make steps towards growing their club.
An upcoming events page, has the date and time, along with a filtering system.

Inspiration

CUNY campuses are notorious for their lack of a social atmosphere. As a bunch of 19 year olds who currently run a CUNY club, Girls Who Code QC, we have realized many obstacles that come with remote learning. It is hard to find potential students who would be interested in joining. It is essential that students stay connected, especially right now. We decided to create a platform that would unite students over common interests, and help them find the right club. In doing so, we hope to help CUNY's gain the recognition they deserve.

What it does

When accessing our website, it is required that you log in with their CUNY credentials. The user is then prompted to answer three questions regarding educational preferences, demographics (communities), and time availability. Once you log in, your profile automatically updates with data uploaded from your CUNY account. You'll then be directed to the home page, which gives you the option of starting your own club, or searching for clubs and organizations that pertain to your interests. On this page you have the option to filter your search results. Our website also gives suggestions of clubs and events based on your interests. You can always read more on a specific club by visiting their personal page. Each club page has an About Us section, along with images, media, and events. There is also a section for the club's executive board. You can join any club, on the top of their page.

How I built it

We prototyped the webpages using Figma and Adobe XD. Then, we used Glitch to code the HTML, CSS, and JavaScript.

Challenges I ran into

The programmers were not familiar with HTML, CSS, and JavaScript. They ran into some challenges while coding, and debugging.

Accomplishments that I'm proud of

We're very proud of stepping outside our comfort zone and working with languages that we're not familiar with. We're also proud of prototyping a lot of webpages in such a short amount of time.

What I learned

Our programmers learned some JavaScript, HTML, and CSS, while one of our UI/UX designer learned how to export the HTML and CSS from Adobe XD, and how to prototype on Adobe XD.

What's next for Union

We hope to expand Union in many ways. We would like to add accessibility for faculty members to use the website. Furthermore, we'd like to expand the color scheme of the website, depending on the CUNY college you attend. Any student from Queens College would have their website follow a theme of Queens Colleges colors, for example. The simple, user friendly design is one we would want more universities to become involved with so we can continue to connect students. We also hope to add a messaging feature for personal chats and group chats, so students can feel like they are interacting with others more.

Built With

Submitted to

The CUNY Hackathon 2021
- Winner People's Choice

Created by

I mainly worked on the JavaScript, HTML, and CSS. I'm not very familiar with those languages, so I definitely stepped out of my comfort zone for this hack. Using JavaScript, I managed to create some functionality on Glitch. I assisted with the demo video by creating some of the slides and animations.

Afshana Falza
I mainly worked on programming and debugging with HTML and CSS. This was my first time using both languages, causing a few challenges. However, as I became more familiar, it become easier to manage. I also assisted with the creation of slides for the demo video.

Jacinda Soto
I worked on designing the website's UI and UX, basing it off of the Figma prototype. I worked with assets and shapes to create the final result with Adobe XD. I also added functionality my design, allowing buttons/links to relocate to pages.

Penelope Seelochan
I worked on the UX and UI design of the website. Before the images were imported to Adobe XD, the majority of the website was designed and prototyped in Figma by me. In addition, I also created the video for submission, using iMovie to compile both a Google Slides recording and multiple audio sides from each member of the team.

Katelyn Villacres