MGTE '29 Class Profile 🎓

Timeline

4 months

Team

4 Designers, 3 Developers

Website

Currently being developed ⚙️

Overview: Something Management Engineers (MGTE) at UWaterloo hear a lot is, "what's that!?" This website not only answers that question, but also serves as a resource for prospective students, and a digital time capsule of our stories and authentic experiences at UWaterloo💟

Goal: I was tasked with leading the design of the landing page, one that meaningfully shows what MGTE is all about.

Timeline

4 months

Team

4 Designers, 3 Developers

Website

Currently being developed ⚙️

Brainstorming 🧠

Defining the Vision

Working with a team of four designers, we went through multiple iterations of concepts, discarding ideas that didn’t quite land.

We eventually landed on a scrapbook-inspired theme, bringing together photo strips, memories, and playful stickers to capture the spirit of our class.

To organize the website's elements, I created a structural diagram of different pages, sections, and buttons. This came in handy when I started designing in Figma.

Design Process 🎨

Landing Page

I actually had a lot of fun designing this one! I got to incorporate MGTE/UW Engineering inside jokes, and play around with physical media, converting them to stickers to make the scrapbook feel a little more real.

To ensure consistency and efficiency in my design process, I used reusable styles and components in Figma. I set up a colour palette, typography guide, and component library with buttons, navigation bars and cards for easy access.

Visualizing the Data

For the remaining pages, we divided the work among the team after aligning on a few core design guidelines.

Our design features playful colour themes, easy-to-read graphs, and fun stickers to keep the data engaging. We focused on making information visually clear while still reflecting our class personality.

To ensure consistency and efficiency in my design process, I used reusable styles and components in Figma. I set up a colour palette, typography guide, and component library with buttons, navigation bars and cards for easy access.

MGTE '29 Class Profile 🎓

Defining the Vision

Working with a team of four designers, we went through multiple iterations of concepts, discarding ideas that didn’t quite land.

We eventually landed on a scrapbook-inspired theme, bringing together photo strips, memories, and playful stickers to capture the spirit of our class.

To organize the website's elements, I created a structural diagram of different pages, sections, and buttons. This came in handy when I started designing in Figma.

Landing Page

I actually had a lot of fun designing this one! I got to incorporate MGTE/UW Engineering inside jokes, and play around with physical media, converting them to stickers to make the scrapbook feel a little more real.

To ensure consistency and efficiency in my design process, I used reusable styles and components in Figma. I set up a colour palette, typography guide, and component library with buttons, navigation bars and cards for easy access.

Visualizing the Data

To ensure consistency and efficiency in my design process, I used reusable styles and components in Figma. I set up a colour palette, typography guide, and component library with buttons, navigation bars and cards for easy access.

Next Steps 💭

The site is currently being developed by our wonderful developers. Hang tight, it's launching soon 👀

MGTE '29 Class Profile 🎓

Defining the Vision

Working with a team of four designers, we went through multiple iterations of concepts, discarding ideas that didn’t quite land. We eventually landed on a scrapbook-inspired theme, bringing together photo strips, memories, and playful stickers to capture the spirit of our class.

To organize the website's elements, I created a structural diagram of different pages, sections, and buttons. This came in handy when I started designing in Figma.

Landing Page

I actually had a lot of fun designing this one! I got to incorporate MGTE/UW Engineering inside jokes, and play around with physical media, converting them to stickers to make the scrapbook feel a little more real.

To ensure consistency and efficiency in my design process, I used reusable styles and components in Figma. I set up a colour palette, typography guide, and component library with buttons, navigation bars and cards for easy access.

Visualizing the Data

To ensure consistency and efficiency in my design process, I used reusable styles and components in Figma. I set up a colour palette, typography guide, and component library with buttons, navigation bars and cards for easy access.

Next Steps 💭

The site is currently being developed by our wonderful developers. Hang tight, it's launching soon 👀

Working with a team of four designers, we went through multiple iterations of concepts, discarding ideas that didn’t quite land.

We eventually landed on a scrapbook-inspired theme, bringing together photo strips, memories, and playful stickers to capture the spirit of our class.