Durham College Natalia Uribe UX-UI Designer

Client:

Durham College

Category:

UI Design

Year

2024

Skill Set:
UI PROTOTYPING HTML CSS JS PHP
Durham College
Durham College

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 was: 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.

Challenges

As a UI designer for this project, several challenges arise:

  • Ensuring that the digital signage is accessible to users with disabilities, including compliance with accessibility standards such as ADA (Americans with Disabilities Act) and WCAG (Web Content Accessibility Guidelines).
  • Designing the digital signage system to accommodate future growth and expansion of the college campus. Ensuring consistency in design elements across the digital signage system, including visual style, typography, and color scheme, to create a cohesive and professional appearance.
  • Combining various components into a cohesive digital sign for Durham College, requiring coordination and aesthetics to ensure all elements worked well together.
  • Coding the logo pane, weather section, motion graphic ads, and promotional posters required expertise in HTML/CSS, GSAP animation, JavaScript, and database work, which increased the project's complexity.
  • During the project, working with databases presented both challenges and opportunities to develop supplementary skills.

Deliverables

  • Enhance visual appeal and engagement by implementing three motion graphics and GSAP animations into advertisement areas.
  • Code and style each component of the digital sign, including the weather pane, news pane, ticker tape pane, and emblem pane, according to the specified design requirements.
  • Delivered PHP coding to ensure seamless functionality and integration with the database.

Process Thinking

Discovery Phase

Define project objectives, goals, and requirements.

Design Phase

Create unique styles for each element of the digital sign.

Development Phase

Code and style each component ensuring functionality.

Optimization Phase

Gather feedback from users and stakeholders.

durham/grid-images-1.jpg
durham/grid-images-2.jpg
durham/grid-images-3.jpg
durham/grid-images-4.jpg
durham/grid-images-5.jpg
durham/grid-images-6.jpg

Let's create together! Email me to get started.