Kaleido

Links

Visual identity

Since the webshop featured a diverse range of products—from jewelry to electronics—we wanted a name that reflected this variety. Kaleido, short for kaleidoscope, captured this essence. However, instead of embracing the vibrant colors typically associated with a kaleidoscope, we opted for a minimalistic design approach. A monochrome palette of white, black, and grey formed the foundation, with indigo strategically used to establish visual hierarchy and subtly guide the user. This restrained use of color also contributed to Kaleido’s modest yet refined brand personality. Drawing inspiration from platforms like Temu, which offer a wide assortment of products, we aimed to create a similarly inclusive shopping experience—but with a more elevated aesthetic. To enhance this sense of understated luxury, we chose Poppins as the primary typeface, balancing modern simplicity with a premium feel.

The design process started with each of us brainstorming and making mid-fi skisses seperatly before we came together to discuss and decide on a final design. We then created a hi-fi prototype in Figma.

Code process

We began the project with a kickoff meeting to establish the structure and workflow. Two team members were designated as code masters, responsible for merging code and maintaining the integrity of the main branch. To streamline collaboration, we divided into three coding pairs but also worked individually when needed. GitHub played a central role in our workflow—we created issues for each task, branched off from them, and only pushed code after requesting a merge into the main branch. This project significantly deepened my understanding of React, particularly in managing global states for useStates shared across multiple components and implementing new hooks like useParams to dynamically generate product pages. Beyond React, I gained valuable experience in Git and GitHub, learning how to coordinate work on separate features simultaneously. As a UX designer, this experience also gave me greater empathy for the developer’s perspective—something that is incredibly beneficial even in the design phase. It also highlighted the challenges of reading and modifying someone else’s code, reinforcing the importance of clear structure and documentation in collaborative projects.