CEC

Campus Events Commission (CEC) is a branch of student government dedicated to putting on free entertainment for students around UCLA’s campus. As part of the Web Development Staff, I collaborated with one other designer and three developers to create a new website to showcase past and future CEC events—such as concerts and film screenings—that reflects the organization’s aesthetic. After the other designer and I brainstormed the creative direction—we explored things like color scheme and typography—we presented our ideas to the rest of the team. With the team's feedback, I was able to create the wireframes and high-fidelity mockups below. The illustrations in the pages were created by the other designer on the team. After designing the pages, I built them in HTML/CSS and handed off this code to the back-end developers who then used it to construct the website. Since the team's departure, the website has continued to be modified and updated.

̌
̌
̌

    
    CLIENT / COMPANY:
  
    UCLA CEC (Campus Events Commission)
  
    PROBLEM / CHALLENGE:
  
    The CEC Facebook page and Instagram page are used to market and document events as well as to notify students when different committees are hiring. However, at the time there was no CEC website where all of this information could be consolidated and archived so that students and anyone else interested in the organization could learn more about CEC and it's past, present, and future events in one place.
  
    TARGET USERS:
  
    UCLA students; potential performers/speakers/guests
  
    GOAL:
  
    Design and create a website that publicizes CEC details and information on different CEC events and that is aligned with the organization's aesthetic.

  
    ROLE:
  
    Visual Design, UI/UX Design, Web Design, Front-end Development
  
    TEAM:
  
        Daniel Huang — Director of Web Development
    
    Lucas Jenkins — Back-end Developer
    
    Ian Brault — Back-end Developer
    
    Chris Ngai — Back-end Developer
    
    Jordi Ng — Designer
  
    TOOLS:
  
    Adobe Illustrator, Adobe Photoshop, Brackets, HTML/CSS

    
    TYPOGRAPHY & COLOR SCHEME:
  
    Since the existing CEC visuals and the CEC yellow are so fun, vivid and striking, we wanted to choose equally energetic colors to represent the three types of events that CEC organizes. That's why Jordi and I chose saturated and bright colors that also have a slight warmth to them. As for the typography, we wanted a typeface that would command a large presence but that could also work for body copy. That's why we eventually settled on GT Pressura Mono, because it had that balance that we were looking for.

    
    LOW FIDELITY WIREFRAMES:
  
    Once Jordi and I finalized the typography and colors with feedback from the rest of the team, I created the sitemap and wireframes below to help visualize the information architecture and layout as well as describe interactions.

When a committee is hovered over, a border will appear around each event tile to indicate that the event belongs to that committee.

When an event tile is clicked on a pop-up will show up with the event details and everything else will be greyed-out. — When an event tile is clicked on, a pop-up showing the event details will appear with an overlay behind it.

When a committee is clicked on, the borders around each event tile will remain and other event tiles will lower in opacity to narrow the user’s search further.

    
    HIGH FIDELITY MOCKUPS:
  
    Below are images showing the final mockups of the homepage, event tile pop-up, and the about page.

Instead of constructing a page to display each event’s details, we chose to have the event details show up as a pop-up. That way users can quickly browse back and forth between different event details.

When a user clicks on the About page, a description of what CEC does will appear in the center of the screen.Illustration Credits: Jordi Ng — When a user clicks on the About page, a description of what CEC does will appear in the center of the screen.
Illustration Credits: Jordi Ng

When a user hovers over a black and white illustration that represents a certain CEC staff team, the illustration will become colored and a description explaining what that staff team does will appear in the center of the screen.Illustration Credits… — When a user hovers over a black and white illustration that represents a certain CEC staff team, the illustration will become colored and a description explaining what that staff team does will appear in the center of the screen.
Illustration Credits: Jordi Ng

    
    RESULTS:
  
    Some of the collective decisions we made that I found successful in this project were the filtering features on the homepage and the idea to use pop-ups. I think allowing users to filter content through hovering and the use of borders, as well as through clicking and the use of lowered opacities was a clever and visually appealing way to help them narrow their search. Additionally, the use of pop-ups meant that users could easily and quickly browse through different event tiles without having to wait for new pages to load each time. Something that I wish we had the time and resources to do during this process is conduct user research on people outside the CEC organization, because that would've brought to our attention other things to consider in the design. That said, since this platform is still being used and worked on—even after we graduated—more updates can be made to the design and structure based on the experience of having it out in the field since early 2018.

EXPLORE THE WEBSITE >