Codeably
I designed a website called Codeably using Adobe XD during Google’s User Experience certification course.
The goal: To help beginners easily learn programming languages while improving my skills in designing responsive layouts.
Role
UX Researcher & Designer
Duration
2 Months
Tools
Adobe XD
The Problem
Finding beginner-friendly coding tutorials can feel like searching for a needle in a haystack. 🧵🔍
My mission was to create a platform where learning to code is both simple and enjoyable.
User Journey Map
I observed how users interacted with coding resources to map their journey. This allowed me to identify key frustration points and opportunities to enhance their learning experience.
User Persona
Meet Mira! 👋 A high school junior who struggles to find beginner coding tutorials that fit her learning needs.
Her problem statement: "Mira needs beginner-friendly coding resources to sharpen her skills and grow her confidence in programming."
Sitemap
In my design solutions, I aimed for simplicity and usability. The website includes:
A search bar for quick tutorial discovery
A profile page for personalization
A section for coding videos
Pages with helpful information
This sitemap kept everything organized and easy to navigate.
Wireframes ✏️
Starting with paper sketches, I explored responsive designs for different devices: tablets, computers, and mobile. For the digital wireframes, I used Adobe XD to create:
A browsing page for discovering tutorials
Filters to help users find exactly what they’re looking for
Usability Testing
I conducted a moderated usability study with five participants and uncovered these three insights:
Final Designs
Based on usability feedback, I upgraded my high-fidelity prototype with these enhancements:
Rating tabs: Users can now rate tutorials to gauge their helpfulness
Footer navigation: Quick access to more pages and information at the bottom of the site
Language options: Added a language switcher for non-English speakers
Bold headings: Improved content visibility for better accessibility
