Overview

The department of Budget Planning and Management at California State University, Northridge (CSUN) needed a new web page for their department because they had a poorly built and organized website. Their site only contained one page with all their information housed under an accordion. The information was hard to find and was very unorganized, it was more of a portal rather than a website. The web pages must be built using CSUN’s CMS known as Drupal (Web One). “Web-One is CSUN’s unified approach to improve accessibility and navigation and increase consistency to CSUN’s web presence through the use of templates, guidelines, and web design standards. Using a web content management system makes it easier to keep content current.” (https://www.csun.edu/it/web-one)

Below is an image of what their old page used to look like.

The Challenge

The biggest challenges that I faced during this project were two things:
1. Organizing the content was very difficult because I had to first learn more about the project and the department to fully understand what needed to be done and how to structure the hierarchy of information from the user’s point of view.
‍2. The second biggest challenge were the limitations that Web-One had. Using Web-One, you have to wireframe the web pages in a way that will still look good because of all the restrictions that were present, including but not limited to: 1 column layouts, no fullwidth images, very limiting padding and margin control, and almost no design control.

Roles:
Web Designer
‍• Created sitemaps, user flows, mid and high fidelity wireframes
Web Developer
‍• Built website from scratch through CSUN's CMS known as Drupal (Web One)

The Process

The very first step of the project was to meet with the client to understand what content there was and how we wanted to organize it. We had to figure out what the most important information was to these users. We created a sitemap with the client with certain users in mind: Staff, Admin, and Faculty.

After finalizing it with the client, I created a digital sitemap for more clarity and to be able to send to the client for any future revisions.

Wireframes

The Nike Shoe

Working with Nike was great.

The black is back

This vision is perfect

The black is back

This vision is perfect

The black is back

This vision is perfect