UI/UX
AI workflow
Vibe coding
Role
UI/UX Designer
Context
Hackathon to Solo iteration
Team
Dev, Marketing
Tools
Figma, Lovable, Claude
Year
2026
Hackathon project built with a developer and a marketing student. Solo iteration designed in Figma, built in Lovable, debated with Claude.
Peer to peer learning platform within a company about AI
Speed up workflow with AI tools
Clickable product prototype
What the Hack
The brief came from a Design Hackathon in Berlin. The challenge was from the company Langdock: design a platform that gives peer-to-peer AI learning a real home inside companies.
Hackathon first concept
I worked in a team of three for four to five hours: one designer (me), one developer, one marketing student. We brainstormed, aligned on a core mechanic, and built a first prototype.
User Persona
Sandra 34, an Inside Sales Rep, three years at her company. She uses ChatGPT once a while to write emails.
She doesn't think of AI which could help improve her workflow as a sales person. She's not lazy, she's risk-averse. The fear of doing it wrong in front of her team is bigger than her curiosity.
She doesn't need a course. She needs to see Maria, someone at her exact level, save two hours on something Sandra already does every Monday. That's her door.
Most employees feel overwhelmed by AI, don't know where to start, and learn informally through conversations that disappear. The opportunity was to make that knowledge structural and discoverable within a company.
After the hackathon I continued the project alone to design it properly, with a specific user, a real visual system, and interaction thinking.
Issues
Peer learning at work happens in scattered conversations that disappear, no structure, no discoverability, no way to build on them
The first prototype was conceptually right but visually underdeveloped and missing key interaction thinking.
First entry point looks like every AI tool: a chat. What would Sandra ask?
No contribution flow, no clear user journey, no visual identity.
Goal
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 15 17" xmlns="http://www.w3.org/2000/svg"><path d="M 0 7.119 C 0.398 8.365 0.783 9.217 1.158 9.594 C 1.34 9.777 1.559 9.88 1.746 9.81 C 3.032 9.325 3.223 6.842 3.615 5.259 C 4.168 1.979 4.418 1.216 4.554 0.723 C 4.629 0.486 4.715 0.276 4.805 0" fill="transparent" height="9.83178893882313px" id="sVsZyvNu9" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="1.67" stroke="rgb(0, 102, 71)" transform="translate(5.769 2.044)" width="4.80488020049448px"/><path d="M 5.628 0.023 C 6.138 -0.092 6.643 0.238 6.755 0.759 C 6.868 1.28 6.544 1.796 6.034 1.911 C 6.034 1.911 6.033 1.911 6.032 1.911 C 6.031 1.912 6.028 1.912 6.025 1.913 C 6.018 1.914 6.008 1.917 5.995 1.92 C 5.97 1.926 5.932 1.934 5.885 1.944 C 5.791 1.966 5.659 1.996 5.507 2.031 C 5.204 2.101 4.828 2.189 4.526 2.262 C 4.071 2.374 3.359 2.726 2.794 3.184 C 2.497 3.425 2.295 3.848 2.039 4.523 C 1.905 4.876 1.868 5.444 1.907 6.119 C 1.945 6.782 2.04 7.355 2.089 7.786 C 2.152 8.335 2.377 8.838 2.684 9.734 C 2.911 10.399 3.204 10.804 3.572 11.07 C 4.047 11.412 4.602 11.618 5.288 11.907 C 5.506 11.998 5.845 12.06 6.287 12.066 C 6.717 12.073 7.186 12.026 7.623 11.946 C 7.889 11.897 8.102 11.777 8.337 11.584 C 8.461 11.482 8.58 11.37 8.724 11.234 C 8.86 11.106 9.025 10.949 9.203 10.806 C 9.677 10.427 10.023 9.95 10.508 8.873 C 10.919 7.961 11.031 7.314 11.084 5.8 C 11.1 5.329 11.124 4.838 11.096 4.365 C 11.067 3.874 10.987 3.549 10.886 3.373 C 10.622 2.913 10.773 2.32 11.223 2.05 C 11.674 1.78 12.254 1.935 12.518 2.395 C 12.851 2.976 12.95 3.677 12.984 4.248 C 13.019 4.836 12.989 5.442 12.974 5.869 C 12.917 7.501 12.787 8.438 12.227 9.681 C 11.686 10.882 11.184 11.677 10.37 12.328 C 10.264 12.413 10.155 12.515 10.01 12.652 C 9.874 12.78 9.706 12.94 9.521 13.092 C 9.136 13.408 8.635 13.725 7.954 13.849 C 7.423 13.946 6.833 14.007 6.261 13.999 C 5.701 13.991 5.094 13.916 4.567 13.695 C 3.997 13.455 3.177 13.151 2.482 12.65 C 1.71 12.093 1.218 11.309 0.898 10.374 C 0.664 9.689 0.305 8.841 0.21 8.01 C 0.174 7.697 0.061 6.967 0.018 6.233 C -0.024 5.511 -0.015 4.588 0.275 3.824 C 0.508 3.21 0.861 2.284 1.618 1.67 C 2.359 1.068 3.317 0.57 4.086 0.382 C 4.4 0.305 4.787 0.215 5.092 0.145 C 5.245 0.109 5.38 0.079 5.475 0.058 C 5.523 0.047 5.561 0.038 5.588 0.032 C 5.601 0.029 5.611 0.026 5.618 0.025 C 5.621 0.024 5.624 0.024 5.625 0.024 C 5.626 0.023 5.627 0.023 5.627 0.023 Z" fill="rgb(0, 102, 71)" height="14.000000000000004px" id="NaACzaWyi" transform="translate(1.236 2.044)" width="12.999999990113576px"/></svg>)
Design a complete, clickable product prototype for the learner side of the platform.
Make a playful, easy entry point for Sandra's learning.
Learning tailored to the users actual daily tasks.
Coherent visual language and documented UX decisions.
Use AI (Claude, Lovable) for faster iteration
My workflow
I debated and defined in Claude, sketched and explored in Figma, then generated and iterated in Lovable. The AI workflow was not about shortcuts, it was about having a thinking partner that could pressure-test decisions in real time.
Iteration
Lovable first output
Figma sketch
Lovable final iteration
Key UX decisions
Two banners, not one
The original prototype had one aspirational story: James closing a $1.2M deal. Sandra looks at James and feels behind, not inspired. I added a second story type alongside it. Maria, same level, small win, is Sandra's entry point. James is her aspiration. Social proof before aspiration for someone nervous about AI.
Wall of Wins, not a leaderboard
A traditional leaderboard puts Sandra near the bottom. She sees it, feels bad, and leaves. The Wall of Wins reframes recognition around three categories: biggest time save, most borrowed prompt, rising learner. Sandra can appear as a Rising Learner in week one.
Two AI chats
Two chat interfaces exist in the product. The James chat rail is warm, beige, contextual, for learning. The personal AI workspace modal is clean, full-width - for doing. The visual contrast communicates the mode switch without explaining it.
The coffee ladder
Asking Sandra to book a coffee with James straight away is too big a step. So connection is progressive: bookmark a prompt, then send a one-tap thank-you, then request a coffee or join an office hour. Each step unlocks the next. It bridges digital learning and real human connection without pushing anyone too fast.
Visual language
The split background, warm beige above the wave, deep dark below, both aesthetic and conceptual. Above the fold is Sandra's personal space. Below the fold is the platform's (company) collective world.
Terracotta means do something. Blue means know something.
The blob shape appears only where the platform speaks to Sandra personally: her progress widget, her avatar, her loading screen.
Prototype
The prototype was built with Lovable. Open it to click trough Peerly.
Designing with AI
I used Claude as a thinking partner throughout, not to generate but to debate. Here are some summarized chats.
Thoughts
Outcome
PEER STORIES AS ENTRY POINT
Replaced the typical course catalogue mechanic with real colleague stories, always showing a same-level peer alongside an aspirational one.
TRANSPARENT PERSONALISATION
Turned a data privacy into a trust-building onboarding moment by showing Sandra exactly what the system knows before using it.
CLICKABLE PROTOTYPE
The prototype is ready to test with real people and to further iterate.
AI AS DESIGN PARTNER
Used Claude throughout the project to debate decisions in real time. Sharpened my workflow.
What's next
FURTHER DEVELOPMENT
The learner side is built. The skill sharer side is not, and that's the most important gap. How does James get his story onto Peerly in the first place? The next sprint would design the contribution flow: a prompt triggered inside Langdock after a successful session, a simple story builder, and settings for managing coffee chat availability. I would also run a first user test with someone matching Sandra's profile.
