|
| 1 | +--- |
| 2 | +title: Community Redesign |
| 3 | +description: We redesigned our on-platform community! Take a look into our process, design decisions, and what’s to come. |
| 4 | +author: Jacklie Liu |
| 5 | +dateCreated: 2025-02-21 |
| 6 | +seoImageLink: https://firebasestorage.googleapis.com/v0/b/codedex-io.appspot.com/o/blogs%2Fdiscord-unlock%2Fbanner.gif?alt=media&token=89206ff1-0f40-4461-952f-3b486f54697a |
| 7 | +published: false |
| 8 | +tags: |
| 9 | + - Product |
| 10 | + - Community |
| 11 | +--- |
| 12 | + |
| 13 | +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 startup. 🤓 |
| 14 | + |
| 15 | +Now... let’s talk community! |
| 16 | + |
| 17 | +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. |
| 18 | + |
| 19 | +We’ve seen this play out in our Discord community of over 15,000 learners. 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. |
| 20 | + |
| 21 | +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… |
| 22 | + |
| 23 | +## Opportunities for improvement🤨 |
| 24 | + |
| 25 | +Our [on-platform community](https://www.codedex.io/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. |
| 26 | + |
| 27 | +<div style={{display: "flex", justifyContent: "center", marginTop: "2rem", marginBottom: "-2rem"}}> |
| 28 | + <img src="https://imgur.com/ppzQNFC" /> |
| 29 | +</div> |
| 30 | + |
| 31 | +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. |
| 32 | + |
| 33 | +<div style={{display: "flex", justifyContent: "center", marginTop: "2rem", marginBottom: "-2rem"}}> |
| 34 | + <img src="https://imgur.com/N2OkGsR" /> |
| 35 | +</div> |
| 36 | + |
| 37 | +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. |
| 38 | + |
| 39 | +## Introducing: Our New Community🤩 |
| 40 | + |
| 41 | +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. |
| 42 | + |
| 43 | +### General changes |
| 44 | + |
| 45 | +Most changes we made fell into one of two categories: simplification and reorganization. |
| 46 | + |
| 47 | +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 and images, 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. |
| 48 | + |
| 49 | +<div style={{display: "flex", justifyContent: "center", marginTop: "2rem", marginBottom: "-2rem"}}> |
| 50 | + <img src="https://imgur.com/QQ8GZCa" /> |
| 51 | +</div> |
| 52 | + |
| 53 | +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. |
| 54 | + |
| 55 | +<div style={{display: "flex", justifyContent: "center", marginTop: "2rem", marginBottom: "-2rem"}}> |
| 56 | + <img src="https://imgur.com/WjokglY" /> |
| 57 | +</div> |
| 58 | + |
| 59 | +### Project Showcase |
| 60 | + |
| 61 | +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. |
| 62 | + |
| 63 | +<div style={{display: "flex", justifyContent: "center", marginTop: "2rem", marginBottom: "-2rem"}}> |
| 64 | + <img src="https://imgur.com/V3Qlzjf" /> |
| 65 | +</div> |
| 66 | + |
| 67 | +### Leaderboards |
| 68 | + |
| 69 | +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 lessons) 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. |
| 70 | + |
| 71 | +<div style={{display: "flex", justifyContent: "center", marginTop: "2rem", marginBottom: "-2rem"}}> |
| 72 | + <img src="https://imgur.com/fsZ5V1B" /> |
| 73 | +</div> |
| 74 | + |
| 75 | +## What's to come🌝 |
| 76 | + |
| 77 | +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~ |
| 78 | + |
| 79 | +- Adding an Events page to centralize our virtual and in-person events |
| 80 | +- Improving systems for getting help and project review on Codédex learning material |
| 81 | +- Revamping #30NitesofCode to be more engaging and community-centric |
| 82 | +- Expanding on Town Square/Worlds to become more immersive and better support live community events |
| 83 | +- Creating a better platform for building projects in community (e.g. for hackathons, code jams, contests, etc.) |
| 84 | + |
| 85 | +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. |
| 86 | + |
| 87 | +Startup is startup-ing! 🫡 |
| 88 | + |
| 89 | +Until next time, |
| 90 | +Jackie 💖 |
| 91 | + |
| 92 | +\*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! |
0 commit comments