“Your partner in making memories
one purchase at time”

MyFirsThings: One Platform, Every Stage of Childhood

MyFirsThings is a dual-market e-commerce platform designed to meet the evolving needs of families with children aged 0 to 12.

The platform brings together new products from trusted brands and a secondhand marketplace, offering a seamless way to buy, sell, and discover all in one place.

A Flexible Model for Modern Parenting Needs

The platform is built around two main areas:

  • New Products: A B2C marketplace where stores and brands sell and ship items directly to families.
  • Used Products: A peer-to-peer and business-to-consumer model for secondhand goods, inspired by platforms like Vinted.

MyFirsThings: One Platform, Every Stage of Childhood

MyFirsThings is a dual-market e-commerce platform designed to meet the evolving needs of families with children aged 0 to 12.

The platform brings together new products from trusted brands and a secondhand marketplace, offering a seamless way to buy, sell, and discover all in one place.

A Flexible Model for Modern Parenting Needs

The platform is built around two main areas:

  • New Products: A B2C marketplace where stores and brands sell and ship items directly to families.
  • Used Products: A peer-to-peer and business-to-consumer model for secondhand goods, inspired by platforms like Vinted.
  • Project Type: End-to-End App + Branding.
  • My Role: Sole UX/UI & Product Designer, responsible for Research, Interaction Design, Visual Design, and UX Writing.
  • Industry: Children’s E-commerce (0–12 years) | New & Preowned Products
  • Tools: Figma, FigJam, Canva, Google Forms, Open AI
  • Duration: 2024
Check ALL the Mockups on FIGMA

Design Challenges

New Products:

Families looking for new items deal with limited time, fragmented offerings, and the burden of browsing across multiple platforms.

Used Products:

Parents struggle with used items, as children quickly outgrow them, leaving bulky, costly products with no clear way to pass on.

Value Proposition

Parents today face very different needs depending on where they are in their parenting journey.

Parents

  • All products from 0–12 years in one place
  • Home delivery for stress-free shopping
  • Declutter and earn by selling unused items
  • Helpful buying guides and community reviews
  • Inclusive of diverse needs (organic, eco-friendly, special needs, etc.)
  • Compare new and used options by price and features

Brand & Stores

  • New sales channel & expanded reach
  • Increased visibility and direct engagement with a targeted audience
  • Stock optimization and clearance of past collections

Value Proposition

Parents today face very different needs depending on where they are in their parenting journey.

Parents

  • All products from 0–12 years in one place
  • Home delivery for stress-free shopping
  • Declutter and earn by selling unused items
  • Helpful buying guides and community reviews
  • Inclusive of diverse needs (organic, eco-friendly, special needs, etc.)
  • Compare new and used options by price and features

Brand & Stores

  • New sales channel & expanded reach
  • Increased visibility and direct engagement with a targeted audience
  • Stock optimization and clearance of past collections

Click the mockup below to explore the interactive prototype in Figma

HMWs to Shape theVision

How Might We

create one unified platform for both new and used children’s products?

How Might We

help busy parents make smart, fast, and confident purchase decisions?

How Might We

turn unused baby gear into meaningful value—for both sellers and buyers?

Competitor Analysis

Mapping the landscape to spot the opportunity

MyFirsThings: One Platform, Every Stage of Childhood

MyFirsThings is a dual-market e-commerce platform designed to meet the evolving needs of families with children aged 0 to 12.

The platform brings together new products from trusted brands and a secondhand marketplace, offering a seamless way to buy, sell, and discover all in one place.

A Flexible Model for Modern Parenting Needs

The platform is built around two main areas:

  • New Products: A B2C marketplace where stores and brands sell and ship items directly to families.
  • Used Products: A peer-to-peer and business-to-consumer model for secondhand goods, inspired by platforms like Vinted.
User Research
User
Research
Interaction Design
Interaction
Design
Visual Design
Visual
Design
UX Writing
UX
Writing
User Research
User
Research
Interaction Design
Interaction
Design
Visual Design
Visual
Design
UX Writing
UX
Writing

User Research

Competitor Analysis

Mapping the Landscape to Spot the Opportunity

Competitor Analysis

Mapping the landscape to spot the opportunity

Mapping the Landscape

