THE COMPUTER SCIENCE DEGREE GUIDE SENG 513 Project - Final Report

GROUP 9 Orkhan Suleymanov

Dennis Nguyen Carrie Mah Peter Buk Kevin Ta

Table of Contents Introduction

Pages 6.1 Styles 6.2 Main Page

6.2.1 Desktop & Tablet Landscape 6.2.2 Mobile & Tablet Portrait

6.3 Main Navigation 6.3.1 Desktop & Tablet Landscape 6.3.2 Mobile & Tablet Portrait

6.4 Back Navigation 6.4.1 Desktop & Tablet Landscape 6.4.2 Mobile & Tablet Portrait

6.5 Main Section page (About the Degree, Concentration, Internship, Research) 6.5.1 Desktop & Tablet Landscape 6.5.2 Mobile & Tablet Portrait

6.6 Detailed Contents page (About Degree, Internship, Research, Resources) 6.6.1 Desktop & Tablet Landscape 6.6.2 Mobile & Tablet Portrait

6.7 Detailed Concentrations pages (Computer Game Development, Software Engineering, Theoretical Computer Science, Human Computer Interactions, Computer Graphics, Information Security, Other Specializations)

6.7.1 Desktop & Tablet Landscape 6.7.2 Mobile & Tablet Portrait

6.8 Quiz Page 6.8.1 Desktop & Tablet Landscape 6.8.2 Mobile & Tablet Portrait

Differences Requirements Web Technologies Future Work

   

Introduction Our website helps new Computer Science students with their bachelor’s degree. We draw the “big picture” of Computer Science by giving students an overview of what the field offers. Students often want to pursue a concentration, do research, get an internship or a combination of these options. However, it is usually difficult to find information about these topics on the university website as it is spread across many pages. This can make synthesizing information difficult for the user as they try to envision their career paths. We have gathered all the available information into a central hub about the Computer Science program, concentrations, internship, and research. With this website, it will be easier to find recommended sources of information as well as a place for prospective students to explore the field. This will help students make better decisions as they approach their senior years where they begin specializing into the various fields. The website features content relevant to the Computer Science degree that the University of Calgary offers. While there are links to official sources, information about the various fields will be represented fairly for all students or curious users. We will make the website’s content understandable by a computer science layman while also making the website fun, easy to understand, and aesthetically pleasing. The users are able to navigate the website using an up-down scrolling interaction. They get the overall big picture through this interaction. When they want more information about a topic, they need to click buttons that navigate to specific pages.

Pages Recall:

As our website is simple and includes a lot of white space, the Tablet Landscape view is the same as the Desktop view; and the Tablet Portrait view is the same as the Mobile view. To avoid redundancy, we have collapsed similar content into one page.

6.1 Styles Due to time constraints, we did not finalize a logo. When creating our site, we wanted a consistent design. We separated each section into different colors to emphasize separation. For additional button and link styling, we incorporated that main color with a lighter and darker shade. Each color is a distinct hue so that they are separated accordingly and make it clear what the sub pages refer to.

6.2 Main Page The main page that the users first sees when they load the website is a small section with the logo of the site and a small line to describe what the site is about. There is a scroll indicator to hint that the user should start scrolling down through our main sections in order to visit each section. Since our users may not know anything about the degree, we believe scrolling through a story-driven design will be most useful.

6.2.1 Desktop & Tablet Landscape

6.2.2 Mobile & Tablet Portrait

6.3 Main Navigation The side navigation bar is vertical and color-coded. When a user is in a specific area, its corresponding circle will turn hollow. When a user hovers on desktop or taps on tablet, the page will scroll to the appropriate section of the page corresponding to that color. In mobile, the navigation bar is the same because we didn’t want to introduce a new navigation method that might be confusing to our users.

6.3.1 Desktop & Tablet Landscape

6.3.2 Mobile & Tablet Portrait

6.4 Back Navigation In the case when a user is in a ‘detailed’ section, the navigation bar becomes a back bar to navigate back to the previous page.

6.4.1 Desktop & Tablet Landscape

6.4.2 Mobile & Tablet Portrait

6.5 Main Section page (About the Degree, Concentration, Internship, Research) These Main Section pages have the same format: title, image, short blurb and button for more information. This introduces the idea to students what is available to them. They are navigated just by scrolling down through the main page. As described earlier, each section has a corresponding colour that helps separate them from each other.

