Introduction
Our team of Lorraine Hairston, Tejasvi Bhagwatkar, Neo Agrawal, and Syphax Raab worked on a co-design project for Purdue University's cultural centers. In Project 1, we explored the intersection of technology, community, and grassroots efforts to create a responsive web experience that empowers local citizens. In Project 2, we focused on enhancing the cultural centers' impact on student life by creating a centralized platform to bridge communication gaps and provide a unified calendar system.
Background
For this project, we are working off the progress we had made in our project two that focused on uncovering the challenges that Purdue’s cultural centers were facing. We decided to focus on cultural centers because we believe that they represent valuable resources for the student body, particularly the minority student population. Those of us who have interacted with these centers have noticed a few communication breakdowns, or have had to dig for information that should be immediately available and upfront, or simply have not been aware of any events occurring at the centers. From research and activities involving these centers, we identified an issue with awareness within the community that led us to implementing a solution through the work of this project.
In the cultural centers at Purdue University, we've noticed a challenge: making sure everyone is in the know about the exciting things happening. Despite students being actively engaged, crucial information about events and resources tends to be scattered across various websites and social media platforms. This is particularly evident in LGBTQ, Latino, Asian American, and Black cultural centers. As a result, students might miss out on important updates. To address this, we're seeking a solution that consolidates all essential details into a single, user-friendly platform, ensuring everyone stays well-informed.
This was an “Activity Theory” that was supposed to lay out the different parts of this issue of faking steps. This included tools, subject, object, rules, community, effort and outcome. It is meant to be a breakdown, and the two slashes between rules and subject and subject and tools are meant to represent where the divide, or issue, is most prevalent.
Preliminary Research
Observations Interview and codesign
In exploring the cultural centers at Purdue, we embarked on a journey to understand the dynamics of these vibrant hubs. What became evident through our visits and online explorations was the pivotal role these centers play in fostering a sense of community. From providing study spaces to hosting diverse events, they are integral to students' daily lives. However, a gap emerged as we observed a lack of centralized information. Calendars on platforms like BoilerLink were surprisingly bare, missing crucial details about upcoming events. This observation fueled our determination to enhance the visibility of cultural center activities, ensuring that students can readily access the richness these centers offer.
Our exploration deepened as we engaged in insightful interviews and co-design sessions with the cultural center staff and students. Conversations with staff from the Asian American and Asian Resource Cultural Center (AAARCC) illuminated their desire for a dynamic calendar system, streamlining club reservations and event announcements. The LGBTQ Center discussions confirmed our suspicions of a communication disconnect, with important information often buried in obscure corners of the web. Our co-design activities became a collaborative space where stakeholders envisioned a vibrant online hub that would serve as a focal point for resources, events, and community interaction. These dialogues and co-creation efforts became the compass guiding our design decisions, emphasizing not just functionality but a seamless and engaging user experience.
Our ideation builds off of the problem we had identified, regarding a desire to implement a centralized calendar system. To start off our ideation process, we decided to start out sketching what we wanted our website page to look like.
Sketches
Our first step in ideation was to create low-fidelity sketches that we could potentially translate into an interactable web platform. We referenced the paper prototypes from the co-designs and our affinity diagrams to create these sketches. We used the paper prototypes so that we could remember what the centers highlighted as important features to include. We also referenced the affinity diagrams and the cultural center websites so that we could have a better overview of the major problems and how we wanted to address them with our platform.
This sketch was designed to be the hub for a cultural center and the integration of private, public, and tour filters that we found from our co design efforts. This sketch includes the name and information of each center and the filters for the calendar.
Continuing from the sketch above, this is the calendar and how the interactivity was envisioned for the user such as reserving an event or joining an event.
This idea highlights a filter system in which users can choose which centers they want to see event information. Filtering can also be done by event so that private events, like room reservations, can be seen and filtered out in order to not congest the calendar.
This sketch has a similar idea for filtering by cultural center and having a pop-up for displaying information on-hover for an event, including the name, description, and place/time of the event.
Wireframe
After sketching individually, we shared our ideas and took aspects that we liked from each to start creating a wireframe mockup. Based on what we took from our sketches, we wanted to have a filter system for the calendar so that students could manage events between event types and centers. This way the calendar wouldn’t be too congested and students could personalize based on their preferences. We used Figma as our tool for wireframing and ideated our concept as follows.
This was the prototype on Figma. We decided to design the menu on the left which includes subheaders for the centers and event types. We included the user’s name to personalize the calendar hub for the user.
Development
Our process was to follow a standard incremental, iterative process; our team developed our idea from the lowest fidelity to a high fidelity, interactive webpage. We used our final sketch as the basis for our wireframing, translated that wireframe into a mid fidelity webpage with little styling, and finished with a high fidelity, interactable webpage. This section will detail each step of the process in more in-depth detail.
HTML
For our content of pages, we started by adding a navigation bar that separates different sections of the website. We wanted to include a home and calendar section, as these were the two pages we would be coding, but also including separate sections that were examples of what we would want such as events, about, and contact. In the body of our code, we included a welcome message and a button that would link to our calendar page, as it was our highlight for this project.
CSS
For our CSS portion of coding, we utilized Bootstrap to help us in styling and applying responsiveness for the elements of our page/calendar. For responding to a smaller screen size on the home page, we stored nav items in a hamburger menu that would appear to the right-hand side of the screen. Similar can be said of our calendar, as we stored event information that was scheduled in the hamburger menu that appeared to the right. We also wanted the calendar to incrementally change size as the screen size adjusted, since it took up a large space on the page.
JavaScript
The JavaScript code included in the HTML file enables users to navigate and interact with the dynamic calendar, as well as manage events associated with specific dates. Users can easily move between months using the "Previous" and "Next" buttons, and the selected date is highlighted with associated events displayed in a sidebar. Events can be added by users and displayed on the selected date with a marker indicating that there is an event on that day.
Wireframe Testing
In the wireframe testing phase, we gathered feedback from potential end-users on the visual design and layout of our platform. We found out that users tend to use social media platforms such as Instagram instead of their cultural center website for event information. The calendar feature was recognized as a valuable tool for collaboration and networking between cultural centers. Users suggested improving event title visibility and having more customization options specialized for each cultural center.
Website Testing
We found that users found our website easy to navigate from tasking them with adding an event in the calendar. They were not off put by anything on the site and they were clear on the purpose. User mentions how the website labels were clear and the booking features were simple and intuitive. There can be improvements made on the customization and notification features.
Solution
Project Solution
A centralized web platform was developed to streamline event scheduling and enhance the user experience for cultural centers at Purdue University. The platform allowed users to schedule their own events and meetings, view event calendars, reserve rooms, and receive announcements and notifications. Events were categorized as public, private, and tours, ensuring that students could filter and view events according to their preferences. The user interface was aimed to be as intuitive as possible and will be accessible through boilerlink and maintained in the website of the Office of Diversity, Inclusion and Belonging as well as all cultural centers included in the calendar. The project solution aimed to promote transparency, accessibility, and user engagement, empowering cultural centers to take control of their event scheduling while providing students with a one-stop solution for exploring and participating in cultural center activities.
Design Rationale
The web platform was designed with a user-centered approach, taking into account the needs and preferences of cultural center staff and students. Its centralized structure, with tabs for each cultural center, enables easy navigation and inclusivity. The user interface is intuitive and user-friendly, ensuring usability for all. Event categorization and scheduling features optimize privacy and accessibility. The platform also enables cultural centers to make announcements and send notifications, automates room reservations, and fosters engagement and grassroots efforts within the Purdue University cultural center community.
Reflection
From the final presentation to our peers, we received some valuable feedback that helped us reflect and review on our project. One of the feedback we received was to add the option for students to subscribe to the calendar to their personal calendar. This would reduce the need to continuously check the calendar page and students can get notifications or emails for events. Reflecting upon what we wanted from this project, we definitely wished to have more elements to our finalized site. Our sketches reflect the ambitions we had for some ideas, like having a hover feature for displaying information for events or even formatting events within the confines of the calendar space. However, upon coding we realized the limitations of our ability to make such things possible and felt rushed in terms of our timeline to get our deliverables finished. If our team had more time, we would want to implement more elements that we identified from ideation and our findings while working with our users/stakeholders.
Above is the Empathy Map. This allowed us to find a clear definition for our user group.
Defined User Group Now: Middle-aged parents of older children who find themselves with little motivation, time, or fear in general of exercising and trying to make themselves healthier.
Contributions
Neo Agrawal - Observations with AARC and LCC, Interview with LCC, Co Design with AARC, Project Roadmap, Design Rationale, Conclusion in Documentation, Insights and Next Steps in Presentation. Sketching wireframe
© 2023 All rights designed, developed and definitely owned