Project Summary
Team: 2 designers
Timeline: 4 Months
Skills
UI/UX Design
Prototyping
Brand Design
Tools
Figma
My Role
Product Designer (Contractor) working on designing engaging personality card experiences and brand identity.
Tarock.me
My Contributions
I designed and prototyped the foundational "personality card" experiences for Tarock.me's various personality tests. This involved developing a cohesive visual language, including distinct color palettes and iconography for each test, to clearly differentiate offerings and enhance user engagement. My work also contributed significantly to defining the overall brand identity, ensuring a consistent and appealing user experience.
The Challenge
Tarock.me, an early-stage startup, needed to establish a compelling visual brand identity and translate its core offering, AI-generated personality insights, into intuitive, visually appealing, and shareable "personality card" experiences. The challenge was to make abstract personality data tangible and engaging for users, while also laying a foundation for future business applications. We also needed to prioritize creating marketing materials and pitch decks for potential investors. The process was scrappy and required designers to do a lot of product scoping throughout the design cycle.
Research & Discovery
Understanding the Vision
As an early-stage product designer, my initial phase involved deeply understanding Tarock.me's vision to "create your personality with AI." This included grasping the nuances of various personality frameworks the platform aimed to cover and how these would translate into a user-facing product.
Target Audience & Market Landscape
We targeted young to middle-aged users interested in self-discovery and personality insights, drawing parallels to the consumer base of platforms like CoStar in terms of demographic interest. This understanding informed design decisions to ensure accessibility, modern aesthetics, and shareability – key attributes for this demographic. While formal user research was nascent at this stage, my role involved anticipating user needs for clarity and engagement in presenting complex personality data.
Information Architecture
Knowing the core offering and our target audience, the cofounders and I came together to form an information architecture that made sense for our initial product demo. This is the flow for our minimally viable product:
Ideation & Design
Conceptualizing Personality Cards
I focused on translating abstract AI-generated insights into concrete, visually distinct "personality cards." This involved:
Information Hierarchy: Determining the most crucial information to display on each card (e.g., personality type, key traits, brief descriptions) to ensure immediate comprehension.
Visual Differentiation: Establishing unique visual identities for each personality test. For instance, one test might use a vibrant, energetic color palette with dynamic icons, while another might employ cooler tones and more abstract, reflective symbols, each reflecting the nature of the personality framework.
Wireframing & Prototyping
I began with wireframing to quickly explore various layout options for the personality cards, focusing on content placement, hierarchy, and potential interactive elements.
These concepts were then translated into interactive prototypes, allowing the founders to simulate the user experience of navigating between different personality tests and viewing their respective cards. This was critical for iterating on the flow and ensuring intuitive. Below is a preview of the MVP flow we moved forward with:
Defining the Core Experience
The central challenge was how to visually represent diverse personality traits and test results in a concise, digestible, and shareable format – the "personality card." This required exploring how to differentiate various tests while maintaining brand consistency.
Impact & Reflection
Refining Product Scope
My design work, particularly the detailed mockups of the personality card experiences, played a pivotal role in helping the founders articulate and refine the product's value proposition. Visualizing the product helped them clearly see how it could appeal to a dual audience: individuals seeking personal insights for social media sharing, and businesses looking for sophisticated, data-driven personality assessments for team building or hiring.
Delivering Foundational Assets
As a contractor, my primary objective was to deliver high-fidelity designs and prototypes that Tarock.me could use for development and fundraising. I successfully provided a comprehensive set of design assets that clearly communicated the user experience and brand vision. Given the fast-paced environment and small team, I was challenged to be scrappy and prioritize ruthlessly. In the face of nearing deadlines, I learned to adapt and be flexible to changing demands in a way that I hadn’t experienced before.
Key Learnings
This project reinforced the importance of strong visual communication in early-stage product development. Translating abstract concepts (like AI-generated personality data) into clear, engaging, and differentiated visual experiences was a significant learning. It also highlighted the dynamic nature of working with startups, where a Product Designer often wears many hats, from brand strategy to detailed UI execution.
Defining the Core Experience
The central challenge was how to visually represent diverse personality traits and test results in a concise, digestible, and shareable format – the "personality card." This required exploring how to differentiate various tests while maintaining brand consistency. My responsibilities extended to contributing to the broader brand identity, ensuring that the visual language of the personality cards aligned with the overall brand personality. This included defining a consistent use of typography, spacing, and image treatment across all design assets.
Dark mode vs Light mode
Given that the offer was primarily a mobile app, we decided that having the ability to toggle between light mode and dark mode was an important accessibility function we wanted to add into the early product. I experimented with the personality card views in light and dark mode as shown:
