SITE DESIGN PROCESS BOOK
TABLE OF CONTENTS INTRODUCTION U C D & P O R TA L D E S I G N
1
EXERCISES
i
EXERCISE IV : USABILITY / DESIGN FEEDBACK
13
FINAL PROJECT
EXERCISE I : GROUP WIREFRAMING
3
E X E R C I S E I I : P O R TA L W I R E F R A M I N G
7
EXERCISE III : USABILITY TESTING
9
P R O J E C T I : U N L P O R TA L D E S I G N
18
ii
INTRODUCTION U C D & P O R TA L D E S I G N
The final project we did in class was an exercise of large-scale web development, wherein the class worked as a “class development team� to design a communication portal for all design students at UNL. The main objective for this site was to create a one-stop source for: jobs, internships, news, events, resources and ideally to foster a design community or UNL design student. The primary concept was to focus on UCD / user-centered design. User-centered design being design philosophy that puts the user of a product, application or experience at the center of the design process. In UCD, a designer strives for a detailed understanding of the needs, wants and limitations of the people who will use the end product and then makes design choices that incorporate this understanding. This process book will illustrate my conceptualization of UCD in the use of portal design.
2
EXERCISE I GROUP WIREFRAMING
MY GROUP’S TASK In order to begin the creation and production of our UNL design por tals, each student was placed into a design group. Each student group was tasked to design specifications for the following sections: News and Events, Jobs and Internships, Resources, and Community Details. Myself and my group members were in charge of creating the wire frames of the News and Events section.
5
EXERCISE II P O R TA L W I R E F R A M I N G
EXERCISE III USABILITY TESTING
WHAT IS USABILITY TESTING? Usability testing is a design and or production technique which is used in user-centered interaction design to evaluate a product by testing it on users. This can be seen as an irreplaceable usability practice, since it gives direct input on how real users use the system. Groups of selected users are typically defined by a specific demographic of some kind, and are heavily relied upon for good data collection during any given Usability Test. The following shows data collected from the sample test/questionare that was given to UNL students of our selected demographics.
10
Background questionnaire Name: Year: Major (specify BA vs BFA) Interests are: __ Design __ Illustration __ Photography __ Printmaking __ Painting __ Sculpture __ Web design __ Animation __ Typography __ Packaging Professor Syron would like to create a website for the design department where students can find news & events, design resources, internships & job, competitions, student portfolios. On a scale of 1 to 10 (10 being the highest, best, most interest) please answer the following questions: Would you like to have a website like this? 1 2 3 4 5 6 7 8 9 10 How helpful would you find it? 1 2 3 4 5 6 7 8 9 10 Please rate the importance of the following features: Profiles of prospective employers (sample portfolio, website link, mission) 1 2 3 4 5 6 7 8 9 10 List of potential employers 1 2 3 4 5 6 7 8 9 10 List of current job openings 1 2 3 4 5 6 7 8 9 10 List of summer internship opportunities 1 2 3 4 5 6 7 8 9 10 Interviews & samples from past interns 1 2 3 4 5 6 7 8 9 10 A news & events area that give you the latest around campus 1 2 3 4 5 6 7 8 9 10
THE COLLECTED DATA
G R O U P D ATA
U S E R O F P O R TA L S I T E
SENIORS / 53.4%
INTERACTIVE DESIGN I / 72%
JUNIORS / 27.2%
ALL DESIGN STUDENTS / 80%
SOPHOMORES / 13.6%
A L L A R T & A R T H I S T O RY / 7 6 %
FRESHMEN / 5.6%
DEGREE TYPE
DEMOGRAPHICS 5 STUDENTS WERE SURVEYED
BA DEGREE / 42%
4 B A S T U D E N T S / 1 B FA S T U D E N T
B FA D E G R E E / 5 0 %
3 ART MAJORS / 2 NON-ART
12
EXERCISE IV USABILITY / DESIGN FEEDBACK
USABILITY RESULTS For my concept website design, I surveyed 2 senior, 2 juniors and 1 sophomore student at the university to receive feedback on what they thought. To my surprise, the younger students (i.e. the sophomores – juniors) received my website in high regards, enjoying the details more so than the actual content within the pages. They were more focused on how it looked rather than what all was inside of it, and they were also less turned on by the thought of a news section and potential employers section; they wanted the flare. The more seasoned students that I surveyed however, preferred to see more content about jobs, news and related information versus a design spark. They did still enjoy my concepts for the page layout and scroll feature, but they wanted to see the news and events section listed sooner, so they could see what was going on in their regarded area(s).
14
Excluding ages and year demographics, the students in a mass wanted to see a page where they could find information about potential summer intern opportunities, which I still need to design, but they average tallies I received let me know that this should be a page I should focus heavy attention on. All of the students agreed that they would also like to see a non-traditional resource page, that vividly displays context such as font websites and sources of inspiration; this could be jointed with the student gallery/works page as well.
Excluding ages and year demographics, the students in a mass wanted to see a page where they could find information about potential summer intern opportunities, which I still need to design, but they average tallies I received let me know that this should be a page I should focus heavy attention on. All of the students agreed that they would also like to see a non-traditional resource page, that vividly displays context such as font websites and sources of inspiration; this could be jointed with the student gallery/works page as well.
As far as my color template and typographical choices are concerned, the majority of my surveyors liked the uses of transparent imagery and layers, as well as the use of my special Helvetica typeface; “Nexa Bold”. They tell me that the clean and crisp visibility of my page headers is nice and consistent, however I still need to resolve my minor text as it appeared at times that is was too “small” in comparison to the stronger header typeface.
As far as my color template and typographical choices are concerned, the majority of my surveyors liked the uses of transparent imagery and layers, as well as the use of my special Helvetica typeface; “Nexa Bold”. They tell me that the clean and crisp visibility of my page headers is nice and consistent, however I still need to resolve my minor text as it appeared at times that is was too “small” in comparison to the stronger header typeface.
15
16
The group enjoyed my choice of accenting the page with UNL’s signature Scarlet Red color (#cc0000), in complements to the Dark Steel grey (#525252) and blacks I utilize. They thought it was very creative how I use the section markers to the left, but one surveyor commented that he would like to see something less conventional than the use of bullets (circles), and run with something that I create myself. The group also felt that the uses of minor drop shadows was successful to separate further the white text from the starch black backgrounds, but they feel as though I could better resolve some of the shadows in areas because they stand out more than others do.
17
FINAL PROJECT P R O J E C T I / U N L P O R TA L D E S I G N
AFTER FEEDBACK I decided that it would be a good artistic opportunity to continue with my original conceptualization of the UNL Portal Design, and so I did. Using the feedback received from the class’ and my own Usability Testing data collections, I was able to make alterations to my original mockup design, and furnish something new. The following illustrates my final conceptions of what I would have liked to see in the new UNL Portal Design.
19