Designing the User Interface of Industry 4.0's Website ⚙️
Overview: Industry 4.0 is an engineering design team at the University of Waterloo with a focus on supply-chain, optimization and data-analytics.
Goal: As their UX Designer, I was tasked with revamping their website to stand out to potential sponsors and competitors for their annual case competition. 🏆
Overview: Industry 4.0 is an engineering design team at the University of Waterloo with a focus on supply-chain, optimization and data-analytics.
Goal: As their UX Designer, I was tasked with revamping their website to stand out to potential sponsors and competitors for their annual case competition. 🏆
Vision: Inspired by the Fourth Industrial Revolution, I centered it around a gear and created a space-inspired theme using custom illustrations in Ibis Paint X. 🚀
Before designing, I communicated with the team's software developers, identifying their technical constraints, and establishing milestones in Jira to ensure a timely website launch. ⌛
Vision: Inspired by the Fourth Industrial Revolution, I centered it around a gear and created a space-inspired theme with custom illustrations. 🚀
Firstly, I communicated with the team's software developers, identifying their technical constraints, and establishing milestones in Jira to ensure a timely website launch. ⌛
Tools Used
Tools Used
Tools Used
Brainstorming 🧠
Information Architecture
To organize the website's elements, I created a structural diagram of different pages, sections, and buttons. This greatly helped me plan my design layout.
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.
To organize the website's elements, I created a structural diagram of different pages, sections, and buttons. This greatly helped me plan my design layout.
Design Process 🎨
Design System
To ensure consistency and efficiency in my design process, I built a library of reusable styles and components in Figma. I set up a colour palette, typography guide, and component library with buttons, navigation bars, and card templates for easy access.
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.
To ensure consistency and efficiency in my design process, I built a library of reusable styles and components in Figma. I set up a colour palette, typography guide, and component library with buttons, navigation bars, and card templates for easy access.
Hero Section
I began with adding important components such as the navigation bar, created a catchy tagline and added CTA buttons.
With the theme of gears and space, I was inspired to create an engaging element to the website, a big rotating gear with solar flares around it.
I began with adding important components such as the navigation bar, created a catchy tagline and added CTA buttons.
With the theme of gears and space, I was inspired to create an engaging element to the website, a big rotating gear with solar flares around it.
I began with adding important components such as the navigation bar, created a simple yet catchy slogan and added CTA buttons.
With the theme of gears and space, I was inspired to create an engaging element to the website, a big rotating gear with solar flares around it.
Designing the Other Sections
For the rest of the site, I designed multiple custom graphics revolved around gears, following our style guide.
For the rest of the site, I designed multiple custom graphics revolved around gears, following our style guide.
For the rest of the site, I designed multiple custom graphics revolved around gears, following our style guide.
Final Design
Final Design
View the developed website with the animated gears here 🌟https://uwindustry4.tech/
View the developed website with the animated gears here 🌟https://uwindustry4.tech/
View the developed website with the animated gears here 🌟https://uwindustry4.tech/
Branding and Logo Design
Our team envisioned a 3D logo, so I brought it to life by learning Blender and modeling a gear inspired by a black hole and a ringed planet, aligning with our visual identity.
Our team envisioned a 3D logo, so I brought it to life by learning Blender and modeling a gear inspired by a black hole and a ringed planet, aligning with our visual identity.
Our team envisioned a 3D logo, so I brought it to life by learning Blender and modeling a gear inspired by a black hole and a ringed planet, aligning with our visual identity.
I also expanded my design work to marketing, producing Instagram content, and an event recap intro that promoted I4’s annual case competition.
I also expanded my design work to marketing, producing Instagram content, and an event recap intro that promoted I4’s annual case competition.
I also expanded my design work to marketing, producing Instagram content, and an event recap intro that promoted I4’s annual case competition.
