City College of San Francisco
Having attended City College of San Francisco (CCSF) and seen the same website for long time – outdated, crowded, and without a clear message, it felt about time to redesign and recreate it from scratch. Some goals during this project were to create a modern look and feel site with a concise message and clear guide and directions for visitors such as future students as well as alumnus.
HTML5, CSS3, Bootstrap, Sketch
Process / Challenges
There were three (3) main challenges I wanted to focus and emphasize during the reconstruction process of the project: create a modern – 21st century website, develop a clean and clear call-to-action – cutting most of the unnecessary information and messages, and build a strong site from the design and web responsiveness point of view.
Research included competitor colleges as well as some of the best universities around the world which allowed me to understand better the messages, design direction, and web creation I wanted to follow and build in the new website.
Wireframe + Mock ups
Gray #e1e1e0 | Black #211614 | Yellow #f5a310 | White #ffffff
The final project has a new navigation bar with a clear direction of the most important features for visitors: about, academics, students, staff, application, MyCCSF (student’s login), and search. It delivers consistent look and feel with branded colors red, yellow, and black; the new front page site has a high resolution picture of one of the CCSF’s buildings and three clear call-to-actions with clean messages/information.
Created from the point of view of an outsider but with a thought of an insider, I’ve created a call-to-action that targets future undecided students to schedule an appointment of chat with a counselor to understand better the college’s programs, staff, student’s life, and college transfer.
What’s more, CCSF is a college with outspoken students, therefore, the creation of a CCSF News and Get Involved section for up-to-date information related to its campuses and events. Finally, a clear section regarding registration, tuition and fees, as well as a contact us form have been created for future and current students as well as alumnus' questions.