Announcements
Role
Product Designer
Team
1 Designer, 5 Developers, 1 PM
Timeline & Outcome
4 months, shipped
Project Context
Announcements is Cornell AppDev’s internal web app designed to schedule, send, and manage one-time marketing blasts to 15,000+ MAU across 5+ products.
As the sole designer on the project, I streamlined announcement creation in an interactive, responsive interface accessible on any device, working closely with development throughout the progression of the project.
It’s difficult to efficiently notify users about app downtimes, information sessions, and events.
💻
In order to display the UI and create the announcement, we had to go behind the scenes by directly calling the API using Postman to connect the frontend and backend.
🎨
Absence of a user-friendly interface for creating and managing announcements.
💬
We could not preview announcements before they go live on users’ phones.
⚠️
Streamline the process of creating announcements into a dynamic and user-friendly interface that allows users without a technical background to schedule and preview announcements.
01. Create Announcement
See a preview of the announcement banner live, as you are filling out the necessary information to schedule an announcement.
02. Up Next
Skim a countdown of what announcement is scheduled to go live next at a quick glance.
03. Manage Announcements
View, edit, and delete active and past announcements.
Content Organization
To view the full preview of the announcement, as well as secondary information like who scheduled the announcement, the user can click on the card, which opens a pop up. This pop up also serves as an entry point to editing or deleting an announcement.
📭
Prioritize the most necessary information at a glance.
📮
Pop up > collapsible cards to reduce visual clutter.
⭐
Indicate to the user the status of the announcement: Live, Past, Upcoming.
Status Indicators
I designed three different status indicators for the announcement preview popups.
For Live, displaying the little circle provides better context to those who are color blind and a more easily understandable message. Additionally, the colors chosen were intentional to ensure that they were digestible and enhance visual hierarchy.
🫂
Visible contrast through color and iconography.
🌈
More quick context for the user on the announcement.
Input Validation
I established requirements for announcement forms, such as title, body, image, and apps. We wanted to be able to provide users with more information about the form as they filled it out. Thus, I built out buttons in our mini design system with multiple states (i.e. Enabled, Hover, Pressed, Loading, Disabled).
📓
Leveraging interactions to indicate hover and loading states.
📝
Standardizing inputs and buttons through a custom design system.
Error States and Feedback Mechanisms
Despite the CTA button being grayed out indicating that it isn’t clickable, warning messages gives an explicit message on why the form cannot be submitted. When the form’s CTA button is clicked without all the necessary fields being filled, the stroke on the missing input turns yellow as a warning and displays an error message.
‼️
Improved clarity and direction for the user through actionable CTAs.
Pop Up
This view proves effective in displaying the essential information to the user and providing a link to obtain new information about the feature update, information session, or bug fix being announced.
However, I realized that this announcement view was not as sleek and user-friendly as I had anticipated.
👀
The almost-full screen modal hinders the user’s ability to quickly find what they were originally hoping to achieve when they opened the app.
Banner
The new banner view is overall more efficient, consistent, and user-friendly based on the user’s goals and traditional announcements.
📦
More space efficient, thus allowing the user to clearly view content when they launch the app.
🛎️
Consistency with notifications, which makes clicking the announcement and being taken to an external link more intuitive.
👋
The user can manually dismiss the announcement or it will automatically disappear after a couple seconds.
🎁
Matching typography to the app’s design system, giving a cohesive feel.
A Fully Responsive Interface
The redesigned announcement system includes enhanced views and functionalities for handling upcoming, active, and past announcements. Adaptable spacing changes for different screen sizes and devices helps to maintain form and consistency across all versions.
The cards designed for this project change width until they reach a certain breakpoint. On touch screen specifically (i.e. mobile), I considered usability and made the choice to display only one card, which prevents users from having to scroll for a long time.
Next Steps
At the moment, I am designing beyond MVP features. I plan to create an admin page where users can manage access to this internal tool, a debug mode for testing announcements without actually sending them to the public, and a past announcements page to document trends in announcements over the years.
🚧
This was my first time creating a design system from scratch, but I found that ensuring consistency and accessibility across the platform was incredibly valuable for the user, while responsive design practices ensured usability on all devices.
❤️
Communicating with developers was crucial for translating design into a functional product, and iterative design allowed me to refine features based on feedback and usability testing.
🏁
Utilizing interaction design is incredibly effective in giving the user more context! Considering states is a crucial part of a smooth user experience.