Understanding the competitive landscape isn’t just about seeing what’s out there—it’s about spotting what’s missing. For MyFirsThings, I zoomed in on two standout players:

  • Babyshop – a go-to for new branded products
  • Vinted – the leader in second-hand peer-to-peer platforms

Each has its strengths:

  • Babyshop shines in product quality and brand variety, but it’s pricey and lacks a circular economy model.
  • Vinted is all about affordability and sustainability, but it’s not tailored to children’s needs and lacks curated shopping experiences for parents.

The Big “Aha!” Moment?

No single platform was offering both new and used products for children— in one place, with a cohesive, parent-friendly experience.

This insight revealed a clear market gap—and a unique chance for MyFirsThings to step in as:

The first hybrid platform for parents who want quality + savings + sustainability in a single, trusted space.

This analysis became a strategic north star, guiding how we:

  • Positioned the brand
  • Shaped the user journey
  • Framed our value proposition around real, unmet needs

Want to dig deeper in MyFirsThings' Competitor Analysis?

Check in Figma

Surveys & Interviews

Listening to Real Parents to Design a Real Solution

Listening the Real Experts

Designing without listening is like guessing with a blindfold. That’s why, before shaping MyFirsThings, I turned to the real experts: parents.

Through a carefully structured survey, I gathered insights from 20 participants—all with children under 12—about their shopping habits, their approach to second-hand products, and what would truly make their lives easier.

Why a Survey?

While market research tells you what’s happening, a direct survey reveals why.

I wanted to explore:

  • How comfortable parents are with buying online
  • Their willingness to buy and sell used items
  • The pain points that stop them from doing so
  • What would encourage them to use a platform like MyFirsThings

Key Takeaways

  • 85% already buy baby & kids’ items online
  • 80% are open to buying second-hand
  • 95% own used items they no longer need

But

  • 42% say they want to sell but haven’t

The biggest blocker?

  • Time-consuming process (creating listings, taking photos, shipping, answering buyers)

The most exciting insight?

  • 76.5% would love a single platform offering both new and used products for children.

What I Learned

Parents are:

  • Digitally active shoppers
  • Open to second-hand if it’s fast, easy, and trustworthy
  • Looking for convenience + sustainability in one seamless experience

This validated the core value proposition of MyFirsThings and inspired a UX focused on simplicity, speed, and trust-building features.

CHARTS

Want to dig deeper in MyFirsThings' Survey?

Check in Figma

Empathy Maps

HIDDENLINE Empathy Maps

Designing for People Starts with Feeling Like Them

Step into the Users’ Shoes

To create truly human-centered solutions, the first step is to step into the users’ shoes. These Empathy Maps helped me dive into the lives of two real parents—with different routines but the same goal: giving the best to their children without compromising time, quality, or peace of mind.

The Multitasking Mom

A dedicated professional and caring mother juggling a busy schedule and a mind full of responsibilities.

  • Wants to save money without compromising safety
  • Looks for practical, time-saving solutions
  • Relies on her parenting network for advice and reassurance

Pain Points:

  • Limited time
  • Financial stress
  • Doubts about used product safety

Gains:

  • Savings on high-quality item
  • Trust in a reliable secondhand platform
  • A sense of belonging to a helpful parenting community

The Organized Dad

A busy project manager who wants to make the most of the time he spends with his child.

  • Loves being informed and up-to-date
  • Seeks creative, stimulating products
  • Wants to optimize his time without sacrificing quality

Pain Points:

  • No time to shop
  • Concerns about the durability of secondhand products
  • Struggles to balance budget and child’s needs

Gains:

  • Fast and convenient online purchases
  • Smart choices that spark creativity
  • A happy kid = A happy dad

Key Takeaways

These empathy maps helped me to:

  • Visualize real needs in a clear and engaging way
  • Digitally actIdentify both emotional and practical triggers to guide my UX decisionsive shoppers
  • Design an experience that saves time, builds trust, and fosters a sense of community

Want to dig deeper in MyFirsThings' Empathy Maps?

Check in Figma

User Personas

HIDDENLINE User Personas

Meet the People Behind the Data

Real Stories, Real Needs, Real Impact

Understanding our users isn't just a step in the process — it's the foundation of meaningful design.

