--- title: "DotSkills — X Gravity" description: "A learning app that turns any skill into a visual map. We took it from idea to launch: the concept, UX, UI, brand, site and the app itself." url: https://xgravity.co/work/dotskills.html --- [Work](https://xgravity.co/work/) / Brand + Build # DotSkills See the whole skill first. ![DotSkills, image 1 of 15: the home page: a live map of a real lesson you can tap, instead of a hero photo](https://xgravity.co/assets/work/dotskills/01.jpg) ![DotSkills, image 2 of 15: Meet Dottie on the home page: she’s the guide on every skill map, with a 40-second video of how DotSkills works](https://xgravity.co/assets/work/dotskills/24.jpg) ![DotSkills, image 3 of 15: Dottie’s tour in the app, step 2 of 10: This is the map, every lesson in order, green for done and a ring for where you are](https://xgravity.co/assets/work/dotskills/25.jpg) ![DotSkills, image 4 of 15: the whole Zero to One with AI map: five regions in a row, Idea, Plan, Build with AI, Brand, and Launch and run, with a dot for every lesson](https://xgravity.co/assets/work/dotskills/09.jpg) ![DotSkills, image 5 of 15: Region 01, Idea, up close: seven lessons from AI basics to Your edge, each with its one-line idea and how long it takes](https://xgravity.co/assets/work/dotskills/10.jpg) ![DotSkills, image 6 of 15: a lesson diagram in DotSkills: from your question to a decision you own, with stations from You to Decide and the loops that send you back](https://xgravity.co/assets/work/dotskills/12.jpg) ![DotSkills, image 7 of 15: the AI model station opened in place: its first chunk, The idea, with the full diagram still on screen beside it](https://xgravity.co/assets/work/dotskills/13.jpg) ![DotSkills, image 8 of 15: the same station on its second chunk, In practice: what the AI does and what to watch out for](https://xgravity.co/assets/work/dotskills/14.jpg) ![DotSkills, image 9 of 15: the homepage diagram with the Errors station tapped: a note opens beside it, with links to the next station and to the lesson](https://xgravity.co/assets/work/dotskills/15.jpg) ![DotSkills, image 10 of 15: the Key open over a lesson: what each colour, line and marker on the map means](https://xgravity.co/assets/work/dotskills/16.jpg) ![DotSkills, image 11 of 15: the map rail open beside a lesson: every region and lesson, with a you-are-here marker on lesson 1.1](https://xgravity.co/assets/work/dotskills/17.jpg) ![DotSkills, image 12 of 15: the Check: questions you have to pass before moving on](https://xgravity.co/assets/work/dotskills/05.jpg) ![DotSkills, image 13 of 15: the Buying your first home map in the app: its region The path to keys on the map rail, beside the diagram From renting to ready, one check at a time](https://xgravity.co/assets/work/dotskills/11.jpg) ![DotSkills, image 14 of 15: Best practices: six habits, each with an Instead of and a Try](https://xgravity.co/assets/work/dotskills/04.jpg) ![DotSkills, image 15 of 15: Focus mode: the lesson on its own, nothing else on screen](https://xgravity.co/assets/work/dotskills/07.jpg) A learning app that turns any skill into a visual map. We took it from idea to launch: the concept, UX, UI, brand, site and the app itself. [Visit dotskills.co](https://dotskills.co) - **What we did:** Product idea, UX, UI, Brand, Website, Web app ## The problem Most courses hand beginners a list of videos and hope the picture comes together at the end. It usually doesn't. People get lost halfway through, not because the material is hard, but because they can't see how the parts connect or where they are. ## The idea Show the whole skill first, then teach it one step at a time. Every skill becomes a map of connected stations. The first map, Zero to One with AI, has 46 lessons in five regions, about 12 minutes each, with one example product running through every lesson so the steps stay concrete. ## The map Every skill starts as one map. Zero to One with AI is drawn as five regions (Idea, Plan, Build with AI, Brand, and Launch and run), with each lesson a station on the line. Before the first lesson you can see all 46 stops, how they connect and where you are. A second map, Buying your first home, uses the same system for a completely different skill. ## Drill downs Click any station and it opens in place: the idea, how it works in practice, and who does what, while the rest of the map stays on screen. Follow the path to step through a diagram one station at a time, or open See it big for the full view. Best practices open into before-and-after habits, and build steps open into the exact words to use. In the first lesson: the diagram, then the AI model station opened on its first chunk, The idea, then its second chunk, In practice. ## Click into anything Nothing in DotSkills sends you to a new page to learn more. You click, it opens where you are. On the homepage, tap the Errors station and its note opens beside the diagram. In a lesson, the Key opens over the page and explains every colour, line and marker. The map rail slides out with every region and lesson, and shows where you are. ## The app Every lesson follows the same seven pages, from The idea to a Check you have to pass. Diagrams build as you arrive, any station opens into three short chunks without losing the map, and missed questions link back to the station that teaches them. Visual or Reading mode, Focus mode and a map rail that shows where you are. No account needed: progress saves in the browser. Dottie is the guide. She explains how DotSkills works in a 40-second video on the homepage, then walks you around the lesson screen in a ten-step tour: the map, the pages, the Key, Focus and where to send feedback. After that she pops up with a quick tip the first time you reach each new page. ## The brand Three dots in orange, green and purple, warm paper and near-black ink, so it reads like a field guide, not a tech product. Five diagram colours each have one job on every map: you, the AI, your tools, watch out, and testing and done. Hanken Grotesk for type, IBM Plex Mono for labels. ## Built AI-native We work AI-native, and we build brands for it. Alongside the logo and the type system, the DotSkills guidelines include skills: files an AI tool loads before it makes anything for DotSkills. DESIGN.md holds the names, colour meanings, type, diagram rules and writing rules, and four skills cover specific jobs: drawing DotSkills diagrams, writing in the DotSkills voice, graphics and social posts, and decks. AI drafts. We decide what ships. ![The logo section of the DotSkills brand guidelines: the wordmark with its three dots, the framed, stacked and mark versions, smallest sizes and backgrounds](https://xgravity.co/assets/work/dotskills/18.jpg) ![The type section of the DotSkills brand guidelines: Hanken Grotesk and IBM Plex Mono, a live headline to type into and the type scale](https://xgravity.co/assets/work/dotskills/19.jpg) ![The skills section of the DotSkills brand guidelines: DESIGN.md plus skills for diagrams, the DotSkills voice, graphics and social posts, and decks, each ready to download](https://xgravity.co/assets/work/dotskills/20.jpg) ## The homepage It opens on a live map you can tap instead of a hero photo, then introduces Dottie, shows the difference against a normal course, walks through a lesson and lists every feature with what it does for a beginner. On a phone the homepage keeps its tappable map, and the app says plainly that lessons need a bigger screen, with a button to email yourself the link. ![The DotSkills homepage on a phone: See how it all connects, with the sample map below](https://xgravity.co/assets/work/dotskills/21.jpg) ![The menu open on a phone](https://xgravity.co/assets/work/dotskills/22.jpg) ![The app on a phone: DotSkills is built for bigger screens, with Email me the link and Copy link](https://xgravity.co/assets/work/dotskills/23.jpg) [Next project: Far Away Posts](https://xgravity.co/work/farawayposts.html)