331 Final Project Team 4 By: Will Evers, Vince Scheidel, Sofie Linkis, Greg Pomanti Dr.

Tyworth 4 December 2011

Project Introduction This project gave the students in IST 331 the opportunity to act as experts in design and evaluate a particular website. The purpose of the project was to find a website that we felt could we could evaluate and improve. Team 4 decided to evaluate the website of the Penn State club Young Life. In order to evaluate the website, we conducted interviews with the client as well as interviews with different users, and we created flow models, sequence models, and artifact models to gain information about the site. We conducted heuristic evaluations as experts and created storyboard models and paper prototypes detailing changes that we suggested. After creating the paper prototypes, we interviewed the users again to gather their thoughts on the changes. This paper is a summary of our findings.

Client Information Young Life is a national, non-profit, non-denominational Christian, outreach organization for high school students. They are an outreach program to high school students as well as a mentoring program for high school students as well. Locally they work in the State College, Bellefonte, and Penns Valley school districts and most of their staff consists of college age volunteer leaders. The local Young Life branch is also a Penn State University club, and has a club website. The client website serves several purposes. Because Young Life is a non-profit organization, they fund their organization on donations, and one of the main purposes of the website is to attract donations from visitors and users. The website also serves as a way to register and sign up for certain functions that the organization sets up. Also, a more secondary

purpose of the site is to help inform visitors or potential volunteers of what Young Lifes purpose is, and what a Young Life volunteer leader does. We interviewed the webmaster for the Young Life Penn State club website. He designed the website to be simple and straight forward. He wanted the site to seem welcoming and inviting to the first time users who may be coming to check out what the organization is all about. From the interview, we gathered that although the website was intended to gather donations, it was not really designed to encourage donations. One way that the client thought the website could improve is that the information on the website needed to be updated more frequently.

Initial User Interviews When conducting our initial user interviews, the user were asked to do several tasks in order to test and evaluate the usability of the Young Life website. First the users browsed the page to get an overall impression of the site. Secondly, users were asked to donate money to Young Life, in order to do this the users were required to create an account, and evaluate how easy they found the process of donating to be. The findings of the initial interviews overall composed a positive user experience. The users found the site to be simple and easy to navigate, and because of the limited amount of information on the site, the users found it easy to get an overview of the content and find the parts they were looking for. However, the users found that the aesthetics of the site could be improved, especially the background that is on every page of the entire site, they found it to be distracting and making the page seem less integrated. Some users found that the slide show on

the front page was changing too fast and did not give them time to comprehend the information that the pictures convey. Several of the users interviewed had problems in locating the link for the donation function of the site, this was the only action related problem that the user experienced in their interaction with the site. Further, the fact that the user had to create an account in order to be able donate money seemed to be a deterrent for some of the users interviewed because they felt that it to some extent obligated them to further involvement in Young Life than a one time donation. When we compiled our findings from the initial interviews we found that the font of the website text is different depending on the computer being used, which showed to have an impact on the user experiences, because one was perceived more unprofessional than the other and made the entire site appear more unprofessional. The conclusion to be made about the user experience of the existing website is that users find the site to be simple and useful with a need for minor changes in the design in order to optimize its functionality. Besides that, the users found that the aesthetics of the site could be improved to make the site appear more appealing and enjoyable to use.

Heuristic Analysis A heuristic evaluation was conducted, guided by the ten usability guidelines proposed by Jakob Nielsen, in order to locate usability problems in the design of the interface. The language of the site is simple and easily understandable, caused by the fact that the Webmaster of the page himself is a user of the page and a part of the Young Life organization. Further the labels are suitable in relation to the content it presents.

The site is lacking feedback for the users in several areas, which should be improved in order to ensure a positive user experience. This feedback should be used in terms of the global navigation bar at the top of the site, the bar highlight links when the cursor pass across it, however a constant indication of the users location on the site. This would reduce the need for recalling where on the site the user is located and will further reduce the cognitive load of the user. Further a process bar in the donation process would afford feedback on where in the process the user currently is and further make the steps taken visible to the user in order to know what is completed and saved in the system. The site enables a consistent possibility to return to the home page via the logo that is globally present in the left side upper corner. Further it is always possible to interrupt an initiated donation with the options of either home or view your profile. In the process of creating a profile the system prevents errors from being submitted to the system, instead a descriptive error message is displayed in order to provide feedback to the user about how to ensure that the right information is submitted. This is easing the user experience in terms of faster error correction. However the site does not provide a lot of flexibility nor constrains for the users, the lack of flexibility can become an area of annoyance for frequent users especially in terms of donations, where several steps is needed in order to place a donation even after logging in with an existing account. The simple design of the page, in terms of spacing and layout, is making it easy to scan. Even though the background is consistent throughout the page, it is very distracting both in terms of the motive and the fact that it is cut of by text boxes and pictures. Further the font makes the

site appear less professional and the font is very vivid whereas a softer color would increase the aesthetics of the site. From the heuristic evaluation several conclusions can be drawn; the functioning and overall design of the page is effective and efficient, however several feedback features should be incorporated in order to ease the user experience as much as possible. Secondly the aesthetics of the site could be improved in order to make it appear more integrated and professional, this could be done by simplifying the background and changing the font of the page.

Problems After conducting the first round user interviews and our own heuristic analysis, we found several problems with the Young Life website dealing with usability goals and user experience goals. The Young Life website has a good overall layout, however, there are problems that can be addressed to better help the users. One of the main problems with the site is the donation button. The main purpose of the website is to have users donate money to Young Life. When users first open the website, the donation button is not easy to find. It is at the bottom of the page and is sometimes not able to be seen unless the user scrolls down the page. The subjects that we interviewed also found the picture slide show on the main page to be distracting. The users felt that the pictures moved too quickly and did not give them enough time to find out what the picture was about. The users also felt that the navigation bar caused some problems. When one of the links on the navigation bar is clicked, it takes the user to a different page on the website. However, once the user is on that page, the navigation bar does