That’s why I created four detailed User Personas, each representing a unique profile of our core audience: modern parents juggling work, life, and the wellbeing of their children.

Why Personas Matter

By giving a face and a voice to our data, these personas helped me uncover:

  • What truly motivates our users (hint: it’s not just price)
  • Their biggest frustrations during the shopping journey
  • How they balance trust, quality, and convenience when choosing between new and used products

Pain Points:

  • No time to shop
  • Concerns about the durability of secondhand products
  • Struggles to balance budget and child’s needs

Gains:

  • Fast and convenient online purchases
  • Smart choices that spark creativity
  • A happy kid = A happy dad

What I Learned

Designing with empathy is a game-changer.

Each persona pushed me to look beyond demographics and focus on behavioral insights that guide actual purchase decisions. Through this process, I gained a deeper understanding of:

  • How to prioritize product features that support busy parents
  • The importance of clear communication around product safety and guarantees
  • Opportunities for personalization and gamified experiences to drive engagement

From Valeria’s quest for safe, time-saving purchases, to Massimo’s love for quality and innovation, Paolo’s dedication to his newborn daughter’s well-being, and Martina’s drive to offer her daughter the best — these stories shaped every design decision that followed.

Want to dig deeper in MyFirsThings' User Personas?

Check in Figma

Customer Journey Maps

Mapping Emotions, Not Just Actions

Beyond the Purchase

Creating the Customer Journey Maps for MyFirsThings was a key step to truly understand how people discover, evaluate, and experience shopping — and what happens beyond the purchase. Four parents, four journeys, one shared mission: finding the best for their children.

Why Customer Journey Maps Matter

CJM helped me:

  • Visualize emotions at each stage (curiosity, uncertainty, joy, frustration...)
  • Identify critical moments where the service can improve — and where it already shines
  • Spot real opportunities to enhance touchpoints and content

Pain Points:

  • No time to shop
  • Concerns about the durability of secondhand products
  • Struggles to balance budget and child’s needs

Gains:

  • Fast and convenient online purchases
  • Smart choices that spark creativity
  • A happy kid = A happy dad

Meet the Parents

Four journeys, four personalities, four perspectives

  • Valeria is a thoughtful, detail-oriented mother, seeking quality and reassurance. Her journey highlights the importance of brand trust and post-purchase support
  • Massimo is a practical, curious father, driven by clear needs and great deals. His journey shows how crucial clarity, speed, and the right inspiration at the right moment can be
  • Martina is a caring, determined mother, always striving to offer her daughter the very best. Her journey emphasizes the value of reliability, and family-centered solutions
  • Paolo is an empathetic, responsible father, dedicated to his newborn’s well-being. His journey underlines the need for safety, convenience, and smart ways to simplify daily life

Pain Points:

  • No time to shop
  • Concerns about the durability of secondhand products
  • Struggles to balance budget and child’s needs

Gains:

  • Fast and convenient online purchases
  • Smart choices that spark creativity
  • A happy kid = A happy dad

What I Learned

What these stories taught me along the way:

  • Design empathy: stepping into the shoes of different users transforms the way we design experiences
  • Detail & consistency: even subtle emotions (like indifference) impact the user journey
  • Customer-first mindset: every interaction is a chance to build connection and value — not just to sell a product

Want to dig deeper in MyFirsThings' Customer Journey Maps?

Check in Figma

Minimum Viable Product

Prioritizing What Truly Matters to Users

From Vision to Action

Building an MVP wasn’t just about launching a prototype — it was about validating assumptions, prioritizing what truly matters to users, and keeping things lean, smart, and meaningful.

In a market filled with parental needs, emotional decisions, and secondhand gems, our goal was clear: connect buyers and sellers through a safe, simple, and helpful experience — whether they’re shopping new or selling used.

What's in the MVP?

The core features were designed to cover the essentials:

  • Clear distinction between new and used products
  • Smart search and product comparison
  • Trust-building elements like reviews and ratings
  • Guides and tips tailored to different age groups
  • Easy upload for secondhand items and in-app messaging
  • User profiles to manage preferences and transactions
  • Essential pages for support, FAQs, and brand transparency

Pain Points:

  • No time to shop
  • Concerns about the durability of secondhand products
  • Struggles to balance budget and child’s needs

