1. Problem Definition & Discovery
Goal:
Empower Discord server owners to bring Medal’s clipping experience into their community without friction.
Primary Challenges Identified:
Users weren’t aware of the bot’s value or existence.
Medal’s clip-sharing flow needed to feel native to Discord (non-intrusive, effortless).
Clear education needed for setup, which is inherently multi-step (connect, add, configure, share).
Page had to drive 2 CTAs:
Download Medal
Add Bot to Discord
Research Inputs:
Internal Medal UX patterns (mobile/web parity focus)
Discord ecosystem heuristics (bot onboarding expectations, verified badge trust factor)
Competitor analysis (MEE6, Dyno, Soundboard bots for onboarding clarity)
Discord bot UX limitations (permissions, roles, channel control needs)
2. UX Strategy & Information Architecture
Key Strategic Decisions:
3. Wireframing & Mid-Fidelity Prototyping
LOFI Output:
Blocked out functional areas.
Prioritized clarity of actions over visual design.
Validated rough content structure: Hero → Flow Overview → Setup Steps → Customization → CTA.
MIDFI Output:
Began testing real content voice and tone.
Established visual rhythm between dark/light sections for scannability.
Sketched iconography and button styles aligned with Medal’s playful brand (but restrained enough for Discord's context).
4. HIFI Execution & Design System Application
Visual Design Principles Used:
Medal brand identity elements (icons, buttons, gradients).
Discord-specific cues (verified badge, UI toggles, card layouts).
Playful but non-chaotic hierarchy — information is scannable but has personality.
Micro-copy that feels casual but directive ("send it", "dial it in", "let everyone join in").
Desktop vs Mobile Considerations:
5. Iteration & Polish
Key Iterations:
Added “CLIPS” sticker treatment to headline for playfulness without hurting readability.
Leveraged floating game genre icons in HIFI for visual engagement without noise.
Used game screenshot mockup to ground the product in reality — shows outcome not just function.
Reinforced server empowerment theme with toggle switches for configuration options.
6. Final Solution Outcomes
UX Goals Achieved:
Communicates value proposition instantly.
Guides users through what could feel like a complex process.
Feels like a natural extension of both Medal and Discord ecosystems.
CTA-driven with high clarity and approachable vibe.
0 likes · 7 views · May 5, 2025
Designed UX for Medal's Discord bot integration, enhancing user onboarding and engagement.
Timeline
Mar 1, 2025 - Mar 22, 2025
