Cornell Now
UX Project for AppDev Hack Challenge
Timeline
2 weeks
Role
UX Designer
Team
3 frontend developers
1 backend developer
As the primary designer, I led 3 frontend iOS developers and 1 backend developer to create an app that strives to aid mental health at Cornell by connecting students with activities they’re interested in on campus.
Introducing: Cornell Now
Filtering through events on main feed
Adding an event to "My Events"
Following an Organization
How it Began
⛏️ The Root Problem
Mental health is a general issue among college students, especially students at Cornell. There are a multitude of things always occurring on campus, but no way for students to get directly matched with events they may enjoy, whether they be larger performances or casual movie nights. By bridging a connection between students and casual activities, they will have the opportunity to meet others with similar interests and aid some of the mental stress that comes from a rigorous academic environment.
This brought us to the main goal of our app:
To enable Cornell students to browse and keep track of current and upcoming events happening on and off campus that pertain to their interests.
🤔 Brainstorming A Solution
Although there are already existing platforms such as CampusGroups and email newsletters that allow clubs and organizations to update their audience on upcoming events, these events are often exclusive to the members of those organizations, which can tend have competitive processes to join. Additionally, such updates do not include the smaller, more unorganized events that occur on and off campus. These events could include casual games of soccer with friends, movie nights, or study sessions composed of students within the same course. Therefore, we wanted our solution to provide the ability for students to join these more intimate, friendly and inclusive environments and meet others who share the same interests.
After noticing this opportunity area, we arrived at our solution.
Cornell Now
📲 Important Features of the App
Before I could dive into designing, my team and I created a list of the main features we wanted to include within the app.
Brainstorming the main features and structure of the app
By organizing this information, I was then able to structure the content into an information hierarchy so we could visually see how the features of our app will flow together, making everything accessible to the user.
🪜 Information Hierarchy
Information hierarchy for app's content
📝 Low-Fidelity Sketches
After organizing the features that would be included in the app, I crafted low-fidelity sketches to quickly identify different ways our users could interact with these features. I created multiple flows that explore these features' functionality within the product, thinking about how to maximize their accessibility and efficiency from a user perspective before diving into more specific visual design concepts.
Here are a couple of the initial design decisions I made through my low-fidelity sketches:
Filtering through events
Option A
Filtering through events occurs as a dropdown menu on the "Now" page. Users can consecutively add and delete filters before selecting the "Apply" button, which then updates the Now feed's events based on the selected filters.
Option B
Filtering through events takes the user to a separate page where they fill out a form based on their event preferences. Users can apply their preferences by clicking the button at the bottom, which updates the Now feed's events based on the selected filters.
Option A
Pros ✅
-
No need to relocate user from main page
-
Allowing user to collapse filter categories can prevent information overload
-
Can collectively see all selected filters before applying them
Cons ❌
-
User may not know to horizontally scroll for all filter options
-
Filter options are not all visible from the start
Option B
Pros ✅
-
Can see all filter options to choose from
-
Uses common design pattern of a form to apply filters
-
Ability to reset filters
Cons ❌
-
User is relocated from the main page
-
Can't collectively see all selected filters before applying them
-
More work is required if user just wants to quickly filter for one thing
After considering the pros and cons of each flow, I chose to move forward with Option A . Given that the user remains on the same main page when filtering, it makes the process less tedious and time-consuming. The user can more quickly filter if they have simple event preferences, and can see the options they have selected at the top of the menu prior to applying them. Unlike the form, the user does not have to double-check their selections by scrolling through an entire screen to confirm that they are satisfied with what they have chosen.
Adding an event to attend
Option A
The user can directly join the event from the main page without navigating to the event's details page. Once the event is successfully added, the organizer is notified and the event is added to the user's schedule.
Option B
The user clicks on an event to see the event's details. They are then able to join the event by clicking "Add event", letting the organizer know that the user plans on coming. The user is returned to the main page after the event has been successfully added to their schedule.
Option A
Pros ✅
-
Process of adding events is quick and intuitive
-
Encourages users to sign up more than in Option A
Cons ❌
-
User doesn't know all details of the events they are signing up for
-
Ease of adding events may cause users to over-add
-
User may accidentally add the event while clicking to view its details
Option B
Pros ✅
-
User is forced to read through the details of the event before signing up
-
Incentivizes the user to not over-add events to their schedule
Cons ❌
-
Event sign-up process is slower than in Option B
-
Users may not know that you have to click on the event in order to sign up for it
After considering the pros and cons of each flow, I chose to move forward with Option B. It is important that the user reads through the details of an event before signing up so they know exactly what to expect. Although the process of adding an event is slower this way, it allows the user to make more informed decisions and not just sign up for every event they see.
Low-fidelity sketches and design decisions of the "Filtering through events" and "Adding an event to attend" flows
🎨 UI Kit
After creating medium fidelity sketches of the app's design, I constructed a UI Kit agreed upon by my team. This UI Kit contained the typography, colors, spacing, and assets that would allow me to plan the design's structure and style properly as I move into creating high fidelity sketches.
UI Kit for Cornell Now
I decided that using Cornell's crimson red color would be fitting for this app. Given that Cornell Now will pertain solely to Cornell students, it made sense to use colors that can be associated with the school, showing an affiliation between the two. Variations of this red color would be used to highlight specific items, differentiate cells, and emphasize the app's main buttons.
💎 High-Fidelity Prototypes
I now had all of the materials and information I needed to construct the high-fidelity prototypes of the app. Below, I replicated the same flows I created in my low-fidelity sketches in a high-fidelity format. I used the styles and typography from my UI Kit to help construct the format and design of the app's interface.
Filtering through events
Main Feed
Choosing a Filter
Choosing a Timeframe
Choosing <30 mins
Applying Filter
Adding an event to attend
Main Feed
Event Details
Event Added
High-Fidelity Prototype Examples
Final Prototypes
Filtering through events on main feed
Adding an event to "My Events"
Following an Organization
Conclusion
Compared to my previous independent case study, I was challenged and taught new things from partaking in this 2-week Hack Challenge. By working with a team of frontend and backend iOS developers, I gained a glimpse of what designing on a team in the real world looks like. I learned to take responsibility given others' dependence on my work, and was an effective communicator with my teammates when deciding on certain features or concepts within the app. Furthermore, I often felt overwhelmed and feared that I would not complete my goal within the allotted 2 week time constraint; However, through a lot of hard work and dedication, this process was extremely rewarding as it proved how a team of designers and developers can create something that will benefit the greater community within such a short amount of time.
⏱️ If There Was More Time...
My team and I brainstormed some additional features that we would plan to implement within Cornell Now if we had more than 2 weeks to design and develop. These features would include:
1. An ability for users to comment/rate the events they have attended to foster a know-before-you-go vibe
2. A dark-mode of the app that shifts during nighttime and is more tailored to night activities
3. Further develop the user authentication feature upon loading the app to ensure only Cornell undergrad and grad students have access to its use
I would like to thank Cornell AppDev for granting me the opportunity to participate in the 2-week Hack Challenge, and extend a thank you to my teammates for their hard work and support through this process. I have loved working alongside such intelligent and inspiring students, as it has pushed me to further develop my visual design and critical-thinking skills as I apply them to the digital realm.