Gains:

  • Fast and convenient online purchases
  • Smart choices that spark creativity
  • A happy kid = A happy dad

The Power of MVP

Creating an MVP helped me:

  • Learn fast through direct feedback and real-world testing
  • Focus on what users really need first — not what’s “nice to have”
  • Build empathy by seeing how parents interact with even the simplest features

Pain Points:

  • No time to shop
  • Concerns about the durability of secondhand products
  • Struggles to balance budget and child’s needs

Gains:

  • Fast and convenient online purchases
  • Smart choices that spark creativity
  • A happy kid = A happy dad

Lessons Along the Way

This project highlighted a few key lessons:

  • You can’t design everything at once — and that’s a good thing
  • Simplicity drives clarity, especially when dealing with emotionally charged purchases
  • Users will always surprise you — let their feedback guide the next steps

Pain Points:

  • No time to shop
  • Concerns about the durability of secondhand products
  • Struggles to balance budget and child’s needs

Gains:

  • Fast and convenient online purchases
  • Smart choices that spark creativity
  • A happy kid = A happy dad
DEVELOPMENT PHASES
Phase 1
MVP
Initial Launch
  • Implementation of the basic functionalities listed above.
  • Testing with a small group of users to gather feedback.
  • Optimization of the user experience based on feedback.
Phase 2
Iterations
Optimization
  • Adding advanced features such as personalized recommendations, notifications, etc.
  • Improvements to the review and rating system.
  • Expansion of the range of products offered.
Phase 3
Scale-up
Expansion
  • Implementation of advanced payment options and shipping.
  • Partnerships with multiple stores and brands to expand the offerings.
  • Targeted marketing to increase the user base.

Want to dig deeper in MyFirsThings' Minimum Viable Product?

Check in Figma
Select 'Interaction Design' in the bottom menu
to continue exploring.
Select 'Interaction Design' in the bottom menu to continue exploring.

Interaction Design

Heuristic Analysis

Learn From the Best to Build Better

Where Smart Design Starts

Babyshop.com under the UX Lens

Before designing a truly effective experience, you need a compass. The Heuristic Analysis is exactly that: a strategic checklist to evaluate what works (and what doesn’t) in a competitor’s interface—based on well-established usability principles. It’s where smart design starts.

Why it Matters

Analyzing Babyshop — a leading player in the children’s e-commerce space — allowed me to:

  • Identify best practices worth taking inspiration from
  • Pinpoint areas for improvement that MyFirsThings could surpass
  • Sharpen my critical eye on what makes an interface credible, functional, and enjoyable

This wasn’t just about critique — it was about learning from the best to build something even better

What I Analyzed

I followed the Web UX Checkup checklist from Web Usability by Pasquini and Giomi, examining 10 key areas of the user experience:

  • Digital Branding 🧸
  • Homepage Communication 🏠
  • Information Architecture 🧩
  • Search Functionality 🔍
  • Web Writing ✍️
  • Readability 📖
  • Visual Design 🎨
  • Task Execution ✅
  • E-commerce UX 🛒
  • Technical Aspects ⚙️

Each area helped me uncover both strengths and blind spots in the user journey.

What I’ve Learned

Here’s what stood out during the process 👇

  • A clear brand identity and consistent visual tone are essential for trust and recognition
  • A well-structured information architecture should guide users — not confuse them
  • Even a well-designed site can improve in accessibility, user feedback, and handling of complex tasks
  • Heuristic analysis isn’t just evaluation — it’s a key moment of strategic design thinking

From Insight to Design

This step marked a turning point in my Interaction Design process. It gave me actionable insights to craft a more accessible, user-centered, and market-differentiated experience.

Want to dig deeper in MyFirsThings' Heuristic Analysis?

Check in Figma

Card Sorting

HIDDENLINE Card Sorting

Organizing the Experience, One Card at a Time

Organizing the Chaos

When designing a seamless shopping experience, it’s not just what you offer — it’s how users find it. That’s where Card Sorting comes in: a powerful method to uncover the most intuitive way to structure content based on real user logic.

Why Card Sorting?

Clear navigation isn’t just a nice-to-have — it’s the difference between scrolling and shopping. This work helped me:

  • Validate a logical, user-first information architecture
  • Identify potential ambiguities and content overlaps
  • Keep the focus on real needs — not assumptions