6.5.1 Desktop & Tablet Landscape

6.5.2 Mobile & Tablet Portrait

6.6 Detailed Contents page (About Degree, Internship, Research, Resources) These Detailed Content pages will have information regarding the topic that can be reached by clicking “More” from the Main Section pages. They will contain images, short blurbs of text, and external link to more resources.

6.6.1 Desktop & Tablet Landscape

6.6.2 Mobile & Tablet Portrait Content will be stacked, but for sake of space we did not include everything in this view.

6.7 Detailed Concentrations pages An Available Concentrations page lists all the possible concentrations along with a small picture. Clicking on each one will lead to a more detailed page about it. These detailed pages will have the same format: title, images, and text describing the specific concentration.

6.7.1 Desktop & Tablet Landscape

6.7.2 Mobile & Tablet Portrait

6.8 Quiz Page This page is accessed from the Concentration main section. It is navigated by clicking the back/next buttons, or clicking the question number in the progress bar. Once the quiz is completed, the user can submit it to get to a Results page that will show them a chart and a description of what might fit them. Note that not all questions have to completed to get a result, although it would make the results more accurate.

6.8.1 Desktop & Tablet Landscape

6.8.2 Mobile & Tablet Portrait

   

Differences One change on the mobile side was removing the hamburger menu. Considering the interaction of scrolling down, the drastic change from our side bar navigation to a hamburger menu would be jarring and introduce a new interaction that the user may not like. Since our menu is not traditional, we decided to keep it consistent in all views so that the user does not have to re-learn how to navigate. In our original mock-up, we had intended for the navigation bar to expand on hover to show the name of each section. This would have helped made the navigation bar much more useful to use. Each section was also supposed to be full screen and had fixed scrolling so you can only see one section at a time. However, we underestimated the technical difficulties it takes to implement these interactions and unfortunately were not able to get into the final version.

Requirements This website meets the main project requirements, because it has at least 5 pages, includes a navigation bar, includes a form for user input (in the format of a quiz) with backend to output results that changes based off user input. It meets our business requirements, as our new modern website improves the image of the program by making information more accessible to undergraduates about their degree and possible career paths. The website helps our client, Susan Lucas, Undergraduate Coordinator in the Department of Computer Science. It helps answer most questions that prospective students have with the program. It also provides information about the Computer Science program as both a field and program to help our client deal with primary questions from students. We hope our site helps her focus on providing actionable assistance, rather than redirecting students to websites or staff members for commonly asked questions. It also helps our primary users, first to second year undergraduate Computer Science students. It helps them better understand concentrations, internships, and research opportunities. We also help our secondary users, prospective students, professors, and the parents of students. Since the content is presented as a story, it attracts attention and informs readers what is possible with a Computer Science degree. We were able to include all of our requirements, including creating a framework that is easy to maintain and expand upon.

Web Technologies We mentioned we will use FTP web hosting on a free web server from the Computer Science Department. This will provide a quick and easy way to update web pages from a simple, yet secure protocol. The website is available here: http://bigpics.cpsc.ucalgary.ca/ We used web languages like HTML, CSS, and Javascript to build this website. We also used libraries such as JQuery and AngularJS to make our website and quiz interactive. To style the website, we used CSS frameworks as boiler templates for responsive functionality like Bootstrap and Modern Town, an HTML5 template. The reason why we used Modern Town is because it had the fundamentals that our website would be using. This saved us a lot of time to set the basic structure of the website. Afterwards, we modified a majority of the code to include specific functionality as we designed in our mock-ups. For icons, we used Font Awesome. We also used AngularJS to create our one-page scrolling effect and for our Available Concentrations page, we used the chewing-grid stylesheet. Why reinvent the wheel when there are existing tools out there? We decided not to use Sass or Less, as it was simpler when building the website. We imagine future webmasters will not have time to set up an environment outside of something basic.

Future Work If given more time, we would have started our website from scratch instead of a template. It is often easier to maintain code created by a few developers, rather than from different sources. We would have liked a webmaster’s maintenance guide for the client, but due to time constraints were not able to produce one. We would also have conducted more formal user studies with actual potential end users by interviewing students and keeping them as part of the iterative design process. This way, we can get quick feedback on whether the website is heading in the right direction or if we need to change our design to better suit the needs of the students.