Design for Dimensions: Emory CS Website
Introduction
For this design project, our group took up the task of redesigning the website for the Emory Department of Computer Science for a specific user group on three differently sized screens: laptop, smartwatch, and a large multi-touch display. We primarily focused on creating a better experience for graduate students as our primary user.
Unlike undergraduates, graduates often are looking into research opportunities and study under faculty advisor(s). They aren’t looking into a college for general information but rather for a specialized field of study. We focused primarily towards prospective graduate students looking to apply to Emory, and current graduate students already at Emory. We broke down the graduate interests/priorities into three main elements:
- Research Opportunities: graduate students want to know what research opportunities and fields of study are available at Emory. They are going to spending several years studying, so it must be something they want to work on.
- Faculty: graduate students want to know what type of research professors have previously worked on and get a feel of the general compatibility with their own interests as an advisor. They will have work closely with their advisor for a long period of time, so it’s important they are compatible.
- Graduate Degree Requirements: graduate students want to know what the application looks like, and what the degree offers. Things such as courses, concentrations, and admissions information about the CS graduate degree. They want to know what makes this school different from others.
Sketch Prototypes
Compared to the webpages of other Emory departments (e.g. Psychology, Biology, Quantitative Science), the Department of Computer Science webpage is severely outdated. Many links are unfunctional or redundant. Information is hidden in various nooks and crannies of the walls of text that spans all over the pages. While functional, the overall page feels very cramp, visually bland, and hard to navigate.
We also found that the current design wasn’t very intuitive to navigate and mixed with information that only would apply to those that weren’t CS students already. Current CS students wouldn’t be interested in seeing application details about a program they were already enrolled in, and most prospective students wouldn’t want to see events they can’t attend. Thus, we decided to split the Graduate tab into “Current Students” and “Prospective Students”
Smart Watch
For the smartwatch, we focused on only including the essential elements of the original home page, as putting too much information would clutter the interface.
Inspired by the bubble design found on Apple watches, the original header bar is compressed into buttons which lead to sub categories such Undergraduate, Graduate, Research, etc.
Given the minimal screen space, there is a only a few pages per button which the user can scroll down further to read more text. An alternative rectangular button design with a side bar was prototyped, but the rounded buttons felt more fitting for smartwatch users.
Laptop
For the laptop, we wanted to have a similar format and theme as other department webpages (e.g. Psychology, Biology, Quantitative Science).
We knew that we wanted to put more emphasis the large main picture carousel present on the original CS homepage as it left a good impression when you first open the webpage to see an image rather than a wall of text. On the other hand, the quick links, news, and welcome text in the original webpage were bland and thus we sought ways to make it more visually appealing.
Some ideas included making the quick links into pictures which you could click on to learn more. Another was to overlay the links as semi-transparent buttons on the main web page. And some iterations included keeping the quick links in the original spot but with more visually appealing buttons. And some iterations moved the quick links to below the main picture and stretch the main picture to fit the whole width of the screen. These links would take you to pages similar to the ones located on the header bar.
Large Multi-touch Display
For the large multi-touch screen, we imagined it would be displayed in a public area like the Math and Science Building atrium. We wanted to keep the homepage consistent with the laptop design, since if the person wanted to find a piece of information they saw in one device it should be in basically the same spot on another device. To add more interactivity to the large screen, we experimented with putting a News/Event feed bar on the side and maybe a video touring the Math and Science Building where most of the CS classes are located in.
For the Graduate information page, we broke it into two main sections: current and prospective. While we were unable to do away with the large wall of text, we tried to use separators and headers to break up the page. We removed the sub-categories from the content bars in the original webpage and condensed them into 4–5 larger buttons. This would help users navigate without having to click on every nested sub-tab to find a piece of information.
Mood Board
As mentioned earlier, we were inspired by the webpages from other Emory Departments. Our color palette was inspired by the official Emory brand colors which included shades of blue, gold, and white. We wanted to keep fairly consistent with the other departments. We also wanted to make sure that the user can recognize the webpage as Emory with logo and school colors.
Final Prototypes
Below is the Figma prototype for all three devices.
Smart Watch
After some user testing with other students in our class, we got some feedback from our sketches that we implemented in our Figma prototype. First, we realized that there was no easy way to fit in all the necessary homepage buttons all on one tiny screen. So we have the option to scroll down to view more options on many pages. Each button takes you to an option to view the page as “Prospective” or “Current” student.
Next, we noticed that we needed a back button for users to navigate back to the home-page. Lastly, since we didn’t have much space to put an Emory logo, we used Emory’s school colors, blue and gold, throughout the pages.
Laptop
From our sketch feedback, we found that people like the expanded main image and having quick links be pictures. We kept the title “Emory Department of Computer Science” and Emory logo in the top of the screen (which also function as a home button), with the navigational quick links underneath. In the top right corner is a search icon which when clicked on expands a search bar. We took the carousel of pictures on the original website and expanded it to take up more of the page as it allowed one spot to visually focus on. Instead of a long list of quick links like the original, we put descriptive images that also function as popular links to other pages. Thus, at a glance, compared to the original home page, the page minimizes the amount of overwhelming information and relies on eye-catching images to direct the user’s eyes while still remaining functional.
Next, instead of having all tabs nested within the page itself, like the current webpage’s content bar shown previously, we had the each top header button be a clickable drop down that would take you to the page directly.
For the Prospective Graduate Student page, the page features almost all the same information as the original CS graduate webpage but instead aggregated into fewer longer pages. On the right-side, we noticed that we originally had a large empty space, so we added clickable pictures that would take you to other Graduate related information that would be useful for a prospective student in deciding whether or not to apply to Emory such as research and program details.
One feedback that we got was to add an Events Calendar. So for the current Graduate Students page, we added a calendar at the top that has various events underlined in blue which are links that can be clicked on for more details. Scrolling down, they can view Research Opportunities and click on the links to view more details (on an external website). A current student can take a quick glance at the calendar for upcoming CS events or scroll down for exploring what opportunities are available.
Large Multi-Touch Display
For the large multi-touch display, we kept it fairly consistent with the laptop design. However, one key difference is that we add a social media feed to the bottom right to allow for more interactivity and to fill up the larger screen space. While we tried including it on the laptop design, it felt too cramped to include.
Similar to the laptop Prospective Students page for Graduates, we have a text on a scrolling page with separators between each topic. However on the right side, instead of having pictures with links like the laptop, we opted for a list of buttons with icons. When we used pictures, we found that due to the extra horizontal space, they were not taking up enough room on the page leaving a large swath of empty space on each side. Adding more columns pictures made it feel overwhelming and making pictures wider ended up distorting the proportions of the page. Thus, we settled on the current buttons with icons as quick links to other pages which were found to be scalable with larger (wider) screen sizes and customizable to add more on the screen without being too overwhelming.
The current students page calendar of Events and Events detail page is largely unchanged.
Conclusion
Our designs were focused on bringing the Emory Department of Computer Science website to be consistent with other departments’ websites. We focused primarily on graduate students as our target user. We didn’t have time to redesign the whole website, so we focused on making the homepage and graduate page(s) more visually appealing and organized for users’ needs. We did this by consolidating pages, minimizing sub-tabs, and separating for experienced “current” students and new “prospective” students. It was trick trying to find ways balance the amount of information and white space with small screens with very little space and conversely, large screens with too much space. While not exactly breaking the mold, our designs should be familiar for anyone who has browsed other Emory webpages. We hope that one day the Emory Department of Computer Science website will become more usable while visually appealing.