How I Did It

To build a solid foundation, I drew insights from:

  • The MVP, CJM, Content Audit, and Competitor Analysis
  • 5 top e-commerce platforms: Babyshop, Vinted, Amazon, Asos, Farfetch
  • Real users, sorting real content — across two focused sessions

I split the sorting into two distinct phases to keep things clear and manageable:

  • Product Categories (what’s being sold)
  • Support & Platform Areas (how the system supports users)

What I Learned

Key insights that shaped the outcome 👇

  • A good category system feels natural — most users sorted consistently
  • Some items sparked multiple interpretations — showing where labels could be more precise
  • The closed sorting method was key to keeping focus, especially with high card volume
  • Real people = real clarity: their feedback led to meaningful tweaks in wording and structure

Want to dig deeper in MyFirsThings' Card Sorting?

Check in Figma

Sitemap

HIDDENLINE Sitemap

A Bird’s-Eye View to Build Clarity and Consistency

The Backbone of a Seamless Experience

A well-structured Site Map is like a GPS for design: it provides a clear, organized framework of the entire platform, helping to define how users will navigate, explore, and interact with content.

It’s also a critical step to:

  • Align design and development
  • Uncover gaps or overlaps
  • Optimize usability from the very beginning

My Approach

Based on the insights gathered from:

  • MVP
  • Card Sorting
  • CJM
  • Content Audit
  • Benchmarking

I translated complexity into structure. The result is a logical, scalable hierarchy that reflects user mental models and supports both sections of the platform: New Products & Pre-Owned Products.

What I Learned

Navigation starts here

  • Creating the Site Map gave me a clear vision of how users should flow through the product. It revealed the importance of prioritization, naming conventions, and entry points.

Less is more

  • This exercise reminded me that clarity and simplicity are powerful allies. Every page and connection must serve a purpose.

UX is iterative

  • As I mapped out the structure, I continuously refined and adjusted based on what made the most sense from a user perspective—not just business needs.

Want to dig deeper in MyFirsThings' Sitemap?

Check in Figma

User Flows

HIDDENLINE User Flows

Mapping Minds, Designing Movement

Experience Blueprints

User Flows are more than diagrams—they're experience blueprints. They help visualize the steps users take to complete a task, uncovering pain points and ensuring each journey is:

  • Logical
  • Efficient
  • User-Centered

They bridge the gap between intention and interaction, giving structure to every tap, click, and scroll.

My Approach

I created:

  • 1 General User Flow to outline all possible interactions across the platform
  • 4 Specific User Flows, tailored to the unique needs of our personas:
  • Valeria → Selling on the platform
  • Massimo → Buying a brand-new item
  • Martina → Returning a product due to a sizing issue
  • Paolo → Purchasing secondhand

This approach allowed me to zoom out for strategy, and zoom in for empathy.

What I Learned

Empathy = Efficiency

  • Designing for real people (not abstract users) helped me build flows that reflect real-world behaviors and expectations.

Complexity needs clarity

  • Even the most intricate journeys can become simple if the structure is intuitive. Clarity in flow = clarity in mind

Friction is feedback

  • Mapping these paths revealed small frictions that could derail a user’s journey—insights I wouldn’t have found otherwise

Want to dig deeper in MyFirsThings' User Flows?

Check in Figma

Wireframes

HIDDENLINE Wireframes

Framing the Experience Before Pixels Take Life

From Vision to Layout

Wireframes are the backbone of UX design. They allow us to translate ideas into structure, giving form to flow and clarity to complexity.

Before colors and typography, they answer the most important question: “Does this make sense for the user?”

They help:

  • Define layout & hierarchy
  • Prioritize content & functionality
  • Align stakeholders around navigation & behavior
  • Spot friction before it becomes a problem

My Approach

I crafted over 75 wireframes, covering the full scope of the platform:

  • Search & Discovery
  • Product pages (new & pre-owned)
  • Purchase flows
  • User account area
  • Sales history & product listings
  • Ratings & Reviews
  • Support center, chat & FAQ
  • Onboarding, login & password recovery
  • ...and much more

Every screen was shaped by previous work on the Sitemap and User Flows, creating a seamless translation from strategy to structure.

What I Learned

