Overview
The project's ultimate goal was to create digital signs that are similar to those found on local news channels, such as CP24, with a specific focus on Durham College. These signs are displayed on flat-screen TVs throughout campus and provide essential daily information, such as time, date, weather, menus, and advertisements. The main objective of these signs is to assist everyone at the college, including students, staff, and visitors, in navigating the campus more efficiently. They are highly popular worldwide and designed to be useful for individuals from diverse cultural backgrounds.
My Role - As a designer for this project i have to ensure that the system is effective. I have to organize content logically, create prototypes, design visually appealing interfaces, and refine based on feedback. Collaboration with stakeholders ensures the design meets both user needs and project requirements, ultimately enhancing communication within the campus environment.
Goals
For the project developing digital signage at Durham College, the UI designer's goals include creating intuitive and accessible interfaces, maintaining consistency with the college's branding, optimizing layout for easy reading, collaborating with stakeholders to meet user needs, and continuously improving the user experience based on feedback to align with project objectives.
Brand
Color Palette:
Typography:
Oswald by Vernon Adams, Kalapi Gajjar, Cyreal.
Lato by Łukasz Dziedzic.
Challenges
As a UI designer for the Durham College Digital Signage project, several challenges arose. Ensuring accessibility compliance with ADA and WCAG standards was crucial for inclusivity. The design also needed to accommodate future campus growth while maintaining visual consistency across elements like typography and color scheme. Integrating components such as the logo, weather updates, motion graphic ads, and promotional posters required careful coordination. Additionally, coding these features using HTML/CSS, GSAP animation, JavaScript, and managing databases added technical complexity, offering valuable opportunities to develop new skills.
Deliverables
- Motion Graphics & AnimationsEnhanced visual appeal by implementing three motion graphics and GSAP animations into advertisement areas.
- Component Coding & StylingStyled and coded each section of the digital sign, including the weather, news, ticker tape, and emblem panes, following design requirements.
- Database IntegrationDelivered PHP coding to ensure seamless functionality and integration with the database.
SVG Motion Graphics
KFC Animation
InstaX mini Animation
Durham College PSA Animation