Redesign: Bellevue University Design Page

Project

Creative Brief

Background Summary: 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.

Overview: A single page site is needed for the graphic design program at Bellevue University.

Drivers: To modernize the current website.

Audience: Those interested in campus learning or on-online learning for themselves or others.
1.16 – 24 male and female students
2. Non-traditional students
3. Transfer students
4. Families
5. Guidance Counselors

Tone: Academic excellence and while showcasing creative excitement.

Message: A celebration of life and goodness can be achieved through the enjoyment of good food.

Visuals: All visuals should reinforce a creative, forward thinking design aesthetic.

Details: Page must have;
1. Degree Overview
2. Traditional / Online
3. Admission / Tuition
4. Computer Requirements
5. Curriculum (with descriptions)
6. Benefits
7. links to bellevue.edu and newbedesign.com
8. images (may be stock or illustrations)

Targeted Message: A smart choice for the creative individual.


Research

The 5 Ws
Who: perspective students and their family
What: design degree from Bellevue University
When: pre-enrollment and currently enrolled
Where: http://www.bellevue.edu/degrees/bachelor/graphic-design-ba/
Why: to offer a broad knowledge base for those interested in the graphic design program

Audience Overview – interested in campus learning or on-online learning
1.16 – 24 male and female students
2. Non-traditional students
3. Transfer students
4. Families

Design trends for college/university websites source
1. Notable division between content sections that allow for a user to quickly skim the page contents.
2. Heavy use of photos showcasing the campus and student life. Usually in sideshows or carousels.
3. Copy follows a strong typography hierarchy that also brings related content together.
4. With effective while space, high content density provides an impact front page.
5. 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:
1. Responsive layout
2. 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.
3. Information may need to be “hidden” until needed through the use of modal boxes.
4. 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.

I performed some 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.

Inspiration, What Not to Do

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 on the research shown at the link below, as well as some of my own experience.

source

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.


Concepts & Sketches

The page is laid out with the idea of a scrolling page. When a user clicks on one of the navigation buttons, they are automatically taken to the desired section of the page.

Student work is heavily shown in this concept. It is used throughout the web page design as well as having its own dedicated section on the page as well.

At the bottom of the page exists a contact form.

Perhaps a more simplified version of the previous concept, this web page has six boxes. When a user clicks on a box, the box’s content is “opened” revealing it’s content. The rest of the boxes are “pushed” out of the way to make room for the activated content. Once opened, the user can either click on a sub header at the top of the box, or at the bottom of the box to collapse it.

 


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.

 


Final

I decided to revamp the navigation system for the website. The image blocks in my comp version just wasn’t working. I decided to go with a simplified navigation bar, typical of most site.

For the image to the right, this is the initial state of the design. When a user comes to the site, they are able to either click on the navigation bar, or on the banners in the middle. When they do so, that section of the website expands.

 

Here is an example of the Degree Overview section expanded.

Here the page has been expanded fully showing the website. As the user scrolls down the page, they will see the different classes and other information with purple bars. Once clicked, these purple bars extend downwards, revealing information about that class or topic.

 

 

 

 

Skills: Web Design