Every pixel has a purpose

  • Stripping visuals down to structure sharpened my focus on usability, not decoration.

Structure reveals gaps

  • Building the full system exposed overlooked edge cases and navigation inconsistencies—early enough to fix them with ease.

Navigation is design

  • Organizing the wireframes meant constantly walking in users’ shoes. If a journey didn’t feel natural, it wasn’t done yet.

WIREFRAMES MOBILE

Homepage
Cart
Checkout
Sell Item
Personal Account
New Product
Order Confirmation
Search Bar
SERP
Used Product
Menu

WIREFRAMES DESKTOP

Homepage
New Product
Headers
SERP
Cart
Checkout
Footers

Homepage

Cart

Checkout

Personal Account

Search Bar

New Product

Order Confirmation

Sell Item

SERP

Used Product

Menu

Want to dig deeper in MyFirsThings' Wireframes?

Check in Figma

Usability Testing 1

Where Real People Make the Difference

Learning What Truly Works

To validate the structure and usability of my wireframes, I conducted a mobile-based usability test using the interactive Figma prototype with 3 participants — all e-commerce users, with varied family needs and shopping habits

Why Is This Crucial?

Because what seems clear to the designer may not be clear at all to the user. This test allowed me to uncover friction points, unexpected behaviors, and interface blind spots that I couldn’t have spotted on my own.

What We Tested

Each has its strengths:

  • Buying a new baby product
  • Buying a used baby product
  • Tracking an order
  • Adding an item to the wishlist and checking it later
  • Free exploration of the prototype

Key takeaways & Improvements

Here’s what testing revealed and how I addressed it 👇

  • Cart visibility was a common blocker — users added items but got “lost” looking for the cart. I made it easier to find, accessible from more points, and interactive through the popup.
  • Wishlist interactions felt limited — now users can choose which list to save items to via a modal
  • Messaging buttons were ignored due to poor placement and unclear labels — I redesigned their location and wording for clarity.
  • I also added small but impactful tweaks like “Create new list” options and refined visual feedback when switching between new and used products.

Want to dig deeper in MyFirsThings' Usability Testing #1?

Check in Figma
Select 'Visual Design' in the bottom menu
to continue exploring.
Select 'Visual Design' in the bottom menu to continue exploring.

Visual Design

Prototyping

HIDDENLINE Prototyping

Bringing User-Centered Designs to Life

From Visuals to Experience

After designing over 75 detailed mockups, it was time to make them move, react, and guide the user journey. Using Figma, I built high-fidelity interactive prototypes to simulate real user flows — from product search to purchase, from selling an item to managing personal settings.

The Value of Interactive Prototypes

Turning static designs into experiences users can feel and test.

  • They transform static visuals into dynamic experiences
  • They’re essential for usability testing and user validation
  • They help stakeholders, developers, and clients visualize interactions before implementation

Lessons from Prototyping

The first real taste of the product experience.

  • Creating interactive prototypes helped me sharpen my eye for micro-interactions, navigation logic, and accessibility best practices. It also trained me to balance realism and flexibility, crafting flows that feel natural, and intuitive.
  • Prototypes aren’t just clickable mockups — they’re the first real taste of the product experience. Click, explore, feel the journey! Designed to behave like the real thing — almost there!

Explore the Interactive Prototype

Use the top-right icon for fullscreen view

Having trouble viewing the embedded prototype? Click the mockup below to open directly in Figma.

Want to dig deeper in MyFirsThings' Prototypes?

Check in Figma

Mockups

HIDDENLINE Mockups

From Wireframes to a Real Experience

Bringing the Product to Life

From the clean structure of wireframes to a vivid, engaging interface – mockups are where ideas turn into reality!

For MyFirsThings, I designed over 75 screens, covering every page and user flow across the platform:

  • Search and purchase (new and used) 🛍️
  • User area, order history, sales and reviews 👤
  • Product pages and full checkout process 📦
  • Add an item, registration, password recovery
  • Help center, chat, FAQ and much more

The Value of Mockups

Bridging visuals, functionality, and real-world feedback.

  • They show how the product will actually look
  • They help validate visual and functional choices
  • They support usability testing and stakeholder feedback

Beyond Visuals

