The Moment We've Been Waiting For by Mu-Hwa Kuo

The Moment Weâ&#x20AC;&#x2122;ve Been Waiting For: CSD Website Prototype and Research

Lindsay Corry Therese Joseph Mu-Hwa Kuo

Photo credits: Lindsay Corry

Usability just means making sure something works well: that a person of average (or even below average) ability and experience can use the thing–whether it’s a Web site, a fighter jet, or a revolving door—for its intended purpose without getting hopelessly frustrated. Steve Krug, Don’t Make Me Think, 2000, p. 5

Executive Summary

Our web design team had three objectives when it came to the redesign of Carnegie Mellon Universityâ&#x20AC;&#x2122;s Computer Science Departmentâ&#x20AC;&#x2122;s website: 1. We wanted to make the website intuitive to use. 2. We wanted to highlight research in an accessible way. 3. We wanted to show the world how awesome CSD is. Through extensive background research into the target users of the CSD website, a content audit of the existing site, multiple usability testing and an iterative design process, we have created a design that we feel best accomplishes those three objectives.

We recognize that the CSD currently does not have a brand marketing strategy. In our redesign, we utilized the existing CSD identity to create a brand through color. The distinctive Gates-Hillman building provided the inspiration for the website’s color palette; we worked mostly in neutral grays while using bright pops of color as accent. The colors orient the website user in the digital space just like the colors on the walls of Gates-Hillman orient the students and faculty within the physical space. We also suggest creating a logo, such as the one we provided in our redesign, that emphasizes the strength of the Computer Science Department while still connecting the department back to the greater Carnegie Mellon University. In our benchmarking study, we found that many of the top computer science schools do not showcase any of their student’s work on their website. Only one school other than CMU showcases research projects on their homepage. In order to bring the CSD ahead of its competitors, we wanted to bring research projects (and student projects in particular) to the forefront by showcasing them on the redesigned homepage. We dedicated one column on the homepage for project highlights. The three columns on the homepage are equal widths, which means we give equal importance to the content of all three. This means that the projects we highlight on the homepage will be perceived as equally important as News and Events. Our usability considerations include navigational groupings and intuitive labeling. Drawing on results from our card sorting and label testing data in both our early and late stage user testing, we crafted an information architecture that best fits the expectations of CSD website users. These navigational considerations include: separating the degree programs into Undergraduate and Graduate; getting rid of confusing labels like “Who’s Who” and “CSD on the Road”; and simplifying existing labels, like turning “Missions” and “Visions” into “Why CMU?”

Introduction

Representatives from the Computer Science Department, Jordan Harrison and Jennifer Landefeld, approached the Web Design course being taught by Dr. Necia Werner, Director of Professional and Technical Writing, to lead the redesign. They want the new website to better reflect the identity of the CSD, to showcase the monumental work that comes out of the program, and to act a resource for the current students and faculty. All of this is in service of their number one priority for the website: recruitment of new students. This report uses data from our user experience research to produce a usercentered approach to web design. We created personas to accurately represent the potentials users of the CSD website based on the race, gender, and socioeconomic status of the CSD’s existing student body and alumni. Through these personas, we analyzed the existing website’s content objectives and ease of usability. We also benchmarked CSD’s competitor websites to find out the genre’s pitfalls and best practices. We underwent an iterative design process that included low fidelity, medium fidelity, and high fidelity prototypes that were user-tested for ease of navigation and aesthetic friendliness. Thank you for the opportunity. We are proud to be a part of the Computer Science Department’s website redesign.

Project Timeline

Early Stage User Testing User, Content, and Task Analysis

Label Testing Results Card Sorting Results First Impressions

Primary Users Secondary Users Tertiary Users Content Audit Results Task Analysis Results

Competitive Benchmarking Navigation Page Layouts Faculty Pages Degree Levels Research and Faculty Interests Faculty and Student Projects Program Identity Targeting Industry

Late Stage User Testing First Impressions Scenarios

Initial Prototype

Final Design

Features Screenshot

Our approach to users Colors and CSD branding Showcasing student projects Navigational groups Labelling Design/UI elements

USER, TASK & CONTENT ANALYSIS

