Project Overview
For this project, my two team members and I were tasked with creating a library of information about soft robotics and wearable technology. This library would also serve as a foundation for our later projects. We decided to build our library as a website in Figma, with the goal of making the information easy to navigate and understand for someone unfamiliar with soft robotics. Since we were also new to the subject, we first needed to develop our own understanding before deciding how to communicate it through the website.
FigJam Process
We started by creating a shared FigJam to collect our research and organize our findings. We divided the research among the three of us, and I focused on how soft robotics works, its history, its ecosystem, its cultural and environmental impact, legal considerations, and unexpected applications. Over the course of a week, we gathered information from reliable sources and began identifying how it could be organized on the website. Having our research in one place helped us build a shared understanding of the technology and gave us a clear foundation to move into the design process.
Website Process
With our research organized, we began developing a visual identity that connected to the technology we were presenting. We created a moodboard in our FigJam with references that helped us explore possible directions for the website. Our color palette drew inspiration from the pink and blue appearance of the octobot, one of the soft robots we encountered during our research. We also compared several typefaces before choosing Almarai. These decisions gave us a consistent visual direction as we translated our research into the website's pages.
Website File
View Figma File Page Directly
The finished website brings our research and visual identity together into a resource that introduces visitors to soft robotics. I am very happy with how it turned out, especially considering how unfamiliar we were with the subject at the beginning. Working together helped us connect our individual research contributions and create a cohesive project. One of our favorite features is the dark mode switch on the landing page, which highlights the octobot's glowing appearance. This project helped me understand how organizing research early in the process can guide both the content and visual direction of a design.
Mock-Ups