The Bellevue University Graphic Design Program Website Redesign
Overview
The current web site for the graphic design program at Bellevue University is considered out of date in regards to how the university positions it’s branding, responsive capability, and there exists a desire to promote Bellevue University graphic design student creativity.
Research
Key Audience: Those interested in campus learning or on-online learning for themselves or others.
- 16–24 male and female students
- Non-traditional students
- Transfer students
- Families
- Guidance Counselors
Design Trends
- Notable division between content sections that allow for a user to quickly skim the page contents.
- Heavy use of photos showcasing the campus and student life. Usually in sideshows or carousels.
- Copy follows a strong typography hierarchy that also brings related content together.
- With effective while space, high content density provides an impact front page.
- Comprise subtle differences in layout when compared to other sites, such as image backgrounds, or deviating from standard composition layouts.
Technical Research
The single page redesign for the Bellevue University graphic design website will require the following:
- Responsive layout.
- A menu system that directs the user down the page. The menu will also need to be “persistent” and locked to the top of the page.
- Information may need to be “hidden” until needed through the use of modal boxes.
- Imagery and other content needs to be presented in a way that encourages vertical scrolling.
Questionnaire
I asked a communications professional five questions on their perspective of the existing Belleuve University Graphic Design program website.
1. How effective is this page’s layout?
The header image “build a career in science and information technology” doesn’t match with the page’s content. The request information box is placed effectively. Page lacks any student work or any design. Too much copy.
2. What can be changed to improve its messaging?
Show people doing graphic design. More visuals are needed, especially student work. Copy needs to be edited down. Headers need to be bolded. “Most Affordable” badge needs moved to top. Past or current students testimonials.
3. How do you view the effectiveness of the site’s images?
Images lack any sort of diversity. The video preview window is too small and is uninviting.
4. How directed is it towards the site’s audience?
Skimming to find quick information for each area of the site’s audience is hard to find. The benefits could be broken out according to different needs of each type of site visitor.
5. What other suggestions do you have for the site’s redesign?
The copy is hard to read. Very small. Visuals on every section, under each tab. Use of bullet lists over numbered lists. For benefits, each header should be above each description.
Visual Research
I performed visual research on five colleges/universities that have graphic design programs. The idea was to get a better understanding of what other similar web sites looked like, and to determine what worked and what didn’t.
The Art Institute of Pittsburgh
Notable design elements of this site include a large photo that resides mostly above the fold, bright colored blocks, and a three column layout below the fold.
Rocky Mountain College of Art and Design
This website features a centered column, with copy and images in a balanced layout.
Savannah College of Art and Design
This website layout consists mostly of copy, with a single dominant image at the top.
Vermont College of Fine Arts
High content density along with pop art mark this website. The large background image offers a visual difference from the other colleges looked at so far.
Full Sail University
Large, full width image dominates the top portion of this website. Content is laid out effectively and is balanced. White space helps to create a sense that the content is easy to digest.
Inspiration
DeVry University
This page has a very interesting feature. It seems that when you click on one of the black rectangles (within the gray field), the content switches to that tab. It appears to be a single page design. I find it be a very effective way to organize information, especially large amounts of copy.
Arizona State University
Here the page is laid out using a three column grid. This helps to organize the information in an effective way. Since the organization is based on images, it also makes the page more interesting to look at.
Atlason
This grid layout offers a description as the user hovers over the image.
University of Cincinnati
I wanted to include this as a “what not to do”. That could certainly count as inspiration! Here the information is laid out almost like a Word document. It makes reading more difficult. As for the information itself, there are no images. I believe this makes the page look too plain and “boring”.
Personas
Traditional Student
This is a vignette of a traditional student. I want to have someone who was still in high school, but looking to see what their options where. They aren’t burdened by a family or a stressful job yet, but their stress comes from knowing they should go to college, but they don’t know for what. There is also external pressure from family to further their education upon high school graduation.
Fictional Name: John Zeiss
Age: 17
Gender: Male
Location: Urban
Marital Status: Single
Children: None
Income: $11,000
Education: High School Senior
Profession: Part time retail stocker
Goals and tasks: John wants to explore different schools. He’s not sure yet what he wants to go to college for, but he knows that he must begin the application process.
Concerns: John isn’t very sure about how high education works, or even if it’s worth it yet. He spoke with his high school guidance counselor about choosing a major. He is also experiencing pressure from his family to go to college.
Transfer Student
I’ve been through the transfer process to a few different schools and it can be a complicated process.
Fictional Name: Brian Yuler
Age: 20
Gender: Male
Location: Urban
Marital Status: Single
Children: No
Income: $18,000
Education: Two years of college
Profession: Freelance Graphic Designer
Goals and tasks: Brian has been works towards a bachelors at a neighboring college. He just complete his liberal arts credits, but isn’t sure if he wants to pursue his major classes at his current college.
Concerns: Brian is concerned with how many of his credits will transfer. He is also worried about how the transfer process will work.
Non-Traditional Student
Being a non-traditional student, I wanted to be cognizant of this group.
The information I used to create this persona is based research.
Fictional Name: Sarah Davis
Age: 34
Gender: Female
Location: Suburban
Marital Status: Married
Children: Yes, 2
Income: $26,000
Education: High School
Profession: Cashier
Goals and tasks: Sarah is conducting a search for online programs. She’s most concerned about how the program works, the duration, and the cost.
Concerns: Sarah is concerned with the time requirement for obtaining her online bachelors. Her job and growing family takes a lot of time out of her, and she is worried that she may not have the extra time to dedicate to her education.
Families
Family members can be a source of great stress and motivation for prospective students. They can also be sources of encouragement. The idea behind creating a persona for a family member is to gain a different perspective on the page. The family member may offer a different perspective on the college or even challenge the college’s worth to the student.
Fictional Name: Patricia Andrews
Age: 37
Gender: Female
Location: Suburban
Marital Status: Married
Children: Yes, 2
Income: $0
Education: High School
Profession: Homemaker
Goals and tasks: Patricia is excited to see her first children excited to go to college, upon graduating high school. However, she never went to college and is nervous at the whole prospect.
Concerns: Patricia’s greatest concern is to make sure she is sending her child to the college that will offer him the best opportunity. She’s nervous at the whole process as higher education is something entirely foreign to her.
Guidance Counselors
Perhaps the only “power user” out of the personas, I see the guidance counselor as someone who routinely searches and explores college websites.
Fictional Name: Robert Johnson
Age: 54
Gender: Male
Location: Urban
Marital Status: Married
Children: Yes, 3
Income: $63,000
Education: Masters
Profession: Guidance Counselor
Goals and tasks: Robert is tasked with finding programs that his high school students might be interested. He is also responsible for assisting students with college applications and obtaining financial aid.
Concerns: Robert is concerned with the ease and speed of finding the sort of information he needs. He has been frustrated in the past where college websites have been difficult to navigate.
Ideation
Sketches & Wireframes
This wireframe illustrates a concept for the page a user would see. At the top, there is a header style image. It helps to create the sort of environment the student would find themselves in. I describe as “students at work”.
Below that we see six button like images that allow the user to select different parts of the page. I envision that once the user selects a destination, the page would scroll to that destination.
Below the navigation is another “students at work” type image.
The next section illustrates highlights of the graphic design program. Very high level and is only meant to give the user a quick reference as to what the program is about.
Note: the top header image and navigation are persistent throughout the page, meaning they “stick” to the top.
Degree Overview: The information for each section under the navigation operate mostly the same way throughout the page. By doing this, the user can become familiar with how the page is laid out.
Curriculum: Similar layout to the Degree Overview.
Admission & Tuition: Similar layout to the Degree Overview.
Benefits: Similar layout to the Degree Overview.
Student Work: Here student work is showcased. Each image is contained within a grid. When a user click the image, it opens in a light box, allowing for detailed viewing.
Find out more today!: At the bottom of the page is a summary of the program and why it’s a good fit for a perspective graphic design student. There is a contact form the user can fill out to learn more about the program.
High Fidelity Mockups
Validation
The 10 Heuristics Evaluation
While this single page website is rather simple in design, I wanted to at least perform a preliminary usability evaluation on it, before passing it along to my test group. By doing so, I could fix the easily identifiable problems first.
1. Visibility of system status
The site is quick to load. Rollovers and other effects help to let the user know what is interactive and what is not.
2. Match between system and the real world
The flow of the website allows for easy consumption of content. It’s navigation allows for the user to understand the site’s one page layout and how to find information quickly.
3. User control and freedom
Users are able to quickly recover from any errors that may occur. With a sticky navigation menu, the user is always able to “undo” a navigation move, or quickly decide if they wish to explore a different part of the site.
4. Consistency and standards
The site offers consistent navigation and functionality. For instance, all links are the same colors, and all roll overs offer the same effects.
5. Error prevention
The site is simple enough that it “avoids” any complex user interaction.
6. Recognition rather than recall
The site offers a sticky navigation menu, static content, and a limited layout to ease user cognitive overload.
7. Flexibility and efficiency of use
The more experienced user may quickly move about the site using the sticky navigation menu.
8. Aesthetic and minimalist design
Site content is limited and structured in a way to offer maximum consumption. Graphics are also available to enhance the user experience and not distract from such consumption.
9. Help users recognize, diagnose, and recover from errors
The site is simple enough that it “avoids” any complex user interaction.
10. Help and documentation
While there isn’t any help or documentation sections for the website, there is a form the user may fill out to gain additional help if they need.
Implementation
Development
The site was coded using HTML5/CSS3 and various JavaScript snippets to add functionality. Development took place in Brackets, an open source text editor.
Testing
Extensive testing was conducted on the single page website. Navigation, links, loading times were among the top priorities.
The site’s responsiveness was tested virtually using a website capable of applying different screen resolutions and device nuances. Once these tests were concluded virtually, the website was then tested across multiple physical devices including a Samsung Galaxy, an iPhone, an iPad, two Windows based tablets, an HP laptop, a Samsung laptop, and three desktop computers.
