CanD Design Internship
Shaping reusable screen templates and first consumer app features
At CanD, I restructured the company’s design system by rebuilding screen templates, migrating them from Sketch to Figma with auto-layout and variables for scalability. I then applied this system to design the onboarding flow and team/player follow interactions for CanD’s first consumer app, a soccer fan community platform.
My Role
Product designer
Skills
Design System
Interaction Design
Information Architecture
Product Design (UX/UI) Design
Prototyping
Timeline
Sep-Nov 2024
Team
1 Design Lead, 1 Product Designer (me)
Context
CanD is an ecosystem of modular no-code tools that enables clients to quickly build and scale SaaS platforms. Its building blocks cover community, monetization, Web3, and gamification, powering both client apps and CanD’s own in-house products.
My Role
• 3-month design internship (sole design intern)
• Rebuilt and organized screen templates in Figma for the design system
• Applied the system to design onboarding and team/player follow flows for CanD’s first consumer app (soccer fan platform)
My work naturally split into two phases:
Part 1: Rebuilding screen templates for the design system
Problem
A broken system can’t scale
When CanD migrated its design system from Sketch to Figma, the screen templates (onboarding, navigation, channels, etc.) came across broken and inconsistent. Layouts lacked auto-layout, components weren’t properly nested, and variables weren’t set up, which made the templates hard to reuse or adapt for client apps.
As a result, the system was:
• Inconsistent: different templates used mismatched structures and spacing.
• Hard to scale: every new client app required manual fixes and tweaks.
• Inefficient — designers couldn’t quickly assemble flows from the templates.
📝 Design note: What are screen templates?
Screen templates are pre-assembled screens built from reusable components and patterns. They sit above buttons and cards, but below full app pages in a design system hierarchy.
(Atoms → Molecules → Organisms → Templates → Pages)
Action
To restore consistency and make the system scalable, I:
• Rebuilt key screen templates in Figma that had broken during the Sketch → Figma migration, making them responsive and consistently spaced with auto-layout.
• Created a variable structure and naming system, then applied it to the rebuilt templates for clarity and consistency.
• Organized templates around variable groups, so designers could easily find, swap, and reuse assets.
• Documented the new structure, ensuring the system could be maintained and extended in future projects.
Impact
• Reduced design time by enabling faster assembly of flows.
• Improved designer–engineer handoff with standardized files.
• Created a scalable system through variables and auto-layout.
• Provided the foundation for CanD’s first consumer app.
Part 2: Applying the system: soccer fan app design
Context
11+ is a global soccer fan community platform where fans can follow teams and players, cheer together during live matches, and connect across languages and regions. Built on CanD’s modular system, it combines live interaction, discussion, and gamified rewards to bring fans closer to the game.
Constraints
• Tight timeline: my features needed to be designed and implemented quickly.
• Strict system use: I was required to rely only on the existing design system, especially the screen templates, to speed up development.
• League-specific scope: the initial launch was planned for the Premier League, so designs were limited to those 20 teams.
Problem
Within these constraints, the challenge was to design team and player follow interactions that were simple enough to build quickly, yet scalable enough to support future leagues and hundreds of players.
Action
I explored multiple directions for the team list and player list, aiming for scalability but balancing against engineering constraints.
Team List
Included search, sort, and region-based filters to prepare for expansion beyond the Premier League.
Before
A single-page design that highlighted My Team with a distinct card and placed followed teams above unfollowed ones using a clear divider.
After
Trade-off: For launch, engineers confirmed these features weren’t needed and would slow delivery. I shifted to a single-page list, highlighting My Team with a distinct card and separating followed vs. unfollowed teams using a divider; still scalable, but faster to implement.
Player List
Supported search, filters by position and team (with logos), and prioritized “favorite teams” at the top for faster access.
Before
Simplified bottom sheet with two filter groups (Position and Team) shown as chips, plus a dedicated “star” filter for followed players.
After
Trade-off: The system didn’t support logos or custom avatar styles, and search could only query names. I simplified to a bottom sheet filter with two groups (Position and Team), used standard rectangular avatars from the system, and added a “star” filter to surface followed players.
Impact
• Delivered lightweight flows under tight deadlines.
• Built scalable structures to support future leagues.
• Improved clarity and ease of use for fans.
• Strengthened design–engineering collaboration.
What I learned
This project taught me that technical constraints don’t always weaken design; they can sharpen it. By adapting my concepts to system limits, I created flows that were simpler, faster to implement, and still scalable for the future. I learned the importance of balancing ambition with practicality, and how strong collaboration with engineers leads to better outcomes.
I’m looking for new opportunities where I can learn, grow, and work alongside thoughtful people. If you’re interested, or just curious to hear more about this project, I’d love to chat! :)
Next Project
Prosights Excel Add-in
Sole designer at an AI B2B startup, rethinking how finance teams work in Excel