"How might we improve the Computer Graphics Technology web experience?"

Research

I gathered quick research from students at the college level and at the high school level. I interviewed the candidates with a series of questions, then asked them to perform a series of actions on the old Computer Graphics Technology website.

Personas and Scenarios

Using the researched I gathered, I put together a few personas, then with those some scenarios. Each persona and scenario were built to target a type of user in my target audience.

Use Cases and Requirements

I created some use cases of how users would navigate through the website based on what task they needed to accomplish. Once I had all of that hashed out, I was able to successfully define requirements the website had to meet.

Information Architecture

For the Information Architecture, I had to lay out a concise, cross-platform structure akin to how CGT works outside the web world. The trick here was to think shallow. I wanted a wider structure rather than a deeper one so users could see everything that they need to. It tooks some time (and some card sorting) to figure out which in the navigation items were necessary and which were not. As the project went on, I modified the structure a bit to better suit the standards of which I set before.

Sketching and Storyboarding

I focused on pumping out as many ideas as I possibly could while I was sketching. I highlighted parts that could be of heavy use, circle spots that the users may use, and drew out many notes concerning how each page would work. Once I had viable sketches I was going to use, I started running them through a series of actions. I drew out what would happen if a student was trying to find a professor's phone number, or if a user was trying to see what Computer Graphics Technology was about.

Wireframing

I heavily refined my sketches into testable wireframes of the site. I kept the layout in a familiar fashion to my users; a large header that led home, right side navigation. I used other, more simplified ideas like the large image slider to convey the important information. The boxes on the bottom holds a good amount of information my users lost time and patience searching for in the old version. I conducted usability tests using the initial wireframes then recrafted them to new ones.

Prototyping

I used many elements learned from "Designing with the Mind in Mind" and other design elements to construct these prototypes. I used the school colors as a basis for the design, followed by steel gray and blue as accents and indicators of the site. I also used other familiar indicators like a red notification icon or a blue help icon. In all the search boxes, there are quick descriptions that take less than a second to read. The message of the site must be clear, and everything has to be intuitive.

Once I created the initial prototypes, I tested them using Invision to see the results. Overall, the reactions were good, however I made some modifications to the design and information architecture. I used a different font type for the header titles in each page because it was not conveying the message properly. I used more specific selections, and more selections overall, in the navigation rather than general items for ease of access for the users.