According to our clients, Harrison and Landefeld, recruitment for the Computer Science Department is the number one priority for the CSD website. Other purposes for the website—such as being the information resource for current students and faculty, showcasing the projects done at CSD, and representing the CSD identity—exist in service of that priority. We conducted a quantitative audit of the content of the existing CSD website, with an eye towards usability and content objective. We sought to answer the question: Who is the site currently working for? We then created personas to represent the potentials users of the CSD website based the CSD’s existing student body. We tried to represent the CSD website users as accurately as possible. Diversity in race and gender were based on statistics listed in the January 2013 report of the Diversity Advisory Council and on the School of Computer Science Fact Sheet published by the CMU Admissions Office. Socio-economic factors, such as salary, were based on the US News College Report. We considered their needs that will bring them to the CSD site, anticipated the questions they will have when they are on the site, and considered their expectations for an informational university website based on their backgrounds. Finally, we matched up the needs, tasks, and expectations of our personas with the data from our audit. We looked for when the existing content matched up with their targeted user base—and when it didn’t.

In our research, we have determined: • the CSD can’t reach the people they want to reach. • that users can’t find what they are looking for. The website fails their content objectives by not reaching their target audience. Users are confused by the navigation because the architecture does not adequately guide them to the information they want. This is the first step in the process of a user centered redesign of the CSD website. By using real voices to shape our information architecture, we can develop tactics that can be employed by the CSD to better connect with their site visitors: answer their questions, fulfill their goals, and, ultimately, be accessible to all.

Primary Users These users are all from outside of Carnegie Mellon University and they are looking to gain more information about the school and the department. The first four are prospective students, which are exactly the users the CSD wants to target; the parents are just as influential in recruitment and admission as the prospectives; the industry users, if impressed by the CSD identity gleaned from the website, directly influences the future of many graduates.

Name: Tim User Group: Prospective Masters Student Concerned with: Career advancement, alumni information, costs and financial aid, deadlines. Encountered issues: Canâ&#x20AC;&#x2122;t find information about CSD alumni; not sure how much tuition is for Masters program.

Name: Sara User Group: Prospective PhD Concerned with: Research, Faculty Projects, Deadlines, the city. Encountered issues: Only with finding information about Pittsburgh.

User, Content, and Task Analysis

Name: Andrew User Group: Prospective Undergraduate

Name: Emma User Group: Prospective Undergraduate Transfer

Concerned with: Deadlines, curriculum, campus culture, extracurriculars, the city, and maleto-female ratio.

Concerned with: Deadlines, curriculum, transfer credits, cost and financial aid, the city, and extracurriculars

Encountered issues: “B.S. in Computer Science” page had info for current students only; “Undergraduate Admissions” was a broken link.

Encountered issues: No pages dedicated to transfer information; difficult to find resources about Pittsburgh.

Name: Mr and Mrs Lee User Group: Parents

Name: Lucas User Group: Industry

Concerned with: Costs and Financial aid, Career and job prospects, safety and wellness, admission requirements.

Concerned with: Faculty, student work, news and events, overall sense of the department.

Encountered issues: with pretty much everything.

Encountered issues: Mainly findability of information. There’s no search bar; “Who’s who” doesn’t lead to the people he’s looking for.

Secondary Users These users are in the second tier because, while the website is a great resource for these users, it is not the only place they can go to accomplish their tasks. For example, if they are looking for financial aid information they can go to The Hub as well as the CSD website. These users make up of an inner circle â&#x20AC;&#x201D;they have all been, or had once been, accepted into the CMU community. They are not as crucial to recruitment.

Name: Aleem User Group: Current Masters

User, Content, and Task Analysis

Name: Trish User Group: Current Undergraduate

Name: Oliver User Group: Current Ph.D

Name: Derek User Group: Faculty

Tertiary Users These users were mentioned by the CSD to be potential users of the website, but it is not the websiteâ&#x20AC;&#x2122;s priority to target these users. However, we still need to consider their needs, expectations, and tasks because their future actions will likely influence the reputation of the CSD.

User, Content, and Task Analysis

Name: Anna User Group: Press

Name: Huan Yi User Group: Competition (MIT)

COMPETITIVE BENCHMARKING

