IOIO Lab Website Redesign
This project consisted in jumpstarting the new website of the IOIO Lab, a place that helps students at Malmö University bring to life their mechatronics project. The website was redesigned to help the lab showcase past student projects with the Design Archive, advertise events and guide students with guides on how to solve common problems with mechatronics projects.
Year
2025
Duration
2 weeks
Type
Group Project
Responsibilites
UI design, implementation in Wordpress
Collaborators
Eszter Kovács
Tools
Figma, Wordpress
Keywords
web design, web development
The website is live!
Go to ioio.uni.mau.se to the live website. Future Lab assistants will add content and refine the design as new requirements are defined.
About IOIO
IOIO Lab is the place where students at Malmö University go when they need to borrow electronic components for their prototypes or to get help with other related design issues. IOIO Lab has been operating for 10 years and in the process it has evolved into a space that also welcomes students and researchers to hold events and workshops on design and electronics.
Challenge
While the lab has been operating for many years, not all students are aware of how the IOIO Lab can help them. With no online presence, communicating with students has historically been done by word of mouth or with signage posted nearby the Lab. Furthermore, the Lab didn't have a way to store valuable knowledge from preivious projects and use it to help future students.
Solution
The website addressed the Lab's needs by providing links to three different content sections: the Design Archive, where students can get inspired by past work; the Events page, where students can keep up to date with workshop and lectures held in the IOIO lab; the IOIO Guide, a section that documents IOIO services, equipment and solutions to common requests.
Outcome
The result is a minimal website that showcases IOIO's services on its landing page. Each service is explained with a short paragraph and an accompanying illustration. The user can easily reach the different sections both using the top navigatio bar and the buttons on the different sections.
Top of the landing page with a welcome message and the site's navigation bar.
Example of a section on the homepage where a service is explained with a short description and an illustration.
Header section of a design archive entry, showing information like title, author and a description.
Design System
The result is a minimal website that showcases IOIO's services on its landing page. Each service is explained with a short paragraph and an accompanying illustration. The user can easily reach the different sections both using the top navigatio bar and the buttons on the different sections.
Development annotations in the reference Figma file showing the styling and implementation details for Wordpress.
The design system is set up in the Wordpress' appearance editor to ensure consistency across pages and ease content editing.