Click any image to view it fullscreen.

Overview

The School of Business and Industrial Trades site was conceptualized and created to replace what was previously being used on the Reynolds Community College website. When meeting with the Dean of SBIT we learned that the main focal point would be ease of navigation, as the original site was somewhat confusing and would be especially difficult for a new or prospective student to find the information they needed. Pertinent contact information needed to be easier to find and coursework needed to link to roadmaps for students to download. All in all, everything needed to be made much more clear and inviting to the site's visitors.

This was originally going to be built using the school's CMS but we were instead told to build it from scratch once the development phase started. Bootstrap was used for the homepage's carousel as well as each program page's accordion menus that display the coursework for each major. Otherwise everything was created using HTML, CSS, and JavaScript, while implementing CSS grid for much of the layout as well as flexbox where needed. Most of my efforts were focused on the homepage and each navigation system (two menus located in the header along with a side menu that is SBIT-specific). The site was created using the mobile-first approach and is entirely responsive.

Project display mockup
Desktop screenshot of the SBIT site
Homepage - desktop full view
Tablet screenshot of the SBIT site
Homepage - tablet full view
Mobile screenshot of the SBIT site
Homepage - mobile full view

Planning

Multiple personas and scenarios were created during our coursework. Shown below are the ones I created while conducting research before moving forward with wireframes.

Primary persona information
A primary persona of a potential SBIT student I created during the research process.
Primary persona use case scenarios
Use case scenarios created in Figma based on the above persona.

Wireframes

My focus was mainly the SBIT homepage and the Administration of Justice program while in the early stages of coursework. Below is the wireframe I originally created for the homepage as well as this program - some changes were made before moving forward to the mockup.

A wireframe for the SBIT homepage A wireframe for the SBIT homepage A wireframe for the SBIT Administration of Justice page

Mockups

Mockups were made in Figma and were worked on as a group. The original mockup was created during our class, but revisions were made during the internship. The main revision was the removal of the "Take Action" menu and the addition of a new header/footer. We were originally unable to make changes to these items as they were site-wide for the entire college, but we were granted permission to change them as we saw fit once the internship had started.

Our original mockup created as a part of our class.
A copy of the original mockup, initially intended to reflect changes that had been made to the original site's header/footer before we were able to change these items ourselves. This was also used to explore different possibilities for a new header.