Client Background

The Center for Western Weather and Water Extremes (CW3E) is a leading research institution based at Scripps Institution of Oceanography, University of California San Diego. Established in 2014, CW3E specializes in understanding, predicting, and applying extreme weather forecasting, with a specific focus on atmospheric rivers (ARs) in the western United States. With a team of over 40 experts, CW3E collaborates with various stakeholders to address water resource management challenges exacerbated by climate change.

Client Needs

CW3E recognized the need for a website overhaul due to concerns about the existing cluttered and outdated design. The primary goal was to create a modern website that accurately reflects their cutting-edge research and provides a superior user experience. Key requirements included:

  1. General Overview: The website should offer a clear overview of CW3E's mission and activities, catering to both prospective students and policymakers.
  2. Real-time Forecast Tools: The site should provide real-time forecast tools unique to CW3E, with a focus on events, particularly during the wet season.
  3. Visual Design: The design should align with the UC San Diego identity but cater to a B2B audience, striking a balance between brand compliance and a professional look.
  4. Accessibility: The website must adhere to WCAG AA compliance, ensuring accessibility for all users.
  5. Responsive Design: The site should be responsive across various devices, including desktop, tablet, and mobile.

Approach

  1. Research and Discovery: We began by conducting in-depth research into CW3E's mission, audience, and competitors. Understanding their unique position in the field of weather research was critical for crafting an effective user experience.
  2. Wireframing and Prototyping: To address the clutter and outdated design, we created wireframes for various key pages, including news articles, events, publications, and more. These wireframes underwent one round of revisions to ensure alignment with the client's vision.
  3. Visual Design: Given the need for a professional, B2B-focused design, we developed two distinct visual directions for the homepage. These designs were crafted to be brand-compliant with UC San Diego while presenting CW3E's research in a compelling manner. Additionally, we ensured that both desktop (1200 px) and mobile (360-440 px) breakpoints were considered from the outset.
  4. Development and Accessibility: The website was built using WordPress, ensuring ease of maintenance for the client's team. We incorporated GA/GTM code snippets for analytics and a user-friendly sign-up form. Accessibility was a top priority, with every aspect of the site designed to meet WCAG AA compliance standards.

Challenges and Considerations:

  • CW3E's forecast tools included image files from their servers, which posed a challenge in ensuring full mobile responsiveness. We made efforts to code the tools for responsiveness, but limitations in image dimensions may affect mobile usability.
  • The client's small team had limited familiarity with web design processes, necessitating clear communication and education throughout the project.

Results

The redesigned CW3E website offers a clean, modern, and accessible user experience. It effectively communicates the institution's mission and research to its primary audience of donors and policymakers. The website's real-time forecast tools enhance its value to meteorologists, reservoir managers, and scientific forecasters.

Key Takeaways

  1. Effective communication and education are crucial when working with clients who may not be well-versed in web design processes.
  2. Balancing brand compliance with a professional, B2B-focused design is achievable and necessary for engaging the target audience.
  3. Accessibility should be a priority from the outset of web design, ensuring inclusivity for all users.

By successfully addressing these challenges and requirements, our UX/UI design team helped CW3E achieve a visually appealing, accessible, and informative website that aligns with their mission to advance the science of extreme weather forecasting and water resource management.

Figure 1. Wireframes - Homepage
Figure 2. UI Design Concept - Homepage.