Role: Design / Researcher / Coding

This engaging psychological quiz website served as a unique NFT promotional tool, offering users insights into their work partner archetype and their ideal colleague match. Leveraging detailed analytical questions and vivid character illustrations created by talented 2D artists, the site captured the essence of each user's personality in a visually compelling way. Its striking design and interactive experience led to widespread acclaim on social media, with the campaign achieving over 500 shares and attracting 2,000 participants, showcasing its appeal and effectiveness in engaging a broad audience.

Flow

The marketing team initiated a project to create a psychological test website aimed at bolstering customer engagement through our advertising activities. I was responsible for conceptualizing the website's flow, ensuring it adhered to the logic outlined in the proposal, thereby guiding the engineers in developing the site's framework.

This psychological test is uniquely designed to combine three types: cardiac (heart), gastric (abdomen), and cerebral (brain). The results from these three categories provide participants with tailored outcomes, enriching their engagement with the content. In crafting the test, I collaborated closely with the marketing team to deliberate on the direction of the questions, ensuring they align with our engagement goals. Concurrently, I engaged with our engineering team to discuss the most efficient methods for data integration and the strategic planning of the website's architecture. This dual-faceted approach was pivotal in ensuring the seamless fusion of content relevance and technical feasibility, setting the stage for an engaging and insightful user experience.

Wireframe

Design

In the visual design aspect, we embraced an 80s retro sticker style, creating a visually striking and engaging aesthetic. Given the text-heavy interface, ensuring readability for users was our top priority. Our 2D artists crafted unique characters for each test result, bringing the outcomes to life in a vivid and entertaining manner.

The prototype was developed using HTML, CSS, and JavaScript, effectively lightening the workload for our front-end engineers and thereby enhancing work efficiency. We also incorporated responsive web design (RWD) principles, tailoring the layout and dimensions for each device to ensure an optimal experience for every user.

Mockup