Product Designer
Collaboration and Innovation Lab           
Tags: Web Design, Rebranding, Usability Comparison

Tools: Sketch, Illustrator, Zeplin
Project Space: HCI Lab @ Penn State
Team: Adam Wattis, Nick Alico, Niantong Dong, Adi Chakravarty, Tiffany Knearem

The Collaboration and Innovation Laboratory is a rebranding initiative by the Center for Human-Computer Interaction at The Pennsylvania State University to rejuvenate its online presence. As a multi-disciplinary unit in the College of Information Sciences and Technology, its research focuses on collaborative learning, community health, software and information design, and training and instruction design.
Project Details
The members of the lab wanted a complete rebranding of their portfolio-style website, featuring their projects, publications, member information, and associated press releases. In addition, the lab members needed a streamlined and convenient way of editing these details. The challenge was to design a responsive webpage in order to improve usability and incorporate the visual likeness of a Penn State affiliated website without the use of any affiliated brand assets. The final solution came to be in the form of a single scrollable webpage with various sections, each incorporating a different UX, showcasing the projects, publications, members, and press releases of the lab.

With regards to the brand identity for the website, the primary directive was to not source any Penn State-affiliated branding standards and requirements (such as the Penn State mark, color, typography, or creative works featured in other Penn State websites) for the final product and instead come up with a standalone design system specific to the lab. As a result, although the final design borrows heavily from Penn State's visual identity and is clearly influenced by it (for instance, the blue and white color scheme), we did not explicitly use the visual identity standards as prescribed by the Penn State Brand Book (for instance, we did not use Penn State's HSL values to replicate their blue color and instead, defined our own set of HSL values for the blue color featured in the final website).
My Role
This project was undertaken by a team of five members which included a lab liaison, three developer-partners, and myself as the sole designer. My responsibilities included conceptualizing the information architecture; wireframes; UI assets including a hero image, multiple lab logos for consideration, and several typographic project logos; responsive prototypes; design systems containing style guides, component libraries, and production redlines for the front-end and back-end of the web application.
Front-End Site Architecture
Based on the initial directives provided by the lab, my first step was to come up with a cohesive sitemap for the front-end in terms of how the various pieces of lab-related information could be organized. This proved to be an important first step as the flow chart created a starting point of reference I could come back to during later stages of design.

After coordinating multiple communications with the lab liaison and developer-partners with regards to the overarching layout for the website, we unanimously settled on a single scrollable page divided into five sections: a landing section featuring the hero image and mission statement of the lab; a projects section showcasing the various research projects initiated by lab members; a publications section where each publication entry is sorted by the publication year; a members section featuring associated lab members (sorted by faculty, postdoctoral researchers, graduate students, undergraduate students, and alumni); a press section which features an identical layout to the publications section.

Based on the above parameters, I created the following wireframe showcasing an initial representation of each section.

Design Assets

Lab Logos for Consideration Project Logos
Hero Image

Usability Comparison

Landing Section
While the previous home page featured a word cloud and a full length About section, the redesign instead opts for a hero image in the form of an illustrated representation of the lab title and a brief mission statement. Furthermore, in contrast to the hamburger menu and non-persistent navigation bar featured in the original website, the new website features a persistent navigation bar with accessible tabs so that the user can easily jump to other sections with a tap or click.

Unlike the projects section in the previous website which adopted a drop-down solution, the projects section in the new website adopts a modal-based solution where the user taps on each project "widget" and a modal opens up spanning the entire screen under the navigation bar. However, the general layout when displaying the contents of each project is more or less similar between both the previous and new website. Each project features a description, the three most recent publications from that project, and associated researchers.

While the original website grouped all associated publications within each project under the Projects tab, the new website features publications as a separate section where publication entries can be filtered by the year of publishing. Each selected year features the three most recent publications (all in APA formatting) along with a downward arrow below the three publications which upon being tapped/clicked reveals all the publications from that particular year.

The key difference between the members section in the previous website and the members section in the new website is how each member group is displayed. The previous website displays each member group in a tabular format containing the name and email address for each member where as the new website features profile pictures, names, and email addresses for faculty members, postdoctoral researchers, and graduate students; track information (in addition) for graduate students; names only for undergraduate students and alumni.

Similar to the publications section, the press section organizes each entry based on the year of release. While it is evident that the user may experience a sense of déjà vu as they scroll from the publications section to the press section since both feature an identical UI, the lab had requested that each press release entry also be formatted in APA. Given this directive, I saw it best to retain the same UI as found in the publications section so as to make for a more recognizable user experience rather than a disorienting one.

The Back-End

Site Architecture
Upon completing my work on the front-end's user experience, I shifted my focus to the back-end and created the initial site architecture as a reference point for the next design stage.

UX Mockups
The user experience for the back-end follows a similar layout as seen in the front-end with editable fields for each section. The motivation behind this design choice was to enable quick and familiar editing and updating of contents.

This project was a tremendous learning experience for me as it gave me a realistic sense of the amount of collaboration, effort, and stages that goes into bringing a small-to-medium scale design project to life. Although the journey was quite the challenge, it provided me with the opportunity to not only sharpen my design and interpersonal skills, but also expand my breadth of knowledge with regards to various tools and processes.

While this project did not involve as much design research as other projects typically do, given the upfront clarifications and directives provided by the lab, the rest of the journey for me as a designer was very comprehensive (or to use another term, wholesome). Every design element and choice had to be discussed with all the developer-partners as it was crucial for each of us to realize the intended vision as closely as possible.

I am deeply grateful to have worked on this project and hope to apply my experience in other projects to elicit better outcomes and create more well-rounded products.
© 2021.