Lopes Lab Design

Lopes Lab Design

Role
Graphic & UX/UI Designer

Scope
Logo & branding, website design,

Client
Lopes Lab at the University of Massachusetts

Timeline
2026

Overview & Content

This project involved developing a logo and brand identity and redesigning the Lopes Lab’s website to better represent its mission and research. The goal was to improve the lab’s visibility, and the website’s usability to create an engaging experience for prospective students, current students, faculty, researchers, and donors.

Logo Creation

1

Site Organization

2

Mid-Fidelity Mockups

3

Style Guide

4

Implementation

5

Logo Creation

The task was to create a modern, approachable visual identity that communicated the Lopes Lab's leadership in sustainable, light-based water treatment research. The logo needed to be versatile and distinctive while keeping the lab’s values in mind: innovation, environmental responsibility, and collaboration.

Site Organization

Starting with the existing website, I outlined the pages, reviewed the content, and proposed a revised site map to use as structure moving forward.

Previous Site Map

The original six-page website was reorganized and expanded with new pages to better reflect the lab and the client's goals.

Proposed Site Map

Decisions and adjustments for the new site map proposal are outlined below.

Goal: high-level view of the lab answering the question “what does this lab do?" or “what problem are they trying to solve?”
Content: condensed mission statement and areas of research at a glance. Introduction of who are the people behind the lab. Highlights of lab news or events.
Goal: provide more details about the work being done in the lab.
Content: topics of research with more terminology and specifics, while still remaining easy to consume. Process and projects can be explained. Research-related resources for various users.
Goal: present the people behind the lab.
Content: lead, current students, and lab alumni. This was kept as its own page to provide space to one of the most important aspects of the lab: its people.
Goal: access publications related to the lab and its work.
Content: publications with links, and credited authors. Also necessary to keep as a stand-alone page, given the distinct user goals of the page, and quantity of publications.
Goal: talk to pedagogy of the lab and list educational opportunities.
Content: mentality and approach of the lab. Programs and other opportunities related to topics explored by the lab and the lab itself. This page would be most useful for current students.
Goal: demonstrate how the lab is impacting the world.
Content: news articles, accomplishments of the lab and its students, and events they are participating in. Originally 2 separate pages, it made sense to combine “In the News” and “Outside of Lab,” given the related content.
Goal: access lab contact information.
Content: contact information and resources for working with the lab.

Mid-Fidelity Mockups

To further visually organize the website, I put together mockups that showed the structure of each page.

Research

Publications

Education

News & Events

Team

Home

Style Guide

After building mid-fidelity mockups, I developed a color scheme, decided on typography, and created other design elements to round out the style guide for the lab website.