Every screen contributes to a seamless, branded user journey.

  • This stage taught me how to handle visual complexity on a large scale, ensuring consistency, accessibility, and a smooth, reassuring navigation aligned with the brand identity
  • A comprehensive design journey, where every screen tells part of the ideal user experience. Design that feels as good as it looks
Homepage
Cart
Checkout
Personal Account
User Profile
Sales
Categories
Search Bar
New Product
Order Confirmation
Sell Item
Wishlist
Subcategory
SERP
Used Product
Menu
Orders
Payments
FAQ
Contacts

Homepage

Cart

Checkout

Personal Account

User Profile

Sales

Categories

Search Bar

New Product

Order Confirmation

Sell Item

Wishlist

Subcategory

SERP

Used Product

Menu

Orders

Payments

FAQ

Contacts

Homepage

Cart

Checkout

Personal Account

User Profile

Sales

Categories

Search Bar

New Product

Order Confirmation

Sell Item

Wishlist

Subcategory

SERP

Used Product

Menu

Orders

Payments

FAQ

Contacts

Want to dig deeper in MyFirsThings' Mockups?

Check in Figma

Design System

Design
System

The Building Blocks of Consistency

Design Smart - Reuse Smarter.

A great interface needs more than good looks — it needs structure, consistency, and clarity. That’s where the Design System comes in! It’s the visual toolbox that keeps every screen aligned, every interaction intuitive, and every pixel on-brand

What’s inside?

A well-organized set of reusable components, including:

  • Colors 🎨
  • Typography 🔤
  • Buttons
  • Cards
  • Navigation
  • Inputs ✏️
  • Imagery 🖼️
  • Misc. Elements
  • Icons 🧩
  • Illustrations 🧸

Why it Matters:

Making design faster, clearer, and easier to scale.

  • Ensures visual coherence across all pages
  • Speeds up the design process with ready-to-use elements
  • Bridges the gap between design and development
  • Makes collaboration easier and scaling smoother

Building with a Design System

Designing with systems, scalability, and accessibility in mind.

  • Creating this Design System pushed me to think in systems, not just screens. I learned to design with modularity and scalability in mind, focusing on atomic design principles and accessible patterns. It’s a tool that empowers not just designers — but the whole product team.
  • Because consistency isn't just aesthetic — it’s functional. And a solid Design System is the secret sauce to keeping it all together!

Want to dig deeper in MyFirsThings' Design System?

Check in Figma

Moodboard

HIDDENLINE Moodboard

Where Visuals Meet
Emotion

Setting the Tone

Before diving into colors and components, I crafted a Moodboard to define the emotional atmosphere of MyFirsThings.

The Role of a Moodboard

A Moodboard isn’t just about aesthetics — it’s a strategic foundation that helps align visuals with the brand’s tone, target users, and product values.

What it Conveys

The visual universe I created blends serenity, trust, and joy — the core feelings for a platform dedicated to children and parents.

  • Soft pastel tones of pink, turquoise, and orange create a warm and welcoming vibe
  • Balanced mix of playfulness and practicality
  • Strong focus on comfort, sustainability, and ease of use

The result? A visual guide that feels safe and soothing for little ones, and reliable and modern for their parents.

Want to dig deeper in MyFirsThings' Moodboard?

Check in Figma

Style Guide

HIDDENLINE Style Guide

Building Consistency Across the Product

Designing a Unified Experience

Design without consistency is just decoration. That’s why I created a Style Guide — a visual compass that ensures every element of MyFirsThings speaks the same language, across screens and situations

The Power of Visual Consistency

A solid Style Guide is essential to:

  • Keep visual coherence across the product
  • Speed up the design & development process
  • Make the experience recognizable, intuitive, and trustworthy

Defining the Product’s Visual DNA

Turning brand values into clear, consistent, and usable design elements.

  • Creating this guide helped me master the balance between function and feeling — how to translate brand values into colors, typefaces, buttons, icons, and illustrations that feel uniquely MyFirsThings
  • It’s not just a toolkit — it’s the DNA of the interface: playful, warm, and user-friendly from the very first glance!

Want to dig deeper in MyFirsThings' Style Guide?

Check in Figma
Select 'UX Writing' in the bottom menu
to continue exploring.
Select 'UX Writing' in the bottom menu to continue exploring.

