CAMLab Website Redesign
CAMLab is a multidisciplinary research and cultural institution focused on exploring art, media, and culture through innovative projects and exhibitions. During the summer of 2024, I served as a design intern at CAMLab, where I was tasked to redesign the official CAMLab website. The goal of this project was to enhance user experience, improve content accessibility, and better align the website with CAMLab's offerings, mission, and values.
Duration
2 months, Summer 2024
Role
User Research
Web UI/UX Design
Team
Mona Wang, Ally Luo, Dorothy Li, Jingfei Huang, Ao Yang, Elva Wang, Natalie Zhang, Bailey Xu
Tools
Figma
Overview
What is CAMLab?
CAMLab is an cutting-edge institute from the the Faculty of Arts and Sciences of Harvard University. It explores innovative, interdisciplinary ways of showcasing art and culture through immersive installations, exhibitions, films, digital publications, and other multimedia forms. CAMLab aims to integrate humanistic inquiry with cutting-edge technology and design.
During my internship this summer, our team was tasked with redesigning the current CAMLab website to improve user experience and incorporate new updates and content. I was responsible for three parts of the redesign: the Connect section, the Events page, and the CAMLab Cave page.
My Role
01. The Connect section
Team
Wendy Yu, Natalie Zhang
Designers
Researcher
Ao Yang
The Problems
The current organization of the five subcategories within the CONNECT section is not optimal. For example, important information about Events is buried within this section, making it difficult to find. Additionally, there is redundant content, such as News, which overlaps with the Events information.
Hidden and Misplaced Information
The Join Us page does not provide a clear overview of each program before users click into the individual pages, making it difficult for them to determine which program is relevant to their interests among the various programs.
Lack of Program Overviews in Join Us
The Support Us page is currently inadequate, offering minimal details and unclear instructions on how individuals can contribute.
Limited Information and Clarity in Support Us
Insufficient Contact Information
The Contact Us page contains only basic details, making it difficult for users to reach out effectively.
The Design Solution
The original five subcategories are changed to four subcategories: Newsletter, Join Us, Support Us, and Contact Us.
New Subcategories
We transformed the News page into a Newsletter page to eliminate repetitive content and highlight the growing importance of newsletters at CAMLab. Users can now easily access past editions, organized by month and year. Additionally, we've added a prominent "Subscribe" button, making it easy for visitors to sign up and stay updated.
A New Newsletter Page
The new design for the Join Us page features an enhanced text visual hierarchy at the top. This layout improvement reduces cognitive effort of reading a block of text. One of the key features of the redesign is the interactive element added to the program images. When users hover over an image, a short text blurb appears, providing a concise description of the corresponding program. This feature allows users to easily understand the essence of each program without needing to click through to separate pages, making navigation more intuitive and efficient.
Informative Design for the Join Us Page
In the individual program page, we've introduced an accordion menu to declutter the content. We've also added a prominent "Apply Now" button that directly initiates an email draft to the designated application email address. This functionality highlights the application process as a key action item on the page.
Redesign of the Support Us Page
We introduced clear subheadings, "Make a Gift" and "Membership," to distinctly categorize the two primary ways to support CAMLab. We included detailed membership information as we recognized CAMLab membership as a significant source of support. Besides, We've added direct buttons for "Give Now" and for each membership option to make it easier for users to take an action.
We compiled a more comprehensive list of contact information and used text visual hierarchy to make it easier to read. Additionally, we replaced the previous display of social media usernames and names with visual icons linked to each social media account. This declutters the page and provides a cleaner look.
Redesign of the Contact Us Page
02. The Events Page
Team
Designer
Researchers
Bailey Xu, Wendy Yu
Dorothy Li, Wendy Yu
The Problems
As discussed in Part 1, Events information is currently buried within the CONNECT section, making it difficult for users to access.
Hidden Placement Under CONNECT
The existing layout is challenging for users to quickly identify upcoming events and their respective dates.
Difficulty Identifying Upcoming Events and Dates
The Design Solution
The Events page is moved to the main navigation bar on the home page.
New Location
We displayed a calendar view on the Upcoming Events section. This calendar allows users to quickly identify the dates of upcoming events. Selecting a specific date highlights the events scheduled for that day.
Upcoming Events with a Calendar
The Past Events page is an archival of all events, providing a resource for those interested in reviewing previous content.
Past Events
The new Individual Event Page design emphasizes clarity, ensuring that key details about each event are immediately visible. The Date, Time, and Location are prominently highlighted, making it easy for users to identify when and where the event will take place. The type of this event is also highlighted using tags.
Enhanced Individual Event Page
03. The CAMLab Cave Page
Team
Designer
Wendy Yu
Researchers
Dorothy Li, Wendy Yu
The Problems
The information about the CAMLab Cave (the physical location of CAMLab) is currently located under the ABOUT section, making it difficult for users to find.
Hidden Placement Under ABOUT
The current section provides minimal details, despite the significance of this space to CAMLab. The page lacks comprehensive information about the Cave - the physical location and the permanent exhibition space, which are crucial for visitors and collaborators to understand.
Insufficient Information
The Design Solution
The CAMLab Cave page is moved to the main navigation bar on the home page.
New Location
Clear Sectional Organization
The redesigned CAMLab Cave page is structured into four distinct sections: Visit, On View, Workshops, and Event Rentals.
Less critical information is housed within an accordion menu to reduce visual declutter. I also used a button for Book a Tour to make this action easily noticeable.
Visit Information Design
On View Section
The "On View" section employs a combination of images, descriptive tags, and short descriptions to provide a concise overview of the current exhibits in the CAMLab Cave.
Process & Reflection
Research
Before starting the redesign project, two other interns and I conducted a critical evaluation of the existing CAMLab official website’s design. This evaluation gave us a deeper understanding of the current website's structure and design system.
Critical Evaluation
To gather comprehensive feedback on the current CAMLab website, we distributed surveys to both the general public and CAMLab members. These surveys were shared through Instagram and other official social media accounts. Here are the key insights from the survey findings:
Survey
Appreciation for the unique UX and specific UI animations
Information about exhibitions and events is a crucial topic for members.
The need for clearer explanations about CAMLab’s purpose and more detailed project information.
The desire for better categorization of events and activities to enhance information accessibility.
We examined a variety of websites from different sectors, including museums, educational organizations, art studios, labs, and firms. Our goal was to identify best practices and innovative design elements that could be incorporated into the redesign of the CAMLab website. We evaluated these websites based on factors such as user interface design, content organization, and user engagement features.
These case studies provided valuable insights into how other organizations present their information, engage with their audiences, and facilitate navigation.
Case Studies
Ideation
The iteration process of our designs was a dynamic and collaborative effort. We received multiple rounds of feedback from a diverse group of contributors, including designers across different teams, as well as the CAMLab Executive Team, to ensure that the final product aligned with both creative standards and organizational goals.
Iteration
This experience has been immensely valuable in my growth as a designer, providing me with practical skills, collaborative experiences, and a deeper understanding of the design process. The iterative design process, driven by multiple rounds of feedback, taught me the importance of flexibility and responsiveness in design work.
I also gained practical experience in conducting a critical evaluation of an existing website, performing case studies, and incorporating user feedback through surveys.
Additionally, I learned to balance aesthetic considerations with functional requirements, ensuring that the final product was not only visually appealing but also user-friendly and accessible.
Lastly, this internship provided me with a deeper appreciation for the role of design in communicating an organization's mission and values. It was rewarding to see how our design decisions could enhance the way CAMLab presents itself to the world and engages with its community.