
Cornell Tech Engage
Background
The main goal of our project is to come up with interfaces for a mobile application that will be the central platform for all Cornell Tech on-campus activities. The goal is to have functionalities such as displaying events hosted by all departments on-campus, allowing students to browse through and register for events quickly and easily, in one place. The use context of our interface would be for students mainly, when they want to look at upcoming events and manage the events they want to attend.
Timeline
Fall 2022, 2 Weeks
Team
Novia Wu
Features
We chose to implement two main features that will be most widely used by the target users, which are the students of Cornell Tech. The first feature we want to implement is to allow students to browse all events and sign up for the ones that interest them.
Another feature we want to implement is a personal event dashboard. Students would be able to view the events they are attending using the dashboard, and they will be able to edit or manage their status of events they are attending (for example, canceling the registration for an event)
💡
💡
Student signup feature screens:
1. See all events grouped by departments,
2. Sign up for a specific event,
3. Confirmation
Personal dashboard feature screens:
1. Show personal dashboard or all attending events,
2. Cancel an event,
3. Back to dashboard (without the canceled event)
UI Design
Color Palette

We chose a monochromatic color palette of dark gray, light gray, and white, with a pop of accent using carnelian red. We chose this color palette because carnelian red is already used as an official Cornell University color, keeping it would be consistent with the Cornell theme of our app and users can understand the connection between our app and Cornell/Cornell Tech. We also chose the monochromatic grays and white. Monochromatic colors create visual harmony and it’s simple. The pop of accent color brightens the interface and provides contrast with the neutral colors.
Our color palette conveys a sense of professionalism with a clean and modern feel. The monochromatic colors show that the app is simple, modern, and straightforward, also professional and suitable for school settings. The Carnelian red is the accent color and it shows Cornell’s signature color.
Sample UI Components


The first set of UI components we used are two types of different cards. A card consists of a container, picture, title text, supporting text, and button. The card to the left was used in our prototype to showcase a category of events, while the card to the right represents one particular event. There are many variations for the card on the right, when the registration status for the event has changed for the user, the content on the card will change accordingly. We chose cards because they are a good way to group related information together in a visually pleasing format. All the information are categorized and grouped to show a consistent UI.
We also implement different kinds of buttons in our prototype. The color of the button reflects the status of the action, with the red button representing the undone action and the white button representing the finished action status. The sizes of the button are flexible depending on the length of the text and the interfaces we are applying them to. You can see more applications of different buttons on our screens. We chose the buttons because they are an essential part of user actions, almost all registration actions are done with buttons, it’s important for them to give feedback to the users when they are using the components.



Additionally, we also have a search bar and a navigation bar. Even though we did not develop the interfaces for the search function, we think it is a necessary UI component, and thus put it on many of our interfaces. We also put a filter option within the search bar so that the feature feels complete. On the other hand, the navigation bar serves as a menu, and we attach it to the bottom of every interface for easy access to different screens.
Typography and Hierarchy
✏️ Fonts
We choose SF Pro for the fonts in our interfaces. For the selection of fonts, we mainly took into consideration the purpose of our design. And since we are designing an event organization application, the focus of styling should be simple and efficient. Therefore, we did not select very artistic fonts to make a statement. Instead, we picked the font neutral, flexible sans serif font by Apple so that our interfaces look simple, direct and effective. Since the SF Pro font is very flexible, we did not choose other font families but played around with different colors, weights and sizes for different purposes of texts.
🔨 Spacing
For the spacing of this project, we referred to the guidelines from Apple design (since we are using the SF Pro font) and material design 3. We also did some research and looked through some cases with similar design goals to us. We would describe our spacing as a regular spacing design.
🧱 Weight
For the weight of the font, we used bold text for all the headings and subheadings, and used regular weight for the rest of the text. We tried using thin weights for supporting text and the results were not as good as using regular text weight. Therefore we did not use many variations in the weight of the font.
🫧 Size
The biggest size in our design is the heading on top of each page (“All Events”, “Student Affairs Office”), and the second largest heading is the event category titles, which are usually the names of the offices that hold events (“CTSG Events”, “Career Service”). Then, we have the sub-headings for the name of different events, and regular size text for the rest of the content. We think this is a commonly seen font size design.
📉 Layout
The layout design mostly follows the information hierarchy of the content we have. Take an event for example, the most important information is the title for the event, and the secondary information is the time, location and registration option. Then, the detailed description of the event is considered as the less-important information and is given lower priority. And reflecting this hierarchy to the layout - we have the most important information being the largest bold texts, and even though we have roughly the same sizes for secondary and other information, we would distinguish them apart by colors. Images and buttons were also added to our layout for better readability and user experience.
Reflections
Creating digital prototypes is fulfilling and engaging. There are many aspects we need to take into consideration when designing a good and usable digital prototype and the interactions of the different screens of the prototype. Since there are already many existing good UI component designs out there, we were able to draw inspiration from current good designs and create designs that fit the purpose of our app. The challenging part of creating digital prototypes is to consider the interaction flow between screens. It is important to not assume that users would behave the way we want and add interactions according to actual user needs. Another pain point is learning to get more familiar with using tools like Figma can be challenging at times. With practice, it will become easier.