The process of benchmarking allows us to see what other universities are doing better, the same, or worse, and how we can improve the CSD website based off this information. We started with a list of eight competitors. These are the schools that students, who were accepted by CMU’s CSD, choose to attend over CMU. We looked for the outliers: the great successes, and the great failures. We thought that by covering both ends of the spectrum, we stand to learn the most. We decided to benchmark: Stanford, MIT, UW, Berkeley, Cornell, and Brown. We created eight benchmarking points based around the concerns of the primary users. Their ability to access content, the functionality and usability of the website, and the users’ overall impressions of the school established our criteria. Navigation: We hold user experience to be king, and the students’ ability to get around the website is the crown. We analyzed how the information architecture differ from college to college, how intuitive the labels are, and what the colleges prioritize based on their hierarchy of pages. Page layouts: How the colleges present information on their webpages greatly influences the overall impression of the school. Here, we analyze how the presentation help or hinder the access of information. Degree level pages: These pages are where all of the prospective students want to end up. Here, we determine how navigable these pages are to the primary users by analyzing the groupings and labels of the different degree level pages. Faculty pages: We analyze the presentation and accessibility of content in these pages because, well, the students are stuck with these people for years. Research and faculty interests: Similar to the faculty pages, here we analyze the presentation and accessibility of content. The research that takes place and the faculty who teach in these colleges are usually the deciding factors for graduate-level students. Faculty and student projects: Navigability, intuitive labelling, and presentation of content are also important here, not just for prospective students but for those nebulous, almost sinister, outside forces which determine a school’s reputation—like parents. Program identity: The homepage is where the first impression of a college starts to form. We analyze here the “face” of the college website, including what colors they used, what pictures they choose to portray themselves, and what content they consider important enough to show off to strangers. Targeting Industry Companies: Hiring managers might be worse than parents when it comes to people you try to impress.

Navigation

Page Layouts

It is common to have a main navigational menu across the top, with a subnavigational menu on the left side of the page. The least successful websites deviates from this, or had either too many or no drop down tabs in their navigational headers

Homepages with banners across the top or middle are the most visually impressive. Search bars, footers, and images/photographs appear on the most helpful sites. Having a grid of more than four modules makes the page too cluttered.

Program Identity

Targeting Industry

Thereâ&#x20AC;&#x2122;s only one chance to make a first impression. The schools that make the strongest on their homepages have a well-developed sense of identity, school pride, and department branding.

CMU and Stanford are the only schools that do not address industry affiliated in any way.

Competitive Benchmarking

Faculty Pages The most successful sites have a unified look and feel among their faculty pages. Having a hyperlinked search option and photographs are useful as well.

Degree Levels Sites that separate information for prospective students and current students are more easily navigable.

Faculty and Student Projects CMU and Stanford are the only schools that showcase projects on their websites.

Research and Faculty Interests The most successful sites not only clearly group and label the areas of research and faculty interests, they have an obvious search function for them as well.

EARLY STAGE USER TESTING

We gathered twelve user testers in order to evaluate the intuitive groupings and labelling of information expected by users of a website like CSD’s. The people we gathered vary in their familiarity with computer science and they come from both inside and outside the CMU community. They represented some of the different user groups of the CSD website defined in our report, Who Is This For? A User Centered Analysis of the Website of the Computer Science Department at CMU. Six user testers completed a card sorting test, where each card was labeled with page titles from the CSD website. Six user testers completed a multiple choice label test and a first impressions test. The labels test presented the participant with a question a user might ask while trying to complete a common task, and the participant had to click the label where they believed they could find more information to answer the question. The first impressions test recorded the user’s responses to several questions while viewing the CSD homepage for the first time. With successful labels, users were able to identify the content within this area or made groupings similar to these content areas. Successful labels included Research, Faculty List, Administrative Staff, and Bachelors. Most users were confused by the labels CSD on the Road and Who’s Who. History was labeled most often as some variation of “About Us.” Users expect Master’s and Ph.D. to be grouped together under the heading, “Graduate.” When looking for Dissertations, people want to look under Publications. Trends in intuitive groupings included: About Us, Prospective Students/Apply, Current Students, Undergraduate, Graduate, Research, Jobs, and People. Participants from outside the CMU community identified and separated prospective students from current students. Participants from inside the CMU community think in terms of degree levels, separating undergraduate and graduate as two groups. When available, most of our testers expected to find financial aid information under the Prospective Students/Apply grouping. They also expect to find career information easily. Research was only important to half of our user testers. We suspect that the participants’ current displacement from an higher level academic setting could possibly explain that half that did not emphasize Research within their groupings. Participants felt that the website was lacking visually, using words like “very plain,” “bland,” “boring,” and “lacks color” to describe how they felt about the website. Based on first impression, the arrangement of the navigational links caused people to feel that the website would be easy to navigate. However, the other portions of our testing indicated that this assumption is not true. For devices used to access a website, users mostly use a laptop, a computer, or a smartphone.

