Project 4 -UI for Good: Interface

Interface Description

For this project, I designed the Events page within the Get Out There! application. This event page allows users to explore current events happening in the city of Cincinnati. It includes a header card, application description, highlighted events, and more events sections. Additionally, each event has their own landing page with a brief description of the event and an option for users to mark whether they are attending or interested. The details of the specific components and features are defined below.

The application obtains two type of components: basic components and application components. The basic components are utilized to build the application components, and the application components are combined to created the interface. The basic components are Button, Checkbox, Dropdown, Header, Text, and Toast. The application components are About, Check Out More, Header Card, and Highlighted Events. 

Additionally, Svelte routing was utilized within the project to create routes to each of the different events. The events were defined as +page.svelte files instead of components. The application components, as well as the event page files are described in detail below.

The Header Card component defines the navigation bar across the top of the events page. This includes the application title and labels for the five different application sections - Events, Connect, Explore, Groups, and Profile. Profile is marked by an SVG button, and the other four are text defined. The Events label is highlighted in white to represent it is the selected tab. On hover of the other text elements, they expand and change color to show feedback to the user. Additionally, on click, the profile button outputs a ripple. The labels do not have any routing to their click or hover events because the other pages of the application have not yet been implemented.  

The About component features an application slogan and a brief text description, providing a straightforward introduction to the app. Its purpose is to give users a clear understanding of the application's goal and functionality.

The Highlighted Events Component displays three popular events that users may be interested in exploring. Each event includes a card displaying an image, a title, the dates, and the current number of people attending and interested. On hover over an event card, the card expands, lowers its opacity, and displays a button. When the button is clicked on the event, the application is routed to the specific event page, defined in the Event Page section below. 

The Check Out More component allows users to view more events than just those highlighted. The component contains a dropdown element, enabling filtering of options. There are three filter options - Outdoor, High Attendance, and All Events. The application defaults to displaying All Events, which includes a carousel of the events available. The carousel can be interacted with by clicking the buttons on the left or right side of the images. The Outdoor and High Attendance filters do not include a carousel, and display the options similar to that of the Highlighted Events component defined above. Each event includes a card displaying an image, a title, the dates, and the current number of people attending and interested. On hover over an event card, the card expands, lowers its opacity, and displays a button. When the button is clicked on the event, the application is routed to the specific event page, defined in the Event Page section below. 

Each event has a its own page displaying an event image, description, and the number of people attending and interested. Additionally, there are two checkboxes allowing the user to mark themselves as either attending or interested in the event, but they cannot select both options simultaneously. If both boxes are attempted to be checked, the first selection is automatically deselected. When a checkbox is toggled, an alert appears at the bottom of the screen notifying the user of their updated event status. This updates the number of people attending or interested displayed on the screen as well.

 Also, there is a button provided to help users find a group to attend the event with, though this functionality has not yet been implemented. The button includes a ripple effect when clicked.