Unlock with 100 XP
Community Redesign
Hey, it’s Jackie! I work on product design here at Codédex. I’m starting a blog series sharing my design process as we release new features for our platform. We hope this can be interesting for Codédex fans, dabblers in web dev and design, and/or folks generally interested in the ins-and-outs of building at a tiny tech startup. 🤓
Now... let’s talk community!
At Codédex, learning to code isn’t just about taking a course all by yourself. It’s also about getting inspired and motivated, sharing your progress, commiserating over shared goals and struggles—and making friends along the way.
We’ve seen this play out in our Discord server of 15,000+ users. Turns out, people who join our Discord are 7x more likely to complete a course! Learning together is not just more fun, it’s also more effective.
That’s why community—and building dedicated features for it—is so important to us. We’ve had an on-platform community since 2023, but if you’ve been on our site in the past few weeks you might notice it’s gone through a major glow up…
#Opportunities for Improvement 🤨
Our On-Platform Community (OPC) is a place to get inspired and build meaningful connections around learning and building, all while fitting into the broader Codédex journey.
But our previous OPC definitely had room for improvement.
First, the OPC was one of the last major pages on our site that needed an update to our new design system. When I joined the team in the middle of 2024, I built a design system and had us shift our platform towards it. It’s hard to update the whole site at once, so we incorporate it gradually as we build new features. For this redesign, one obvious goal was to finally match Community to the rest of our site’s color palette and font styles and have it be more polished, professional, and integrated into the Codédex experience.
Second, our OPC could better support the interactions it’s meant to foster. Our OPC is mostly structured in discussion channels in the style of Discord or Reddit—but this format isn’t the best for everything. We used this channel format for hackathons, posting your projects, recording #30NitesOfCode progress, and submitting course Checkpoint/Final Projects for review. Relying on this structure was great for getting new features out of the door fast, but also meant that the user experience for each feature is less than ideal.
#Introducing: Our New Community 🤩
This is a big and complex area of our platform (it’s pretty much a whole social media platform in the middle of an e-learning platform), so for this revamp we focused on polishing what already exists. We have a lot of ideas for the future, but our starting goal was to create a good foundation for our OPC that we could later build new features onto.
#General Changes
Most changes we made fell into one of two categories: simplification and reorganization.
In terms of visual design, I wanted to simplify the UI as much as possible. The OPC is full of user generated content such as text, images, and videos, so it’s important to let that shine through and let the UI itself take a backseat. We removed the cover illustrations for each page, removed the redundant “Create Post” button on the left sidebar, removed the Instagram Stories-like carousel of featured projects at the top of the page, and restructured the page to give enough breathing room for a 3-column layout.
We also took the opportunity to reorganize some features hidden away in the OPC that should be surfaced higher. Our notifications, which were previously only accessible within the OPC, moved to a global notification system that lets you check notifications from anywhere on the site. We also relocated our Town Square (a RPG-style virtual world where you can walk around and attend live community events) from a tab within the OPC to a dedicated page within a Community dropdown menu.
#Project Showcase
We redesigned our Project Showcase to feel like a showcase, not just another feed. We switched to a gallery-style presentation format for projects that brought greater emphasis to the each project’s cover image, while also making it more clear how to filter by project tags.
#Leaderboards
While most of our work was cleaning up what already existed, Leaderboards is our first entirely new addition to our OPC! Right now you can see who has earned the most XP (gained by completing Codédex exercises) so far—for this week, or for all-time. In the future, we want to build onto this and create more opportunities for friendly competition, motivation, and earning rewards.
#What's to Come 🌝
In addition to continuing to squash bugs, implement feedback, and improve on what we built*, we have a bunch more ideas on our plate for Community and more. Stay tuned~
- Adding an Events page to centralize our virtual and in-person events
- Improving systems for getting help and project review on Codédex learning material
- Revamping #30NitesOfCode to be more engaging and community-centric
- Expanding on Worlds to become more immersive and better support live events
- Creating a better platform for building projects in community (e.g. for hackathons, code jams, contests)
That’s it from me! Big thanks to our team and especially our engineer Asiqur who crunched out what was essentially an entire social media platform in only a few weeks.
Startup is startup-ing! 🫡
If you have any suggestions, please lmk here in this week's QotW.
Until next time,
Jackie 💖
P.S. We’re definitely a “get things out the door and test” type of startup, if you’re a perfectionist designer and/or work at a startup, you can understand the struggle. 😅 Thanks for following along our wild, tiny startup journey!
Login to like this post!... likes