LAURA CAO / SELECTED WORK / RUBY’S DREAM
Ruby’s Dream: Building a Brand and Shopify Store from Scratch
A new cat collar company came to me with a concept and a feeling: whimsical and cozy. I turned that into a brand identity, planned the site structure, designed the pages, built the site in Shopify, and organized its public-facing information so first-time visitors could find answers on their own.
My role
Brand & web designer (freelance)
Platform
Shopify
Scope
Research, brand identity, site structure, wireframes, mockups, Shopify build
Live site
rubysdreamstore.com
Session Growth
Growth in visits to the store
Sessions
Visits during the reporting period
Conversion Rate
Share of sessions that converted
Shopify Analytics, Q1 2026, compared with the previous period.
The process
1 Research
Audience, competitors, market position
2 Brand
Personality, visual directions, logo system
3 Structure
Sitemap and low-fidelity wireframes
4 Design
High-fidelity page mockups
5 Build
Shopify pages and public-facing content
6 Review
Accessibility, analytics, iteration
02 / UNDERSTANDING THE OPPORTUNITY
The Brief & Research
A playful brand. A practical shopping journey.
The brief: bring a new cat-collar brand to life and translate its whimsical, cozy personality into a Shopify store that makes products, care information, and the brand story easy to find.
WORKING PERSONA · TO VALIDATE
A design-conscious cat owner looking for a soft, distinctive accessory. They want to understand fit, materials, and safety before buying—and enjoy a brand with a little personality.
Key questions: Will it fit? Is it comfortable? How do I clean it? When will it arrive?
Competitor Analysis
Compare mass-market accessories on price and breadth; compare independent makers on originality, materials, and storytelling. Ruby’s Dream’s visible differentiator is its food-inspired plush design.
Analysis framework—not a completed competitor study.
Market Position
Product / Plush & playful
Tone / Warm & curious
Story / Ruby’s dream world
Trust / Care & fit clarity
03 / A WORLD, NOT JUST A LOGO
Turning “Whimsical and Cozy” into a Visual System
Whimsical
Cozy
Curious
Friendly
The dream starts with Ruby.
The live brand story casts Ruby the cat as its CEO and muse. Food-inspired collars become little pieces of her dream world, with cloud textures, soft colors, and playful language carrying that story across the store.
The visual system pairs expressive logo lettering with rounded shapes and a calm pastel backdrop. Strong outlines and clear product information bring structure to the softness.
Sky
Cream
Lavender
Primary wordmark
Illustrated logo lockup
Mark variations
Original artwork to be added
Social profile application
Original screenshot to be added
04 / MAKING THE JOURNEY SIMPLE
Site Structure & Wireframes
Home
Shop All
Product details
Meet the Team
FAQ
Cart & Checkout
Content map based on the live store. Original planning files have not yet been supplied.
Original Home wireframe to be added
Home
Introduce the world and product promise.
Bring the collection and social proof into view.
Original Product wireframe to be added
Product Page
Keep imagery, price, and purchase controls together.
Group care and delivery details into accordions.
Original FAQ wireframe to be added
FAQ
Separate collar care from shipping and returns.
Use question-led headings for quick scanning.
05 / FROM SOFT IDEAS TO REAL SCREENS
High-Fidelity Mockups
The brand world comes together across the homepage, team story, and FAQ. These are original live-store captures; pre-build design files can replace them when supplied.
Homepage Hero / A clear product promise inside Ruby’s dream world
Meet the Team / Personality makes the story memorable
FAQ / A practical destination, still unmistakably Ruby
06 / MAKING THE DREAM WORK
Shopify Build & Content Strategy
LIVE STORE / THE COFFEE COLLAR
Customer reviews on the live page add reassurance alongside product details. Care, cleaning, and shipping information are grouped into expandable accordions.
Explore the live product page
What Changed Between Mockup and Build
Draft comparison: design intentions need confirmation against the original mockups. The build column reflects visible live-store features.
Mockup intention
Visible in the build
Keep product detail concise
Care, cleaning, and policies in accordions
Make trust signals easy to find
Ratings near the title; detailed reviews below
Reduce the path to purchase
Quantity, cart, and Shop Pay controls together
Separate story from support content
Dedicated Team and FAQ pages
Visible feature highlights
Product details that answer fit, material, and care questions
Customer reviews and imagery that support confidence
Question-led support content with distinct topic groups
07 / A WELCOMING EXPERIENCE FOR MORE PEOPLE
Checking Against WCAG 2.1 AA Standards
Accessibility is a review process, not a visual style. This checklist records the checks and next actions; it does not claim WCAG compliance. Statuses stay pending until a documented audit is supplied.
Skip links / 2.4.1
Pending test
Verify a focus-visible skip link moves keyboard users to the main content.
Page structure / 1.3.1
Pending test
Inspect landmarks, heading order, labels, and accordion semantics with assistive technology.
Alt text / 1.1.1
Pending audit
Describe meaningful product images; keep purely decorative clouds silent to screen readers.
Color contrast / 1.4.3
Pending test
Measure 4.5:1 for normal text and 3:1 for large text; also test focus and control visibility.
Keyboard use / 2.1.1
Pending test
Test menus, cart, forms, and accordions using Tab, Enter, Space, and Escape without a mouse.
08 / BEYOND THE STOREFRONT
Multi-Channel Branding & Impact
One little world. Many ways in.
The live store connects to Instagram, Pinterest, and TikTok. A shared voice, recognizable logo, and consistent visual cues help the brand feel like the same world at every touchpoint.
BRAND MESSAGING / FROM THE LIVE STORE
“Plush Cat Collars with a yummy twist!”
Lead with personality. Follow with clear, useful information. Keep the product promise recognizable across channels.
How This Applies to Public Sector Communications
Transferable skills and intended outcomes—not results from a public-sector engagement.
Design duty
Public-sector application
Audience research
Understand resident needs and barriers to accessing services.
Brand systems
Build recognition and consistency across departments and channels.
Information architecture
Help people find policies, forms, and next steps with less effort.
Content strategy
Explain complex processes in clear, question-led, actionable language.
Accessibility review
Identify barriers for keyboard and assistive-technology users.
Performance measurement
Use evidence to improve task completion and public information journeys.