multidevice.png

College Programming Board

 

College Programming Board

REDESIGNING A WEBSITE FOR STUDENT EVENTS AT CLAREMONT MCKENNA COLLEGE

To see the website live, please see https://www.cpbclaremont.com/.

BRAND

College Programming Board - Claremont McKenna College

MY ROLE

UX DESIGN, WEB DESIGN, DEVELOPER

PROGRAM

ADOBE INDESIGN, ADOBE XD, WIX

DATE

MARCH 2018

multidevice.png

The Challenge

How can I make it easy for users to find upcoming events and learn what CPB does on the Claremont McKenna College Campus?

The Process

USER INTERVIEWS

Are you looking for more on-campus events to attend? Do you know what CPB does on campus?

TARGET USER GROUP

Current Claremont McKenna Students looking for more events to attend on-campus.

MAIN INTERVIEW TAKEAWAYS

What do the Users Want?

89% of students are looking for more on-campus events to attend. Only 63% currently know what CPB does. In a CPB website, people are looking for these features:

  • Upcoming events

  • About Us

  • Meet the Team

  • Different Programs

CLIENT

Client: Claremont McKenna College

Client Asks:

  • Make CPB’s connection with CMC more clear

  • Link the CPB site to the CMC site

researchcharts-01.png
researchcharts-02.png
 

INITIAL DESIGN

  • Create a design that’s similar to the Claremont McKenna website for consistency across the college

  • Highlight upcoming events

USER FEEDBACK

  • Text is hard to read

  • Downloadable photos

CLIENT FEEDBACK

  • Add a link to the CMC website and add the college logo to make the connection more clear

  • Change navigation font to something similar to CMC’s navigation font

cpb.png
cmc.png
 

REDESIGN

Clear Connection between CPB and CMC, Easy-to-read Font

From Usability testing, I received different feedback from the users and the clients. The main adjustments:

  • Add CMC logo (right side, while CPB logo is on the left)

  • Link the logo to the CMC website

  • Change the font to Sans-Serif font to make it easier to read

compare-03.png
 

HIGH FIDELITY MOCKUPS

pages.png
 

KEY FEATURES

  • Downloadable photo albums with event names and dates - sometimes photographers attend our events, and our users are always asking where they can find these photos

  • What is College Programming Board?

    • Instead of a description, we made a video for our home page. It’s a fun way to visually see some of the different events while gaining a better understanding of CPB’s presence and mission on campus. To see the video, visit here.

  • Multiple links to the Claremont McKenna Website

  • Links and visuals of our Social Media Pages

    • CPB relies on social media (Instagram, Facebook) to quickly inform students of changes to events or new events. From the website, students have many ways to get connected with our social media pages

  • Upcoming Events

ezgif.com-gif-maker (15).gif
 

The Take Away

Overall, this project was a fun way to give back to the Claremont McKenna student community. Through working with Claremont McKenna College faculty as my clients, I learned how to incorporate both user and client needs into this website which will be an important skill to take into future projects. The main goal of the client was to make sure CPB represented the entire school and aligned with the school branding, while the main goal of the user was to easily locate upcoming events and learn about CPB’s objective. Through making this website and working directly with both client and user, I learned that the goals aligned. CMC’s goal as a college is to make sure the campus is inclusive to all, and by making sure the students are aware of all the opportunities the school has to offer, both user and client goals are fulfilled. Furthermore, I acted as a web developer to complete this project. The program that CPB used for their website was Wix.com, so I implemented my mockup designs into the actual site and got to develop and launch the site first-hand. By creating initial designs, working with the users and clients to make adjustments, getting approval on the final design, and finally developing and launching the site, this process was extremely rewarding because I got to work start to finish until product launch. To see it live, click here.