CipherX

Cipher X is a start-up biotech company founded in 2021 as a collaboration for the Innovation Design Engineering programme at the Royal College of Art. The developing technology is designed to painlessly imprint permanent tattoos onto skin using (patent-pending) patches. These patches can be purchased on the site as existing designs, or you can create your own through the site’s design tool. With Macu’s help, we designed and developed an MVP that included an e-commerce and web app tool to eventually present to investors.

Due to the new micro-needle technology they developed, marketing this product was a challenge given its unique nature. There were no existing websites to use as inspiration which left them unsure on how to communicate their new approach to the tattoo market. The company already had a predefined vision for the design direction - one that was accessible and clear, with a folder-like layout system well-suited for mobile use. Our task was to transform their brief mockups, presented in PDFs, into a cohesive and functional website.

We began the design process by exploring forms of imagery, iconography, patterns and textures within Figma in order to align with their desired aesthetic. Once these assets were decided, we got to work prototyping the site. A key emphasis was placed on transparency by incorporating elements like as an FAQ and clear methods of contact for their customers to get in touch and inquire about the product if and when they needed.

Once this stage was finalised, we began development on the website using Webflow. Progress in this phase was pretty swift since the timeframe to create the MVP allowed us to avoid lengthy work such as complex animations or page layouts. The goal was to include enough features to be usable by early customers with the purpose of selling a vision and measuring interest. Along with creating the website with an integrated an e-commerce system, we were also tasked with designing the web app’s user interface in which customers design their tattoo, a feature later to be embedded on the site. The challenging aspect was to visualise how the users would design their tattoo within the constraints of the tool that utilised a dot matrix display. They also needed the ability to view the tattoo in a 3D orbital plane as well preview it on a mockup of skin(!). It was quite a daunting task and as a result I didn’t really know where to start.

Fortunately, the client’s visual inspiration included the likes of iconic Apple and Microsoft’s early user interfaces along with early video games such as Space War. Using these vintage interfaces as a reference allowed us justify a straightforward, unembellished and highly accessible user experience. This realisation aided the direction of the web app’s UI and UX greatly.