ASP LAB OVERVIEW




ROLE
Freelance Designer/Developer

DATE
Jul ‘24 - Dec ‘24

CLIENT
ASP Lab (Miami U)

STACK
Figma, Figjam, Squarespace, Google Docs










DESIGN DEVELOPMENT



ASP LAB

Introduction
Making a website for ASP Lab.

I designed and built a website for a professor starting a research lab. Worked with the client and his lab assistants to bring their vision to life. MVP was ready in a couple months, after which we focused on developing handoff materials and conducting training sessions.














THE AFFECTIVE SCIENCE AND PSYCHOPHYSIOLOGY LAB
is a research lab founded and directed by Dr. Darwin Guevarra, an assistant professor of Psychology at Miami University in Ohio. The Lab’s research is centered around understanding human emotion, how we regulate our emotions, and the impact of emotion on our mental and physical wellbeing.

Dr. Guevarra has worked for years in the field of affective science, publishing a lot of great work on placebos and the effects of emotion on human psychology and behavior. Moving from being a postdoc at UCSF to an assistant professor at Miami University, he was in need of a new website for the lab he was soon to direct. That’s where I came in.








1.   The Objectives



PRIMARY GOAL

Display publications, research interests, and lab news in a clean and professional format.
TARGET AUDIENCE

Students, researchers looking to access publications, and anyone with a general interest in the lab’s work.

CONSIDERATIONS

Ensure easy handoffs and straightforward website maintenance for the client and their lab staff.








2.   The Solution + Impact



DELIVERABLES
Site with 6 primary tabs (pages) and numerous sub-pages. Provided thorough documentation materials with pictures for reference, reusable content sections, and template pages to prepare for seamless onboarding of lab members tasked with website upkeep and updates.




ANALYTICS
Accessibility standards were crosschecked with university staff, validated by a 93% WCAG score. The site’s performance similarly reflects its accessibility and depth of engagement. The home page has attracted thousands of visitors with around a 44% average bounce rate, confirming its effectiveness as a navigational entry point and lab overview. Visitors who explored the Research page spent at least 2 minutes, while those exploring the Publications page spent over 3 minutes on average. Moreover, we can be assured that our target audience of students and fellow researchers are engaging with the academic content as desired.  








3.   The Content + Research



Extra time was dedicated towards nailing the information architecture, seeing as the ability for a user to access information (research, publications, etc.) for an academic lab website is imperative. Discussion by order of importance: what are the primary groups that need to be addressed (which become the main menu tabs). Then sub-pages, then content breakdowns. At each step of the process, we referenced research compiled from numerous other lab and academic websites to determine which elements should be replicated, and what we should do differently. 









4.   The Visual + UX Design



The website was designed to have a simple, professional, and clean layout. The EB Garamond font was chosen for headers to emulate the feel of scientific papers. The Adelle Sans sans-serif font was chosen for body text to increase readability and to better contrast from header texts. Animation elements were made to be minimal and only used sparingly. Accessibility standards were cross-checked with Miami University staff to ensure we were delivering an inclusive site.

Each page was designed with various target user goals in mind. For example, on the Research page, the individual research interest sections have easily distinguisable headers, with an accordion component underneath the description that contains links the specific topic’s associated publications. This allows students with a general interest in the lab to easily browse through the page without getting caught in an overwhelming amount of text. Yet researchers or those with further interest in the research itself can still easily access more information by clicking through the publications accordion.  










5.   The Development



SITE BUILDER OF CHOICE
We landed on squarespace due to its intuitive navigability and short learning curve, an imperative aspect considering the website would be handed off to the client and his staff. The UI is accessible, the learning curve is short, updates are easily manageable, and analytics are already provided. The platform’s functionality also made it easy for me to create the aforementioned template pages and reusable blocks or “saved sections” (as referenced in the image below) that would save lab members time and effort when tasked with website maintenance.