Overview

Designed the website of The Metabolism of Cities Living Lab of San Diego State University, focusing on making complex information accessible to users from different backgrounds while emphasizing the importance of the Events Section to drive engagement.

My Role

Conducted extensive user research to deeply understand the audience’s needs and behaviors. I led the redesign of the information architecture, simplifying the site structure to ensure intuitive navigation and understanding for users of all experience levels.

Challenges and Solutions

The main challenge was refining the high amount of information and presenting them in a way that was engaging for any user. I restructured the information hierarchy and optimized the Events section, using refined layouts and targeted calls-to-action to increase focus. Additionally, I refined the tone of the site’s visuals to give the client a competitive edge and create an emotional connection, ensuring the design stood out in their industry.

Tools

Figma, usability testing, semi structured interviews, information architecture.

Results

The website is still in development, but the usability tests with 20 participants showed a 20% increase in engagement with the Events section and higher overall retention rates. The updated visuals also contributed to a high Net Promoter Score (NPS), and positive feedback from participants was received, positioning the client for differentiation in the market.

Story of the project

The Metabolism of Cities Living Lab is part of San Diego State University, carrying out research and activities in the fields of sustainability and aiming to provide an overview of San Diego City based on United Nation’s Sustainability goals. The Lab has organised countless events and demonstrated sensibility towards an idea of creating a community around these goals.

MOC-LLAB’s website is heavy in content and users often report difficulty in getting to know about upcoming events that the lab organises. Since there are too many labs operating in the same area, not communicating enough the events creates a huge disadvantage. Also, the cluttered website heavy in information makes it difficult to navigate.

I conducted 3 user interviews with the main stakeholders. Below is an affinity map that demonstrates the key findings.

Next, I conducted 10 usability tests on the website to understand main user problems and needs. Here are the key findings:

• Users feel overwhelmed by the heavy information on the website and often missing the events section and having difficulty to tell which are the upcoming events.

• The visual style doesn’t encourage engagement or exploration.

• The images doesn’t communicate a sense of community that the lab wants to highlight.

Below is the user persona and journey map with the pain points highlighted.

I did a revision of the Information Architecture keeping in mind to simplify the amount of information and put emphasis on Events section.

Next step was to conduct usability testings on the new design. I recruited 10 participants from the original pool and 10 new users for usability testing. I asked them to complete the following tasks.

1. Find the upcoming Events from Homepage.

2. Navigate through the Events section and interact with its content.

3. Compare the new design with the old one in terms of clarity and usability.

User feedback was outstandingly positive.

• Users found the revised navigation intuitive and quickly located the Events Section.

• The layout reduced the feeling of overwhelm on the homepage.

• The Events page was engaging, and users spent more time exploring its content.

Below is the new Events section which highlights activities organised by the lab, with visuals that evoke positive emotions and a clear layout that was appreciated by users.

The results

• Usability testings conducted showed that users loved the clean layout and simplified navigation, spending more time on Events section.

• User evaluated the new visuals more emotionally engaging and the key stakeholders found them more in line with lab’s cultural identity.

• High fidelity wireframes reduced the amount of time spent by engineering team by almost 50%.

Click here to see lab’s live website to browse the work in progress.