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 design intern
Skills
Design System
Interaction Design
Information Architecture
Product Design (UX/UI) Design
Prototyping
Timeline
Sep-Nov 2024 (3 months)
Team
1 PM, 2 Engineers, 1 Design Lead, 1 Product Design intern (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 screen templates using consistent layout structures and spacing rules.
• Refined auto layout behaviors to ensure adaptability across content types and screen widths.
• After validating the layouts, converted templates into components and variants for reuse across modules.
• Organized templates and components into a unified design system library to streamline future updates and handoff.
Impact
• Reduced design time by enabling faster assembly of flows.
• Improved designer–engineer handoff with standardized files.
• Created a scalable system through variants 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 the onboarding, team and player follow interactions that were simple enough to build quickly, yet scalable enough to support future leagues and hundreds of players.
Onboarding flow
Trade-off: I wanted to begin onboarding with team selection to create immediate engagement, but we had to follow the existing module’s step order due to engineering constraints. I also couldn’t explore avatar concepts further within the timeline, but I successfully pushed for including team logos in the selection stage, which engineers implemented despite initial limitations.
Explored ideas: Concepts I explored with the team to enhance the user experience, reserved for future iterations due to limited time.
Final: Username → Select team(community)→ Select profile photo/avatar
Designing Team & Player List screens
I explored multiple directions for the team list and player list, aiming for scalability but balancing against engineering constraints.
Team List
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.
Iteration: Added search, sort, and region-based filters to support future expansion beyond the Premier League.
Final: Simplified to a single-page layout that highlights My Team with a distinct card and organizes followed and unfollowed teams with a divider.
Player List
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.
Iteration 1: Designed round avatars with team badges and colored borders, position chips, and search functionality + Added a bottom sheet for team filtering (with a search bar and “favorite teams” section) and a dedicated “star” filter for followed players.
Iteration 2: Adjusted to system constraints; replaced custom avatars with standard rectangular avatars and removed the bottom-sheet search bar
Iteration 3: Improved usability by replacing the long horizontal position chip list (ST, LW, etc.) with 2 different bottom sheets for team and position + explored different patterns for the position bottom sheet.
Final: Simplified filters by replacing team logos with chips (since images weren’t supported in bottom sheets) and unified the Position and Team filters into a single, chip-based bottom sheet.
Impact
• Reduced onboarding friction by refining the flow and clarifying each step’s purpose.
• Improved discoverability and usability through simpler team and player list interactions.
• Established scalable interaction patterns for search, filtering, and content hierarchy that can extend to other leagues and fan communities.
• Bridged design and engineering constraints by finding workable solutions (e.g., integrating team logos within the existing onboarding module).
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