Guitar Learning Platform
LickLibrary Redesign
Discovery flow, homepage and onboarding — redesigned and shipped as a working product.
The transformation
From content library
to learning journey.
Before
A content catalogue. Users arrived and didn't know where to start.
After
A guided learning experience. Four questions. Personalised recommendations.
10,000+ lessons.
One place to start.
The problem wasn't a lack of content — it was helping users find the right content. The Discovery Assistant was designed to reduce decision fatigue and create a guided path into the platform through a personalised recommendation journey.
The recommendation journey
Goal
What brings you here?
Learn songs · Improve technique · Get inspired
Level
How would you rate yourself?
Beginner · Intermediate · Advanced
Time
How long can you practise?
15 min · 30 min · 1 hour+
Artists
Who inspires your playing?
Genre & artist preferences
Results
Your personalised lessons
Powered by recommendation API
Goal — What brings you here?
Learn songs · Improve · Get inspired
Level — How would you rate yourself?
Beginner · Intermediate · Advanced
Time — How long can you practise?
15 min · 30 min · 1 hour+
Artists — Who inspires your playing?
Genre and artist preferences
Results — Your personalised lessons
Powered by recommendation API
UX thinking
- Progressive disclosure — one question at a time
- Reduces cognitive load through guided conversation
- Avoids dead ends with flexible, optional steps
Product thinking
- Balances guidance with user flexibility
- New users guided, experienced users unblocked
- Recommendation logic accounts for content gaps
Technical build
- Vue 3 component-driven architecture
- Recommendation API wired to user inputs
- Dynamic result generation in real time
See it in action
The full recommendation flow is live and interactive in the prototype.
Process
Most designers stop at Figma.
I designed and built a working prototype — real interactions, a live recommendation flow, and deployed on Vercel.
01
Figma
Design
Components, flows and visual system defined before any code.
02
Vue 3 + Vite
Build
Working app with real routing, state and component architecture.
03
APIs
Connect
Recommendation endpoint integrated and wired to user inputs.
04
Vercel
Ship
Live URL. Shareable and indistinguishable from a real product.
Stack:
Vue 3Tailwind CSSViteVercelRecommendation APIPlatform work
Redesign highlights
Beyond the Discovery Assistant, the redesign touched every major surface of the platform.
Homepage redesign screenshot
Homepage Redesign
A clearer entry point to the platform
The original homepage tried to surface everything at once. The redesign establishes a single hierarchy — understand the platform, find your path, start learning.
- Improved hierarchy and visual clarity
- Clearer value proposition above the fold
- Discovery Assistant promoted as primary CTA
Reflection
Key learnings
01
Designing for discovery
When content is vast, the interface's job is to narrow — not to show everything. One good question is worth ten filters.
02
Prototyping with code
Static screens can't communicate flow, timing or delight. Building in Vue meant I could validate decisions that Figma can't answer.
03
AI-assisted experiences
AI works best when it removes a decision rather than adding one. The Discovery Assistant succeeds because it asks less, not more.
See it live
Explore the prototype
The full discovery flow, homepage redesign, and onboarding — working, interactive, and deployed.
Open prototype →Live on Vercel · Vue 3 · No login required