🎨 UI/UX Designer SOP
Premium Design, Brand Styling & Conversion Optimization
The $50,000 Difference in Design
Two Stores, Same Products, Wildly Different Results
Two skincare brands launched in the same month. Same products. Same prices. Same marketing budget.
Store A: Basic template, default fonts, stock images, cluttered layout. Looked like every other store.
Store B: Custom color palette, premium typography, lifestyle photography, generous whitespace, trust badges strategically placed.
Results after 30 days:
- Store A: 0.8% conversion rate, $2,50,000 revenue
- Store B: 3.2% conversion rate, $10,50,000 revenue
The ONLY difference? Design quality. Same traffic turned into 4x more revenue.
🎨 THE 5 LAWS OF PREMIUM DESIGN
1. WHITESPACE = LUXURY
Crowded = cheap. Breathing room = premium. When in doubt, add more space.
2. CONSISTENCY IS KING
Same fonts, same colors, same button styles, same spacing — EVERYWHERE. Inconsistency = amateur.
3. HIERARCHY GUIDES THE EYE
Most important = biggest and first. Guide users to what matters. Don't make them think.
4. MOBILE FIRST, ALWAYS
70% of traffic is mobile. Design for 375px width FIRST, then scale up to desktop.
5. DESIGN FOR CONVERSION, NOT AWARDS
A beautiful store that doesn't sell is a failure. Every design decision should answer: "Will this help visitors buy?"
🎨 CREATIVE OWNERSHIP & QUALITY STANDARDS
✅ You Own Your Work 100%
You are 100% responsible for the quality of your designs:
- Colors — Your choice, your responsibility
- Typography — Your choice, your responsibility
- Layouts — Your choice, your responsibility
- Imagery — Your choice, your responsibility
- Overall aesthetic — Your choice, your responsibility
Goal: OVERDELIVER — exceed expectations, don't just meet them.
⚠️ Zero Tolerance Policy
After 15 days of onboarding: ONE careless mistake on a live design = potential removal from client work.
- No typos in hero text
- No broken images
- No misaligned elements
- No inconsistent spacing
- Check your work 10x before delivery
👥 Peer Review Process
Before major deliveries, get another designer to review:
- Fresh eyes catch what you missed
- Share design feedback across team
- Two designers are better than one
What Makes Design "Premium"
❌ Cheap / Amateur Design
- Crowded layouts with no breathing room
- Inconsistent fonts (3+ font families)
- Bright, clashing colors
- Stock images that look generic
- Tiny text that's hard to read
- Buttons that look like 2005
- No visual hierarchy
✅ Premium Design
- Generous whitespace between elements
- 2 font families maximum (heading + body)
- Curated, harmonious color palette
- High-quality lifestyle/product imagery
- Readable text (16px+ body minimum)
- Modern buttons with hover states
- Clear visual hierarchy
The Client Who Wanted "MORE"
A client once insisted on adding more elements to their homepage: more colors, more animations, more sections, more products. "The more content, the better!" they said.
We explained: More isn't better. Clarity is better.
They insisted. We compromised. The cluttered design launched.
Result: 0.9% conversion rate. Visitors couldn't find what they wanted. Too many choices = no choice.
We redesigned with half the elements, double the whitespace. Conversion jumped to 2.8%.
Brand Styling Process
Step 1: Gather Brand Assets
| Asset | What to Request | If Not Provided |
|---|---|---|
| Logo | PNG with transparency, SVG if available | Flag to PM — cannot proceed without logo |
| Brand Colors | Hex codes for primary, secondary, accent | Extract from logo or create complementary palette |
| Fonts | Font names or brand guidelines | Suggest Google Fonts based on brand vibe |
| Reference Stores | 3 stores they love (and why) | Ask what "vibe" they want (minimal, bold, playful) |
| Product Images | High-res, consistent style, lifestyle shots | Use best available, recommend AI enhancement |
Step 2: Create Color Scheme
🎨 Color Psychology in E-commerce
- Black/White/Gold: Luxury, premium, high-end products
- Blue: Trust, reliability, technology, healthcare
- Green: Natural, organic, wellness, sustainability
- Pink/Purple: Beauty, feminine, creative, wellness
- Orange/Red: Energy, urgency, sales, food
Standard Color Structure
| Color Role | Usage | Example |
|---|---|---|
| Primary | Buttons, links, key CTAs | #1E3A5F (Deep blue) |
| Secondary | Accents, hover states, secondary buttons | #3D6B99 (Lighter blue) |
| Background | Page background, cards | #FFFFFF or #F8F9FA |
| Text | Body text, headings | #212529 (Not pure black) |
| Muted | Borders, dividers, disabled states | #E0E0E0 |
Typography System
🔤 The 2-Font Rule
Maximum 2 font families per store. More = amateur, slower load times, visual chaos.
Formula: 1 distinctive heading font + 1 clean body font
Recommended Font Pairings
Font Size Hierarchy
| Element | Desktop | Mobile |
|---|---|---|
| H1 (Hero) | 48-64px | 32-40px |
| H2 (Section) | 32-40px | 24-28px |
| H3 (Subsection) | 24-28px | 20-22px |
| Body Text | 16-18px | 16px (never smaller!) |
| Small/Caption | 14px | 14px |
Layout & Spacing
📐 The Spacing Multiplier System
Use multiples of 8 for all spacing: 8px, 16px, 24px, 32px, 48px, 64px
This creates visual rhythm and consistency.
Section Spacing Guidelines
| Spacing Type | Desktop | Mobile |
|---|---|---|
| Between Sections | 80-120px | 48-64px |
| Between Elements in Section | 24-32px | 16-24px |
| Card Padding | 24-32px | 16-20px |
| Button Padding | 16px 32px | 14px 24px |
Container Widths
- Max content width: 1200-1400px
- Text max-width: 65-75 characters per line (readable)
- Card grids: 3-4 columns desktop, 2 tablet, 1 mobile
- Product grids: 4-5 columns desktop, 2-3 tablet, 2 mobile
Trust Elements Design
🛡️ Trust = Conversions
Visitors need to feel SAFE before buying. Trust elements reduce friction and increase confidence.
Essential Trust Elements
🚚 Free Shipping Badge
Location: Trust bar below hero, product page near ATC
Design: Simple icon + text, match brand colors
Copy: "Free Shipping Over $50" or "Free Express Shipping"
↩️ Easy Returns Badge
Location: Trust bar, product page, footer
Design: Return arrow icon + clear text
Copy: "30-Day Easy Returns" or "Hassle-Free Returns"
🔒 Secure Payment Badge
Location: Near checkout button, footer
Design: Lock icon + payment logos
Copy: "Secure Checkout" + Visa/MC/PayPal icons
⭐ Customer Reviews
Location: Homepage section, product pages
Design: Star ratings, customer photos, verified badge
Best Practice: Show real reviews with faces if possible
Trust Bar Example
🚚 Free Shipping Over $50 | ↩️ Easy 30-Day Returns | 🔒 Secure Payment | ⭐ 4.9/5 Customer Rating
Mobile-First Design
🚨 70% OF TRAFFIC IS MOBILE
If mobile isn't perfect, you're losing 70% of potential sales. Mobile isn't an afterthought — it's the PRIMARY experience.
Mobile Design Checklist
👆 Touch Targets
- Button minimum: 44px × 44px
- Link spacing: 8px+ between links
- Form inputs: 48px height minimum
- Tap areas don't overlap
📱 Layout
- Single column for text content
- 2-column max for product grids
- Full-width CTAs
- No horizontal scrolling
🛒 Sticky Add to Cart
- Fixed at bottom on scroll
- Price + Add to Cart visible
- Variant selector if needed
- Doesn't block content
🔤 Typography
- Body text: 16px minimum
- Line height: 1.5-1.7
- Proper heading scale
- Readable without zooming
Design QA Checklist
🎨 Visual Consistency
- Same fonts throughout
- Brand colors applied correctly
- Consistent button styles
- Uniform spacing
- Aligned elements
📸 Images
- No pixelation
- Consistent aspect ratios
- Proper alt text
- Compressed for speed
- No broken images
📱 Responsive
- Tested on real iPhone
- Tested on real Android
- Tablet looks good
- No horizontal scroll
- Touch targets 44px+
✨ Polish
- Hover states work
- Smooth transitions
- No placeholder content
- No Lorem Ipsum
- Favicon set
Using ChatGPT for Design
📚 ChatGPT Prompts for Designers
- "Suggest a color palette for a luxury skincare brand"
- "What are the current ecommerce design trends for 2024?"
- "What font pairings work well for fashion ecommerce?"
- "How can I make this homepage more conversion-focused?"
- "What trust elements should every product page have?"
- "Critique this design for mobile usability: [describe layout]"
- "What makes Apple's design feel premium?"
🎯 Daily Learning
- Analyze 1 top Shopify store daily — note what makes it work
- Practice creating color palettes from brand logos
- Learn color theory: complementary, analogous, triadic
- Study conversion psychology: why users click/buy
Designer KPIs
Essential Design Tools
📌 Master Your Toolkit
These are the core tools every Digital Heroes designer should know inside out.
| Tool | Purpose | When to Use |
|---|---|---|
| Figma | UI design, mockups, prototypes | Full page mockups, client presentations, design systems |
| Canva | Quick graphics, banners, social | Fast hero images, announcement banners, quick edits |
| Shopify Theme Editor | Live store design | All theme customizations, section editing, colors/fonts |
| Coolors.co | Color palette generation | Creating harmonious color schemes from brand colors |
| Google Fonts | Typography selection | Finding font pairings, checking web availability |
| Remove.bg / PhotoRoom | Background removal | Product photos, creating transparent PNGs |
| TinyPNG | Image compression | Optimizing all images before upload |
| Unsplash / Pexels | Stock photography | Lifestyle images, placeholders (when client has none) |
📋 Daily Design Workflow
Check Slack for new projects → Review client briefs → Gather assets
Design work → Create mockups → Apply to Shopify theme
Review on mobile → Optimize images → Send previews for feedback
Respond to revision requests → Update progress in Slack → Prepare for next day
✅ Before Sending Any Design for Review:
- Viewed on mobile at 375px width?
- All images compressed and optimized?
- Colors consistent throughout?
- Typography is readable (16px+ body)?
- No spelling errors in visible text?
- Preview link tested and working?
Color Theory for Ecommerce
Color Psychology by Industry
| Niche | Primary Colors | Emotion/Goal | Example Brands |
|---|---|---|---|
| Luxury/Premium | Black, Gold, Deep Purple | Exclusivity, Sophistication | Chanel, Rolex |
| Health/Wellness | Green, White, Earth Tones | Natural, Trust, Calm | Whole Foods, Goop |
| Tech/Gadgets | Blue, Silver, Black | Innovation, Trust | Apple, Samsung |
| Fashion | Black, White, Bold Accent | Trendy, Statement | Nike, Zara |
| Kids/Toys | Bright Primary Colors | Fun, Energy, Joy | LEGO, Fisher-Price |
| Food/Beverage | Red, Orange, Yellow | Appetite, Warmth | McDonald's, Coca-Cola |
The 60-30-10 Rule
🎯 Perfect Color Balance Every Time
- 60% - Dominant Color: Background, large sections (usually neutral/light)
- 30% - Secondary Color: Headers, cards, navigation (brand color)
- 10% - Accent Color: CTAs, buttons, highlights (contrasting/pop)
Contrast for Conversions
✅ High Contrast CTAs
- Add to Cart should POP
- Use brand's boldest color
- Ensure 4.5:1 contrast ratio
- White or dark text (test both)
❌ Low Contrast Mistakes
- Gray text on gray background
- Light green on white
- Blue links on blue headers
- Yellow text on white
Troubleshooting Common Issues
Client Feedback Handling
| Client Says | They Actually Mean | Your Action |
|---|---|---|
| "It doesn't pop" | Needs more contrast or color vibrancy | Increase saturation, add bold accent, check contrast ratios |
| "It looks too busy" | Too many elements competing for attention | Add white space, reduce colors, simplify sections |
| "It feels cheap" | Lacks premium visual cues | Add spacing, upgrade typography, use high-quality images |
| "Make the logo bigger" | They want more brand presence | Keep logo appropriate size, add brand colors/elements elsewhere |
| "I don't like it" | Need to dig deeper for specifics | Ask: "What specifically feels off? Colors? Layout? Images?" |
Common Design Problems & Fixes
⚠️ Problem: Store Looks "Template-y"
Cause: Default theme settings, stock photos, generic fonts
Fix:
- Customize every section with brand colors
- Use unique typography pairings
- Replace stock photos with brand imagery
- Add custom icons and micro-animations
⚠️ Problem: Mobile Layout Broken
Cause: Fixed widths, large images, non-responsive elements
Fix:
- Test on real devices, not just browser resize
- Use percentage widths, not pixels
- Ensure images have max-width: 100%
- Test touch targets are 44px minimum
⚠️ Problem: Images Look Blurry
Cause: Low resolution source, improper sizing
Fix:
- Request 2x resolution from client (2000px for 1000px display)
- Use Shopify's image_url with proper sizing
- Avoid upscaling small images
- Use WebP format for better quality at smaller file size
When to Push Back on Client
🚨 Politely Push Back If Client Wants:
- Neon colors on white background — Hurts readability, looks unprofessional
- Auto-playing music — Instant bounce, never do this
- Flashing/blinking elements — 1998 called, they want their GeoCities back
- Tiny fonts (<14px) — Accessibility issue, loses customers
- 50+ different colors — No brand consistency
Script: "I understand you want that, but our experience shows it can actually hurt conversions. Here's a better alternative that achieves the same goal..."
ChatGPT Prompts for Designers
💡 Use AI to Speed Up Your Design Process
Use these prompts to get inspiration, generate copy, and solve design problems faster.
Design Inspiration & Direction
I'm designing a Shopify store for:
Industry: [e.g., fashion, skincare, tech]
Target audience: [e.g., women 25-35, luxury buyers]
Brand vibe: [e.g., minimalist, bold, playful]
Competitor examples: [List 1-2 competitors]
Give me:
1. Color palette suggestion (primary, secondary, accent)
2. Font pairing recommendation
3. Layout style (minimal grid, bold asymmetric, etc.)
4. Hero section approach
5. Trust elements I should include
The client shared these reference websites: [List URLs]
Analyze what they like about them:
1. What design elements are common across all references?
2. What color schemes and typography are they using?
3. What layout patterns do they follow?
4. What should I adopt and what should I improve on?
5. Create a design brief based on these references
UX & Conversion
I'm designing a [homepage / product page / collection page] for a Shopify store.
My current design includes:
- [Describe hero section]
- [Describe navigation]
- [Describe product display]
- [Describe CTA placement]
Review for conversion optimization:
1. Is there a clear visual hierarchy?
2. Are CTAs prominent and above the fold?
3. What trust elements are missing?
4. What might cause friction or confusion?
5. What would increase conversions?
I need microcopy for a [store type] Shopify store.
Brand voice: [Describe tone - friendly/luxurious/playful]
Write the following:
1. Hero headline (under 10 words)
2. Hero subheadline (1-2 sentences)
3. CTA button text (2-4 words)
4. Collection titles (5 options)
5. Trust bar phrases (3 short benefits)
6. Footer tagline
Client Communication
My client wants: [What they asked for]
I designed: [What you actually did instead]
Reason: [Why your approach is better for conversions]
Write a professional message that:
1. Acknowledges their request
2. Explains why my design choice is better
3. Uses data/psychology to back it up
4. Offers to discuss if they still prefer their way
5. Keeps them feeling heard
✅ Pro Tips for Designer ChatGPT Use
- Share Figma frames — Describe or screenshot your layout for feedback
- Build a prompt library — Save prompts that work well for reuse
- Get copywriting help — Let AI draft headlines while you focus on visuals
- Accessibility checks — Ask ChatGPT to review color contrast and readability
- Client pitch prep — Generate talking points for design presentations
Figma Workflow & Organization
💡 Consistent File Structure = Faster Handoffs
Follow this structure for every project. It helps developers find assets and helps you find old work.
Figma File Structure
| Page Name | Contents | Who Uses It |
|---|---|---|
| 📋 Cover | Project name, status, date, thumbnail | Everyone (first impression) |
| 📌 Moodboard | Reference screenshots, inspiration, client examples | Client approval |
| 🎨 Style Guide | Colors, fonts, spacing, component library | Developer handoff |
| 🏠 Desktop | All desktop page designs | Client review, Developer |
| 📱 Mobile | All mobile page designs | Client review, Developer |
| 🗑️ Archive | Old versions, rejected concepts | Internal only |
Naming Conventions
- Frames: Page-Section (e.g., "Home-Hero", "Product-Gallery")
- Components: Type/Name (e.g., "Button/Primary", "Card/Product")
- Groups: Descriptive (e.g., "Trust Badges", "Navigation Items")
- Images: What it is (e.g., "Hero Background", "Product 1")
🚨 Never Name Layers:
- "Frame 432" or "Rectangle 17"
- "Untitled" or "Copy"
- "Final-v2-FINAL-revised"
Design Review Checklist
Before Sharing with Client
| Category | Check | Why It Matters |
|---|---|---|
| Visual | Colors match brand guidelines? | Brand consistency |
| Visual | Fonts are consistent throughout? | Professional look |
| Visual | Spacing is even and aligned? | Clean, polished feel |
| UX | CTAs are visible and above fold? | Conversion optimization |
| UX | Mobile version makes sense? | 60%+ traffic is mobile |
| UX | Trust elements included? | Reduces purchase anxiety |
| Technical | Images are high quality? | Shows as intended |
| Technical | No placeholder text remaining? | Looks complete |
Client Presentation Tips
✅ When Presenting Designs
- Start with context: "Based on your brief, here's what I designed..."
- Explain decisions: "I chose this layout because..."
- Show mobile first: Most clients forget to check mobile
- Ask specific questions: "Does this header feel right?" not "What do you think?"
- Document feedback: Write it down during the call, send summary after
⚠️ When Client Asks for Changes You Disagree With
Script: "I understand you want [their request]. I'd like to suggest [your alternative] because [reason based on conversions/UX]. Would you like to see a mockup of both options so we can compare?"
This lets you push back professionally while keeping them in control.
Handling Difficult Situations
🔴 Client Says "I'll Know It When I See It"
🎯 Task Priority Order (What Comes First)
Handle in this order every day:
- 🔴 P0 - Revision Requests from Clients → Active projects waiting on your changes.
- 🔴 P0 - Deadline-Day Deliveries → Designs due TODAY must be completed.
- 🔴 P0 - PM/Client Questions → Respond within 1 hour. Don't block decisions.
- 🟡 P1 - Active Design Work → Projects with deadlines in next 2-3 days.
- 🟡 P1 - Asset Preparation → Export finals, organize files for developers.
- 🟢 P2 - Design System Updates → Component library, style guide maintenance.
- 🟢 P2 - Mockup Refinements → Polishing work that's not urgent.
- ⚪ P3 - Inspiration & Learning → Dribbble, tutorials, skill development.
Golden Rule: Client-facing revisions > Deadlines > New designs > Personal growth.
🔴 Client Says "I'll Know It When I See It"
Situation: Client can't articulate what they want, expects you to read their mind.
Response: "Let me show you 3 different directions. Please point to elements you like in each one. This will help me understand your vision."
Rule: Always use mood boards and examples. Never design blind.
🔴 Client Wants to Use Their Own "Design"
Situation: Client provides a terrible sketch/mockup and wants you to implement it exactly.
Response: "Thank you for sharing your vision! I love [specific element]. I'd like to suggest some enhancements that will improve [conversion/usability/mobile experience]. Can I show you some options?"
Rule: Educate gently, but document if they insist on bad design.
🔴 Too Many Cooks (Multiple Stakeholders)
Situation: Client has partner/spouse/friend all giving conflicting feedback.
Response: "I'm receiving different feedback from multiple people. Could you consolidate into one unified feedback document? This ensures we stay on timeline."
Rule: One point of contact for design feedback. Escalate to PM if chaos continues.
🔴 Client Wants Design That Won't Convert
Situation: Client insists on busy design, hidden CTAs, or poor UX choices.
Response: "I want to share some data: [stat about conversion]. Your current request may impact sales negatively. I recommend [alternative]. Would you like me to show you how?"
Rule: Advise with data. If they insist, document your recommendation.
🔴 Endless Revision Requests
Situation: Client keeps asking for "just one more tweak" beyond revision rounds.
Response: Route through PM: "We've completed the included revisions. I'll check with the PM about options for additional design work."
Rule: Track revisions. Additional rounds = additional quote.
🔴 Client Disapproves of Everything
Situation: Nothing you show is ever right. Client always negative.
Response: "Help me understand: What specific elements aren't working? Can you show me examples of designs you love?" If continues, escalate to PM.
Rule: Get specifics. Vague criticism = no actionable feedback.
🔴 Client Wants Free Design Concepts Before Ordering
Situation: Prospect asks "Can you show me what you'd design first?"
Response: Route to Sales: "We don't create custom designs before project confirmation. Our portfolio demonstrates our quality. Once you order, you'll receive dedicated design concepts."
Rule: Never do spec work. Our portfolio speaks for itself.
🔴 Assets Provided Are Low Quality
Situation: Client sends blurry images, screenshots, or low-res logos.
Response: "To achieve premium results, I need high-resolution assets: Logo in SVG/PNG (transparent), photos min 2000px wide. Current assets will look pixelated on the final design."
Rule: Don't compromise quality. Request proper assets before proceeding.
Your Daily Inspiration
"Design is not just what it looks like. Design is how it works. And how it CONVERTS."
— Inspired by Steve Jobs
📖 Success Story: The Button That Made $10,000
A client's "Add to Cart" button was the same color as the background — barely visible. Our
designer
made ONE change: a high-contrast, bold button with subtle animation.
The result? Conversion rate jumped from 1.2% to 2.8%
overnight. That single button change generated an extra $10,000
in
revenue that month.
The lesson: Every pixel matters. The smallest design decision can have massive business
impact.
⚡ Productivity Hacks for Designers
- 🎯 2-Minute Rule: If a design task takes less than 2 minutes, do it now
- 📁 Template Everything: Save time with reusable Figma components
- 🔄 Batch Similar Tasks: Do all wireframes, then all mockups, then all exports
- ⏰ 90-Minute Blocks: Deep design work in focused 90-min sessions, then break
- 🚫 No Notifications: Turn off Slack during creative work
"Simplicity is the ultimate sophistication."
"Good design is good business."
"Design for the user, not for your portfolio."
🌅 Start Each Day With This:
"Today, I create experiences that delight users and drive business results. Every design decision is intentional."