UI design, product design
Moira is a website prototype and a concept product, developed as part of an interaction design university course in a team of two. The website allows customers to purchase and customize the Moira box, which is designed as a modular storage solution for tabletop gaming items.
To invent a concept product and design a website capable of configuring said product in an intuitive and clear way. The product we decided to invent for this project is Moira, a wooden box with magnetic pins capable of housing a variety of different storage modules. This box is aimed at people who love tabletop games, in particular tabletop games with items that hold emotional value, such as D&D dice.
We designed a website experience centered around two concepts: boxes and modules. Boxes can come in a variety of woods and potentially sizes, expressed in grid units, while modules occupy a certain number of units and can be placed within boxes. Both boxes and modules can be purchased separately, but the best experience is configuring a box with modules and purchasing them as a bundle. This configuration aspect was the main focus of our efforts.
The home screen is meant to be a landing page, showcasing the products and giving an overview of the main concepts. The hero section is a window into the company's values and mission, but call to actions are always present to lead the user to the appropriate places pages of the store where they can simply browse or directly configure their Moira box.
Modules are an important part of the expereince. This section allows to browse between modules, filter them in a variety of ways and of course learn about each module. The detail pages have a description, closeup and a way to preview the available sizes.
Cases are the second part of the equasion. As with the modules browser, it is fairly easy to filter by price range or otherwise. Every case has an origin history, which is showcased in the details page for each box.
The centerpiece of the configuration experience, where boxes and modules meet. The left side of the screen is home to a live preview of the current configuration state, while the right side acts as a browser to find the appropriate modules. Modules can then be placed into the preview to configure at will. Of course, different woods can be selected for the boxes too, and a number of different preview views are available. In the design process, it was important for us to mimic the gesture of physically picking up modules and placing them in the box, for a more personal and meaningful connection. The logic of configuration is also easy to grasp, being close to the real world. Pricing is of course always visible and updates as the box gets configured.
The project started with a brief and a product pitch. We then started to build the configurator, which was the centerpiece of the interaction, followed by the rest of the interactive elements present on the site. The box assets were modelled in Rhinoceros and rendered using Adobe Dimension. The main prototype was built in Protopie, which allows for more advanced interactions. Other products from the Adobe and Affinity suite were used to create the many graphical elements present on the page. Finally, a mobile version of the website was constructed as well, but given my limited involvement with that portion of the project, due to it being handled by a different team member, I decided to present only the part for which I was responsible.
Design is a product focused process that distills what is meaningful from what is possible. I'm a passionate visual designer based in FVG, Italy, focused on UI/UX design and brand identity.