“Ph.D in C.S.” is better than “Doctoral Catalog” We found in our label test results that more participants prefer the wording of “Ph.D in C.S.” to “Doctoral Catalog.” When they were asked questions about post graduate study, most participants chose to go with “Ph.D in C.S.” over “Doctoral Catalog.” We concluded that more people find the term Ph.D to be more familiar than Doctoral.

People like “Research,” “Faculty List,” “Administrative Staff,” and “Bachelors.” During label testing, these were the ones that participants consistently chose the correct answers for. We concluded that these were the most self-explanatory; unlike other available labels, these ones are both the content heading and the content. (It also helps that the questions we asked about the Bachelors section had to do with finding majors and minors, which are two things specific to Bachelors degrees.)

Early Stage User Testing

“Masters” and “Ph.D” should be grouped together At least on the top levels. In card sorting, participants consistently create two categories: Undergraduate and Graduate. Under the latter category, they group all the content related to Master and Ph.D level programs.

“History” is a mixed bag When participants had to pick where they would find what year the school was founded, all of them chose “History.” When they were confronted with other questions, such as where they would find the department’s vision and where they would find how many girls were in the program, they never picked “History” even though that is precisely where they would find them on the CSD website. “History” seems to be a misnomer that encompasses more than people had anticipated.

“CSD on the Road” and “Who’s Who” are confusing Make that really, really confusing. Consistently in both label testing and card sorting, our participants were confused with the vague or over-broadness of the two labels. In label testing, two participants decided to use “CSD on the Road” as a throwaway for questions they don’t understand. In card sorting, almost all of the participants wondered why “Who’s who” existed in the first place.

The same categories appeared over and over again When we asked our participants to create overarching categories for the groups of content they created, they tend to create the same ones over and over again. They’re called different things—the “About Us” category is sometimes called “Overview” or “Basic Characteristics of College Websites”— but they contain the same types of content. This means that visitors to the CSD website, no matter which user group they’re from, expect to see these (or something like these) groups on a college website: About Us, Prospective Student/Apply, Current Students, Undergraduates, Graduate, Research, Jobs/ Career, People.

Insiders think on levels, tend to separate “Undergraduate” from “Graduate.” In card sorting, the current students are more versed in the differences between degree levels. After separating the prospective student information from the current student information, they tend to split current student information into two more groups, “Undergraduate” and “Graduate.” It is worth noting that they also group “Masters” and “Ph.D” information under “Graduate.”

Outsiders identify and separate “Prospective Students” from “Current Students.” Our card sort testers from outside the CMU community tend to separate content related to admissions, applications, and prospective students from content related to current student activities, such as Internal Transfers. This means that people looking to apply do not know too much about the nuances among the degree levels; they’re looking for prospective student information, and they don’t have much use for current student information.

Early Stage User Testing

People expect to find financial aid information under “Prospective Students” No matter what they call the “Prospective Students” group, our participants always expected to find financial aid information within it. The CSD website currently buries the financial aid information within the degree program pages, but our card sorting data suggests that people expect to find it way higher in the hierarchy.

People look for dissertations under “Publications” On the CSD website, information about dissertations are found under “Doctoral Catalog.” However, our participants consistently look for it under “Publications” in label testing. The vague wording of “Publications” lends itself to confusion among the participants, especially since it is a choice available on the top layer of the website and not nested under the author type. As one participant mused, “Perhaps they didn’t get published...”

DESIGN EXPLORATIONS

Introduction

CSD Homepage

Initial Wireframes

NOTES

HEADER

LOGO NAV

SEARCH NAV

NAV

2 2 PICTURE

3 DESCRIPTION

4 4

5 NEWS

FEATURE

CALENDAR

FOOTER

CSD Homepage

NOTES

HEADER

LOGO

HEADER

LOGO

1 3

CSD Homepage

NAV

4 NAV

APPLY TO CSD

NAV

NOTES

CALENDAR

Inside the circle would be a logo to represent each subject.

The picture would be static.

NAV PICTURE NAV

COMPUTER SCIENCE DEPARTMENT

PICTURE

NAV

DESCRIPTION NAV

NAV

5 1

NAV

RESEARCH

STUDENTS

