We are very pleased to have rolled out a new homepage experience for our community last week. You may notice the visual differences straight away, but there has been a lot of work on our data management and infrastructure that made this redesign possible.
This version of the homepage is just one part of our ongoing plan to continue to make CodePen the best place to find front-end code and content you are interested in, as well as share your own work with a huge community of other people into front end. Special thanks to the beta testers who provided valuable feedback as we worked on this.
In the last few years, our community has grown rapidly, as has the volume of amazing content being created daily. Well done, team! We hope you’re having fun and that you know that everything you make helps everyone that follows in your footsteps.
Technology-wise, the relational database set up from years prior was struggling under the weight of that data, making it hard for us to surface the content that people want to see via SQL query alone. We also knew we needed to improve “discoverability” on CodePen. Our primary way of getting content in front of our community’s eyes has always been Picking, where someone from the CodePen Team or a guest Picker finds a Pen and manually chooses for that Pen to land on the homepage. This was a reasonable way to handle the curation and promotion of content when we had 500K users, it hasn’t scaled well to handle the content generated by the 4.7 million users signed up to CodePen today. 
For these reasons, we incorporated a content feed service called Stream into our infrastructure. First, we used feeds to improve your Activity feed, then to make following creators on CodePen more valuable. With those changes, we saw a huge increase in the number of people following other people on CodePen! That’s been a wonderful thing to watch, and we plan to do more to make following an even more fun thing to do on CodePen.
With those releases in place, it was time to tackle a redesign of the homepage, the final piece of this long journey. By the way, it’s been rewarding to split up huge jobs like this into smaller parts, releasing each piece as we went.
We had years of feedback about the homepage and what people wished they could find there. We knew that people were either:
- wanting to see the freshest Picks and popular content on the site.
- wanting to catch up on specific content and creators they were interested in.
- wanting to search for something on the site.
- wanting to go straight to the content they are working on.
For this reason, the new homepage is more like three new homepages, with our trusty Site Search bar in the header as before. The new homepage has three tabs:
- Following – where you can get all the most recent or most popular content from the creators you follow, as well as catch up on content they have been digging themselves.
- Trending – Picks are not going anywhere! They are here but they are also mixed with content that is popular with our community right now – think the previous homepage and popular page combined into one cool feed.
- Your Work – This is the Dashboard renamed and given a lick of paint. This tab stores your most recent ‘view’ for the next time you return, so if you are someone who wants to just get straight to your most recent Pens whenever you visit CodePen (there are a few of you
) we’re sure you’ll feel at home in this tab. All the filters/searches are bookmarkable too, should you have favorites you absolutely need to jump back to quickly.
You’ll notice the Homepage will remember which tab you were on last when you navigate back to codepen.io, this was by design as we’ve gathered people have preferences as to what they want to see on their homepage. If you want to switch things up it just a quick tab click away.
It’s a bit rare in design and development to be able to please everyone. Sometimes hard decisions about direction have to be made. We were happy that in this project we were able to accommodate so many different types of user preferences.
We hope that this homepage redesign will make CodePen more fun and easier to use for you, whether you’re more of a private user, very into the community aspects, or just here to find what you need and go.
Even though this as a last-step in many ways for us, it’s also a first-step for the logged-in homepage in particular. We are continuing to work on making our feeds and the overall website more interesting and personalized for you, whether you are into Vue demos, CSS animations, WebGL effects, or Nintendo fan art. Stay tuned!
The post A New Homepage appeared first on CodePen Blog.