With all the research, user testing, data collection and multiple rounds of prototyping allas we have our final design. 

misc improvements

• Highlight matching keywords
• Just use first name in user task
• Browse by Department (main navigation wording)
• Add class numbers
• external pap up link icons
• kill profile page, bring profile into art work page
• show “more by” only if applicable
• suggested search

error prevention in messaging

• say cancel instead of close in email popup
• send copy to self
• show thumnail
• artist name
• date

key elements

• use AAU logo

Users testing at the Usability Lab: 

With our 3rd round we are ready to go to the Usability Lab at 601 Brannan and do some solid testing. 

Task: 

 As an Academy of Art student, find your own artwork featured in the Spring Show and verify that your contact information and portfolio link are correct.

You are Otto Dax, a senior student at the Web Design + New Media department. You saw poster in the elevators that the new Spring Show website is up, and a friend told you that your work got selected. As soon as you get to the Mac Lab, you decide to check if your work is actually displayed on the site and also find out if your contact information and portfolio URL you handed to the department director are correct.

Front Page:

Search Results: 

Work Showcase: 

Alternate Pages: 

Web Design + New Media:  

Student Profile:

After our first round of testing with the paper prototypes, we are ready to move on with interactive mock-ups of the site:

Home Page: 

Search:

Showcased Work:

Stake Holder: Current Student (Otto Dix)

Task: Search for pieces accepted to spring show. 

Homepage: 

Search Field: 

Search Results: 

Drop-down Navigation: 

Messaging Dialogue:

Message Confirmation and Error Recognition: 

Before getting started on the visual design the site, we need to do multiple rounds of prototyping. Our first round is low fidelity and utilizes basic materials. Testing in this manner allows for quick changes and easy observation It also allows us to have a solid foundation before we start working out the aesthetic qualities of the site. 

Next Week will will be starting out first round of user tests. We start with paper prototypes and then move forward progressivley enhancing the design utilizing the data we’ve collected. 

User Tasks: 

1 - As an Academy of Art student, find your own artwork featured in the Spring Show and verify that your contact information and portfolio link are correct.

You are Otto Dax, a senior student at the Web Design + New Media department. You saw poster in the elevators that the new Spring Show website is up, and a friend told you that your work got selected. As soon as you get to the Mac Lab, you decide to check if your work is actually displayed on the site and also find out if your contact information and portfolio URL you handed to the department director are correct.

2 - As an employer you are looking for new, fresh talent. Find your talent in the correct department, look at students portfolio’s that are somewhat related to your current client, Rainbow Icecream and email your colleague about any new talent findings.

You are a very busy creative director at AKQA and you are looking for a junior art director / copy writer team that will fill two positions in the next couple of weeks. On your list of schools to check for talent, AAU is one of them. You know from previous experience that the Springshow is what you’re looking for and quickly type in “AAU Springshow 2011” on Google. That search then leads you to the Springshow website. You only have 10-15 minutes to find some interesting work, find who did it and share it with a co-worker.

3 - As a prospective student, you want to determine if school work is compelling, “Do I want to go to this school?” If so, what classes were taken to achieve this level of quality?

Twenty-one year old, you are dreaming of moving to San Francisco and the US to get your first college degree. You now live in Japan and your parents have, with great hesitation, allowed you to find a good school abroad. So now you are on the prowl for some fantastic 3D animation work. Since you were 15, any kind of animation has been your passion. You’ve heard about the AAU before and decide to take a closer look at the work that comes out of the school. You find your way to the Springshow website. You then find that the second place winner in the animation category is fantastic and decides to post it on Facebook. After you want to take a closer look at the application form for AAU.

4 -As an attendee of the Spring Show and new to city of San Francisco, you seek this information from a cab on you smartphone: Direction information; important contact information and the other judges participating in the show.

You just landed at SFO after a somewhat comfortable flight from JFK, New York. You are invited to attend the AAU Springshow 2011 to judge in the fine arts category. Now sitting in your hotelroom, you open up your MacBook Air to check some details for tonight’s event. Via your search engine of choice, you find your way to the Springshow website and want to find out where it is, how to get there and what time it starts.