not tell the user which page they are on. This caused some of the users to get confused as to which part of the site they were currently viewing. Users also found that the background picture on the website was distracting. Another problem that the users found was with the font of the text on the pages throughout the site. The users felt that the font they used, Kristin ITC, was unprofessional and unappealing. We also found that some browsers did not display the text in the Kristin ITC font, rather it displayed the text in the standard Times New Romans. There were also problems with the donation page. The subjects that were interviewed were somewhat frustrated that they had to create an account in order to make a donation, and they also felt that the create account form was too long and contained unnecessary information. After conducting the heuristic evaluations, we found that during the donation process, it was difficult to determine where you were. There was no progress bar that showed the user what they had already done or what they had left to complete in the donation process. Most of these problems can be linked to undesirable user experience goals. The problems with the donation button and the donation page can be described as frustrating while the font of the words on the website can be described as childish and annoying. The problems with the navigation bar and the slide show can also be described as frustrating. As for usability goals, most of the problems relate to efficiency. The problem with the navigation bar where there is no indication of your current location is an efficiency problem along with the lack of a progress bar during the donation process.

Recommendations

Throughout our interviews a few problems came to light, such as the poor visibility of the donation button, the distraction posed by the slide show on the home page, and the whole account creation process. The site was designed in a neat and organized way, however, our interviewees pointed out some flaws that would increase the ease of use and efficiency of the site. A big problem that we found was that the donation button was lingering below the field of view on all of the pages, making it barely visible to users in the beginning. A solution to this, we decided, would be to get rid of the large icon and instead add a donation link to the top menu bar which is visible no matter what resolution or size window the user has. This would potentially increase donations on the site. Another issue brought up by our users was that the slide show moved to fast and was distracting. To remedy this we decided that the slide show should be moved below the site introduction and slowed down a bit. This makes the focal point of the website the more important site description and not the speedy slide show. Another complaint of users was how the site forces you to make an account in order to donate even just one time. This can scare users away from donating, as many people do not like to disclose personal information. This is especially true if they are only interested in a one time, quick donation. Finally, one of our interviewees commented on the distracting qualities of the background. An easy fix would to be to replace it with a more simple background. In our teams evaluation of the site, we found several other aspects that would improve the usability of the site. One problem we saw was that the font used on the site was not compatible with all systems. On some machines the text was Times New Roman and on others the site was written in a very unprofessional and childish font, called Kristen ITC. Aside from the fact that having a text that is incompatible with some machines being a problem, it is also a

font that makes the site seem cheap and unprofessional. A more mature font would portray a better image of the site to new users. Another issue we found with the site is the lack of feedback that the site provides the user. The website does not give the user feedback to what page they are on. A solution to this would be to highlight the page the user is on in the menu bar at the top of the page. This would keep the user current on their location in the site. Another form of feedback that would be helpful for users would be a progress bar on the top of pages throughout the donation process. This would let users know where they are in the process and provide them with feedback that would make the users feel more comfortable with the interface.

Second Round Interviews The second round of interviews was very positive. We had taken into account the suggestions and recommendations that the interviewees had. The changes that they suggested were all helpful and would improve the layout and design. We incorporated their suggestions in our prototypes, and then in the second round of interviews we showed the interviewees the changes that we had made, and generally all agreed to the changes that were made and thought they would be good additions. No further issues of the site were found in the second round interviews.

Final Recommendations In conclusion, our evaluation of the site proved to be successful. We combined our heuristic evaluation with the insight provided by the interviewed users to modify and improve

the site. With the improved usability provided by things such as the added feedback features and the correction of distracting designs, the site should be more efficient and have more returning users. This site was a well put together design from the start and with these added features it will look more professional and take the design one step further.

Will Evers Dr. Tyworth IST 331 4 December 2011 Final Project Reflection Overall my team's evaluation of the Young Life site went well. The Young Life organization is a Christian organization that provides young people a setting to get together and practice their faith. This was a good choice in my opinion because we got an opportunity to potentially help out a local non-profit organization. My team and I successfully evaluated and created prototypes that can be used to improve the website and make their site more user friendly and appealing to users. This project had me a bit worried initially because my team got out to a slow start and we were initially unsure about how we were going to improve upon a site that, at first glance, was a pretty well designed and laid out site. My first thoughts were that I did not see anything wrong with the site and also that I did not think the webmaster would be willing to take the time out to talk to us about the project. The issue with the webmaster turn out to be a non issue and he was very willing to provide us with the information we needed. My other fear took a bit longer to pan out. For a while I would look at the site and fail to see flaws, however as We went back through our notes and interviewed our users, many thing started sticking out to us. This project does a very good job of forcing 331 students to apply the knowledge they have learned and how to implement it in a practical setting. The task where we made the flow, artifact and sequence model was a part of the project that I really enjoyed. I thought it was interesting to analyze the flow of data in an organization and also break down user processes. As a group the models were somewhat difficult, but we all eventually figured it out an produced what I think are very good models. Some suggestions for the next class would be to post all of the handout on angel and keep them up for the duration of the project. Some of the handouts were give out one per group. This caused some confusion and much wasted time on clarifications. If we were all able to see the documents all the time it would have saved a lot of time and confusion and generally streamlined the process. Overall our project went great and I think we produced a good project. I think that this project is a really great way to reinforce the course work and make us use the things we have learned this semester in a practical setting. I know, personally, that I understand the concepts we have learned far better than I did prior to starting the project. I feel that this project is going to help my grade on the final because units we learned in the beginning of the year are fresh in my mind because of this projects.