UT City CoLab

University of Austin | TexusLab | City of Austin

Goals

Improve engagement through better navigation, interactivity, and mobile optimization while strengthening brand value to attract international collaborations.

Tools

Figma
Canva
Visual Studio

My Role

Product Designer
Front-end Developer

Team

1 Product Designer (me)
1 Developer
1 Graphic Designer
2 Managers

Overview

UT-City Climate CoLab is a collaboration between researchers, policymakers, and communities to address climate challenges. The existing website failed to reflect its impact—it lacked engagement, structure, information hierarchy and responsiveness.

Impact

120%

Increased
Unique Visitors

80%

Increased Site Sessions

International Collaborations

Partnerships

Before

Single-page website with too much information
Poor navigation made it difficult to explore content

Lack of visuals and interactive elements led to low engagement
The site wasn’t mobile-optimized, limiting accessibility
Minimal community participation due to a lack of engagement-driven features

Screenshot 2024-10-16 at 12.41.49 PM.png

Lack of proper navigation leading to too many call to actions

Too much cluttered information on a single page

Lack of proper visual and information hierarchy

After

Structured multi-page platform with clear content separation for better readability.
Streamlined navigation and user flow for easy access to key information.
Visually engaging design elements and interactive features to enhance user engagement
Fully responsive design for seamless access across all devices
Added collaboration-focused sections and features to foster community engagement

A navigation bar with engaging visual design

Reduced Visual and information clutter

Interactive and engaging hover and carousel interactions with team and community visuals

Problem

The existing UT-City Climate CoLab website struggled to engage users due to its static, single-page design. It lacked interactivity and was difficult to navigate, which reduced its ability to communicate the collaborative work and dynamic climate-related initiatives.

🚨 Key Issues

No interactive elements to grab users’ attention.
Information was presented in a disorganized manner, making it hard to navigate.
The website wasn’t mobile-friendly, limiting accessibility.
The site needed a more engaging design to showcase the impactful work

My Contribution

👩‍💻 My Role: UX Designer & Frontend Developer

📌 My Contributions

Conducted stakeholder workshops & user interviews
Designed wireframes & interactive prototypes using Canva & Figma
Developed the website with React, HTML, CSS
Bridged the gap between designers, developers, and researchers
Optimized for mobile, responsiveness, and accessibility
Integrated live news & partnership highlights

Insights & Strategy:

Through workshops, surveys, and feedback from stakeholders, several insights emerged that shaped the redesign process:

Visual Design for Trust

Insight: Stakeholders and users both emphasized the importance of visuals to humanize the brand. Stakeholders wanted to see the team and community, to feel more connected.
Strategy: I incorporated more team photos, images from community events, and visuals from ongoing projects to make the website feel more personal and transparent.

Need for Up-to-Date Information

Insight: Stakeholders wanted the site to reflect the latest work, especially collaborations with global institutions like UNESCO, NASA, and WMO.
Strategy: I designed the site to feature a blog format that could pull in news updates that from the team’s LinkedIn account, ensuring the content remained current.

Importance of Clear Project Display

Insight: Users needed easier access to detailed information on projects, partnerships, and their impact.
Strategy: Each project was given a dedicated page with detailed reports, partner information, and contact details to create transparency and increase trust in the work being done.

Early design discussions during team workshops to refine the website experience.

What I did

Research & Ideation

I kicked off the project with stakeholder meetings and community workshops. We also ran surveys to understand the needs of the users and their pain points. Through this process, we realized:

Users needed a more dynamic, interactive experience to engage with the website.
Stakeholders wanted clearer visibility on the projects that were driving the UT-City Climate CoLab mission, particularly around climate change.

Design & Development

I used Figma and Canva to wireframe the project, which allowed me to explore different structures and interactions. The initial wireframes were a starting point, but through iterations, we refined the design to be more visually engaging and informative.

Wireframing & Information Architecture: Focused on creating a clear and user-friendly structure that would facilitate easy navigation.
Interactive Features: Added hover effects, dropdown menus, and image carousels to create a more engaging experience, ensuring users could easily find information.
Mobile Optimization: As part of the development process, I ensured the design was responsive across all devices, giving users the same smooth experience on mobile as they would have on desktop. This was key in increasing accessibility and engagement.
Front-End Development: I was hands-on in coding the site using React, HTML, and CSS, bringing the design vision to life with a responsive and scalable structure.

The initial wireframes that has a home, about, project and contact page.

User Flow

A clear user flow was key to making the website more intuitive and engaging. I mapped out how users navigate through the site, ensuring they could easily access projects, partnerships, and research. This helped streamline information, improve accessibility, and create a more seamless experience.