Codédex

codedex_featured_image

Introduction

I had the privilege of collaborating with the talented team at Codédex from November 2022 to June 2024. During this period, I contributed to designing multiple pages and features, conducting thorough UI/UX audits to pinpoint enhancements for usability, accessibility, and overall design effectiveness.

About Codédex

Codédex is an interactive coding platform that turns learning to code into an adventurous journey through a fantasy-themed landscape.

It offers courses in popular programming languages like Python, HTML, CSS, and JavaScript, allowing users to build skills while earning experience points (XP), unlocking new areas, and collecting badges as they progress.

Designed for a wide audience, including kids and adults, Codédex combines game mechanics with real-world coding projects, making learning both fun and accessible.

Deep-dive into projects

Here are some notable projects I’ve done with Codédex. Clicking on any one will bring you to the section on it.

Challenge Packs

On-Platform Community (OPC)

#30NitesofCode

Codédex x Github Landing Page

Paywall & Checkout Popup

Challenge Packs

Codédex’s Challenge Packs are structured sets of coding challenges focused on specific programming topics. Each pack is designed to help learners build foundational skills in a hands-on way by solving progressive challenges related to a particular concept or programming language.

As users complete challenges within these packs, they earn experience points (XP) and strengthen their understanding of core programming principles, adding an engaging, gamified layer to the learning experience.

These packs offer a targeted approach for users looking to solidify specific skills and are ideal for both beginners and intermediate coders working on mastering programming fundamentals.

Main Screen in Dark Mode
Challenge Details tab in Light Mode
Get Help tab in Light Mode
Table of Contents in Dark Mode

On-Platform Community (OPC)

Codédex’s on-platform community is a supportive space where learners can connect, exchange ideas, and showcase their coding projects. It includes different communities like “Introductions” for newcomers, where users can introduce themselves and start connecting and “Learn JavaScript” for users to share anything and everything on JavaScript.

Additionally, Codédex encourages collaboration and learning support by allowing users to ask questions, discuss technical challenges, and motivate each other in real-time, making it an ideal environment for beginners and experienced coders alike to grow their skills in a friendly and interactive setting.

Desktop View in Light Mode

Drawing inspiration from Reddit and other platforms with similar layouts, I crafted a design that aligns with Codédex’s unique personality, incorporating some 8-bit elements to evoke a nostalgic and retro gaming vibe.

The left panel of the page features navigation links to various sections within the community, also allowing users to effortlessly access communities they are in. 

The right panel, in contrast, includes sections for tech news and upcoming events, enhancing the community atmosphere by keeping users informed about opportunities to join discussions and participate in activities.

Finally, the middle section is dedicated to showcasing everyone’s posts and projects, creating a central hub for community interactions and discussions.

Mobile View & Components in Dark Mode

On mobile devices, the screens are smaller, so the left and right panels are tucked away in a navigation bar at the bottom. To create a new post, users can easily click the sticky “+” button located at the bottom right of the screen.

Project Showcase List

Under Project Showcase, users can share their work and receive feedback. Filters have been added on the right-hand side for easier navigation, allowing users to sort projects by programming.

Individual Project Showcase

When users click on a project, they can view a detailed description along with the profile of the creator. Additionally, they can explore other projects by the same user, making it easy to see the creator’s full range of work.

#30NitesofCode

Codédex’s #30NitesOfCode is a fun, habit-building challenge designed for those committed to learning coding consistently over 30 days. Participants choose a virtual pet to “keep alive” by coding each day, creating a playful accountability mechanism that makes the journey engaging. 

This gamified experience helps users stay on track, with the added motivation of nurturing a virtual companion throughout their coding progress. Participants can also share their daily achievements on Codédex’s on-platform community, fostering a supportive environment for consistent learning and goal achievement.

Desktop View in Light Mode

I led the design of the page, focusing on creating a personalized user experience. To start, users can choose from three different eggs, each adding a unique touch. Depending on the egg they select, the page color changes to match, making the interaction feel more customized and engaging right from the beginning.

Each day that users submit a Twitter link to showcase their coding progress, the daily progress section will be updated automatically. Submitted posts will also appear below the daily progress section.

*8-bit graphics are designed by a talented graphic designer :)

#30NitesofCode FAQ Page

The FAQ page is thoughtfully organized to address common questions clearly. To enhance the theme of pet aging in #30NitesofCode, I’ve incorporated emojis for each question, representing the different stages of a pet’s life. This adds a playful touch and visually reinforces the concept.

#30NitesofCode Leaderboard Page

The visual representation of progress is designed to foster social motivation and provide recognition for efforts. This encourages them to stay committed to updating their progress and coding journey.

Codédex x Github Student Developer Pack Landing Page

Codédex has proudly partnered with GitHub Education to provide an exclusive benefit for student developers: 6 months of free access to Codédex Club via the GitHub Student Developer Pack. This offer supports students as they dive into coding, offering valuable tools, courses, and challenges to build skills and confidence from day one.

To bring the Codédex experience to life, I developed the design concept with a nostalgic, game-inspired 8-bit style to make the landing page more engaging and fun. The actual 8-bit graphics were then crafted by a talented designer, adding a nostalgic, game-inspired feel to the platform.

Paywall & Checkout Popups

The paywall popup was redesigned to enhance user conversion, long-term value, and retention. This update included clear upsell points and a comparison between monthly and yearly subscription options, highlighting a 30% savings on the yearly plan to encourage longer commitments.

Paywall Popup

The design of the checkout popup was aligned with the paywall popup to create a cohesive user experience, helping to streamline the subscription process and improve ROI.

Checkout Popup (Unfilled)
The “Make Payment” button is designed to remain disabled until all mandatory fields are completed, preventing any potential errors during the payment process. It serves as a visual cue that action cannot be taken until all necessary information is provided.
Checkout Popup (Filled)
Once all mandatory fields are filled out, the button will be enabled, allowing users to proceed with their payment.
Checkout Popup (Form Errors)

Error messages appear immediately beneath the corresponding fields, keeping the “Make Payment” button disabled. This design eliminates the extra step of users completing all fields only to discover errors after clicking the button. Instead, it allows users to address issues in real-time, facilitating a smoother and more efficient checkout experience.

Checkout Popup (System Error)
Conversely, if an error occurs after clicking the “Make Payment” button, users will see an error message that appears at the top of the popup.