Modibodi is a brand aiming to champion uncomfortable conversations around period, incontinence, sweat and more. They started creating leak-proof underwear to address issues in a sector that hasn't evolved in years with the goal to deliver life changing apparels.
Modibodi contacted Pollen to revamp their eCommerce website while addressing issues uncovered through user feedback. We then decided to rethink the information architecture, displaying products in a way that is the most organic and logical for Modibodi followers. Our core focus was to ensure accessibility standards would be met (WCAG 2.0) while representing the brand and its essence.
Discovery
As an initial phase, we worked as a team to fully understand who were the Modibodi customers and what were their current issues with the existing website. We reviewed the platform as a whole from start to finish, from process to UI elements to expose to their team what we could improve. By doing so, we realised that the existing Information Architecture was flawed and decided to revisit it along with the structure of the products imported in the website. Using Miro, it got very easy to communicate our findings along the way and list every UI element that was either needed or obsolete. One of them was related to the display of filters and the various options available that were confusing, according to the feedback we received. This particular example motivated us to rethink the way the IA was done and how the filters were displayed on screen to show products directly but also the options available.
Delivery
As we wanted the Modibodi team to be autonomous in the future, we crafted a Design System from scratch by using their existing brand assets in order to ensure of the scalability of the product. We designed templates and components to be used within the pages and made them available on their website for them to reorganise as needed. As the UI designer in charge on this project, I was responsible for following the project from the discovery phase until the implementation by our developers. I created the Figma files using a comprehensive structure, auto-layout, variable and so on, so the website design files would update through the different versions of the Design System files.