5 -You are a current student look to see if your friend’s work is showcased in the Spring Show

You are a freshman at the Academy and your roommate told you that her work was featured in the Springshow. During a study session at a Starbucks, you decide to check the Springshow site and see if you can find her. Only one problem, you only remember her first name, but that she is a New Media major.

Paths: 

After the card sorting, sketching user flow charts, and charting critical paths. We began to develop the Information architecture:

The Academy has sixteen different fields of study within each of those departments there are multiple areas of focus. For example the Web Design + New Media department has: Digital Imaging, Motion Graphics, Interactive Design and Digital Typography. Each one of those categories needs to be organized, searchable and displayed in a cohesive manner. For that we had to create flow charts showing the information architecture.  

Information Architecture Flow Chart: 

Evaluating user flows allowed us to quickly visualize where users would go and helped organize the main components of the site. Starting with the main navigation we mapped out routes that would lead deeper into the site. We also worked out bank linking and alternate routes. 

Here are the user flows we created: 

Stakeholders Primary and Secondary:

• Featured Student: looking for their own work; wants to verify bio links to personal site
• Employer: looking for a potential employee; wants to see a personal site and gather other basic information: i.e. Year of Graduation and Contact
• Prospective Student: wants to determine of work is compelling. Wants to know what classes correspond to work viewed
• Attendee: Directions, Contact Info, Judges, parking, Ticketing etc etc. 

Critical Path Flow Charts: 

With the data we’ve collected from, heuristic evaluations, user interviews, stake holder identification, SSNiF etc, we went ahead and outlined key features and objectives the site should have: 

Site Objectives:

• Showcase of student work in a intuitive manner
• Connection of on-site and on-line shows
• Creation of mobile friendly site
• Cross platform compatibly i.e. Browsers, OS
• Connection through social networking sites

Site Features: 

• Showcasing work in a compelling well thought out design 
• Student Profiles: Names, Age, Contact, Bio
• Connection/Link to student portfolio and social networking
• Tagging of Artwork
• Interchangeable themes for future Spring Shows

Site Functions: 

• High-Quality Galleries: Video, Photo, Sound, 3d Models
• Slide Shows 
• Sharing of Work: by way of social networking
• Instructor and class information

The key stake holders have been identified. Going out into the field and gathering real date will allow us to identify issues users are having with the current site. Each of us interviewed different subjects about their experience with the site. With that date we developed the personas of some of our key stake holders. 

(For the sake of privacy we have changed the names and used alternate photos)

Persona 1:  Paulie

Fourth year student in AAu’s school of Animation and Visual Effects

• 28 years old
• single
• uses both Windows and Mac OS
• Application used most often: Maya, Z-Brush, Photoshop, FireFox
• Uses for: Entertainment, Social Networking and School
• Average Daily computer usage: 8hrs

Key Attributes: 

• Student
• Extensive Computer User
• Possibly Interested in pursuing MFA at the Academy

User Story:

Paulie spends on average 8hrs infront of the computer daily. Primarily working in 3d graphic applications, he estimates about 2 additional hours daily browsing the internet. 

Persona 2: Jennifer

Second year student in AAu’s school of Animation and Visual Effects

• 22
• single
• uses Mac OS
• Application used most often: Safari, Photoshop
• Uses for: Entertainment, Social Networking and School
• Average Daily computer usage: 4hrs

Key Attributes: 

• Student
• Uses AAU site for source of inspiration
• Takes 2 classes a semester on-line

User Story:

As a sophomore, she is preparing for more career development. Melissa wants to be recognized for her hard efforts and wants to enter into school competitions or shows. Being a part-time employee at a local San Francisco restaurant, time is important to her. With a little bit of financial support from her single parent mother, she’s able to complete her projects on her Windows computer. While living at the dorms, Melissa has access to high-speed Internet provided by the school. Melissa loves art. And viewing them at large proportions is her most desirable viewing pleasure. Melissa is not necessarily current in web trends, but has an idea what looks great on the web.