NEWS

FOOTER

ABOUT

Low Fidelity Prototypes

PROSPECTIVE STUDENTS ABOUT

CURRENT STUDENTS DEGREES

ALUMNI

PARENTS

RESEARCH

PEOPLE

ROBOT SOCCER A challenging research domain examining relevant issues in developing completely autonomous agents.

“Pushing the frontiers of the field” EVENTS

NEWS

SCHOOL OF COMPUTER SCIENCE

CONTACT

PROJECTS

PRESS

EMPLOYERS

SITEMAP

Low Fidelity Prototypes

OUR FINAL DESIGN

We approached the redesign from four angles: user-centered content, branding, research highlights, and usability. Our user-centered approach manifests itself in the form of portal pages, which are accessible from a secondary navigational menu that is fixed above the main navigation on the new website. In those portal pages, we recommend the CSD have customized content, greetings, and links for those users. A personalized greeting from Frank Pfenning would bring a voice to your department and increase engagement with your site visitors. Frequently Asked Questions on every page would address the questions and concerns of those users directly. Quick Links that meet the needs and expectations of your site visitors would improve their ease of navigability on your website tremendously. We recognize that the CSD currently does not have a brand marketing strategy. In our redesign, we utilized the existing CSD identity to create a brand through color. The distinctive Gates-Hillman building provided the inspiration for the website’s color palette; we worked mostly in neutral grays while using bright pops of color as accent. The colors orient the website user in the digital space just like the colors on the walls of Gates-Hillman orient the students and faculty within the physical space. We also suggest creating a logo, such as the one we provided in our redesign, that emphasizes the strength of the Computer Science Department while still connecting the department back to the greater Carnegie Mellon University. In our benchmarking study, we found that many of the top computer science schools do not showcase any of their student’s work on their website. Only one school other than CMU showcases research projects on their homepage. In order to bring the CSD ahead of its competitors, we wanted to bring research projects (and student projects in particular) to the forefront by showcasing them on the redesigned homepage. We dedicated one column on the homepage for project highlights. The three columns on the homepage are equal widths, which means we give equal importance to the content of all three. This means that the projects we highlight on the homepage will be perceived as equally important as News and Events. Our usability considerations include navigational groupings and intuitive labeling. Drawing on results from our card sorting and label testing data in both our early and late stage user testing, we crafted an information architecture that best fits the expectations of CSD website users. These navigational considerations include: separating the degree programs into Undergraduate and Graduate; getting rid of confusing labels like “Who’s Who” and “CSD on the Road”; and simplifying existing labels, like turning “Missions” and “Visions” into “Why CMU?”

Final Design

Computational Modeling and Analysis for Complicated Systems New insights into the emergent behavior of complex biological and embedded systems through the use of revolutionary, highly scalable and fully automated modeling and analysis techniques.

NEWS The winners of the 2012 Turing Award, MITâ&#x20AC;&#x2122;s Shafi Goldwasser and Silvio Micali, have significant ties to Carnegie Mellon.

Carnegie Mellon Boosts Entrepreneurship Efforts By Merging Project Olympus and Don Jones Center.

Carnegie Mellon University Joins National Effort to Increase the Number of Women in Computing.

SCHOOL OF COMPUTER SCIENCE

APPLY Prospective Students

Current Students

ABOUT

16 May

19 June

CONTACT

Parents

DEGREES

Employers

RESEARCH

PEOPLE

PROJECTS

EVENTS May

Alumni

Alice

CS Black Friday: General Meeting

Provides tools and materials for teaching and learning computational thinking, problem solving, and computer programming across a spectrum of ages and grade levels.

Friday 10:00am 6115 Gates&Hillman Centers

Pellentesque

Hands-on Workshop on Computational Biophysics

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque orci quis odio commodo dapibus. Nam ornare placerat condimentum. Quam purus, cursus ut ligula in. bibendum

Monday 9:00am - Friday 5:00pm 300 South Craig Street

Proin Nec Eleifend Ligula

CS Faculty Meeting

Nullam convallis nisl non nulla elementum viverra. Proin at rhoncus purus. Donec consequat feugiat sem ac blandit. Quisque vitae fringilla quam. Proin massa nisi, lacinia nec cursus eget, condi-

Wednesday 3:30pm - 5:00pm 6115 Gates&Hillman Centers

PRESS

EMPLOYERS

SITEMAP