UX Writing

Content Guide

Content
Guide

The Voice Behind
the Product

Designing with Words

Words matter — especially when you're speaking to parents making decisions for their children. That’s why I created a Content Guide that helps MyFirsThings communicate in a voice that’s clear, helpful, and human.

This guide sets the tone for all types of content, from product names to social media captions, ensuring everything we write reflects the brand’s personality: trustworthy, friendly, and easy to understand.

What’s Inside?

Simple language, clear product names, thoughtful use of symbols and acronyms

  • Voice, Tone & Style – Ensuring a consistent and engaging personality across all touchpoints
  • Writing Style – Simple language, clear product names, thoughtful use of symbols and acronyms
  • Pricing & Numbers – Transparent formats for prices, dates, and contact info
  • Formatting Rules – Smart use of bold, italics, and punctuation for better readability
  • Punctuation & Grammar – Rules for clarity, correctness, and readability
  • Social Media – Friendly tone for posts, stories, and private messages that truly connect with users
  • Email – Clear, concise, and approachable messaging for user communications
  • FAQ – Consistent, helpful, and easy-to-understand answers to common questions

Words that Speak the Brand

Ensuring clarity, coherence, and a unified voice across every screen and interaction.

  • A well-crafted content guide helps build consistency, reduce confusion, and strengthen brand identity — across every screen and every word

The Power of Content Guidelines

Ensuring UX speaks clearly, consistently, and on-brand.

  • Creating this guide taught me to think not only as a designer, but as a bridge between UX and communication. It challenged me to align tone, clarity, and accessibility, all while staying on-brand and user-first.
  • Great UX isn’t just about how it looks — it’s also about how it speaks.

Want to dig deeper in MyFirsThings' Content Guide?

Check in Figma

Usability Testing 2

Exploring UX Writing in Testing Round Two

Usability Testing Round #2

After testing the flow and interactions of MyFirsThings, it was time to dive into the details that guide, support, and reassure users: the words.

This second phase of usability testing is focused on UX Writing — from filter labels to FAQs, button text, pop-ups, and contact information. We wanted to assess whether the copy was clear, helpful, and aligned with users’ expectations

Why Does this Matter?

Because great design needs great communication. Even the smoothest interaction can fail if the message isn’t clear or shows up at the wrong time

Using the same mid-to-high fidelity prototype on a mobile device, we ran task-based testing with users already familiar with the platform, ensuring insights were contextual and accurate.

UX Writing Takeaways

Small changes in words can have a big impact on usability and clarity.

  • Clarity counts: A single word like “starting from” created confusion across the board. Small copy changes can make a big impact!
  • Labels = navigation power: Well-structured menus and intuitive button texts helped users move confidently through their journey
  • Pop-ups done right: When clear, complete, and well-timed, they guide rather than interrupt
  • Realistic testing = real learning: Users helped uncover edge cases and hidden gaps — like a missing brand field or icon misinterpretations
  • Consistency pays off: Familiar labels from previous exercises (like Card Sorting) enhanced usability and reduced cognitive load

What I learned

I saw firsthand how the right words improve understanding, reduce friction, and support user confidence. Writing for UX is not about being clever — it’s about being clear, helpful, and human.

Want to dig deeper in MyFirsThings' Usability Testing #2?

Check in Figma

Microcopy

HIDDENLINE Microcopy

The Invisible Hand Behind Smooth User Experiences

Small Text, Strong Impact

In the digital world, even the tiniest words make a big impact. Microcopy is the short text—buttons, error messages, tooltips, labels—that guides users through an interface, offering clarity, building trust, and creating a smoother, more human experience.

What’s it For?

Microcopy is the invisible layer of design that speaks directly to users, turning every click into a clear, confident step forward.

  • Helps users understand what to do at a glance
  • Reduces errors and frustration
  • Makes interactions feel more friendly, simple, and intuitive

For MyFirsThings, I carefully crafted microcopy to:

  • Ensure clear and accessible interfaces
  • Align all messages with the brand’s tone of voice
  • Support users with smart guidance at every step

You’ll find all microcopy examples in the mockups and prototypes, where every word is designed to make parents feel right at home—from the very first click!

Want to dig deeper in MyFirsThings' Microcopy?

Check in Figma