You might remember when Paweł and I asked for your feedback and input on the home page last week. Yup, we’re the design team at DEV and we want to improve your DEV experience so that we make the most out of our community here.
Based on what you told us, here are the main issues you have with our home page:
We’re hearing that the home page is pretty visually overwhelming for a lot of you.
“There's too much information competing for my attention. Combine that with all the various forms of buttons, and half the time I'm not sure what I can click on and what I can't." - @akajb84
“The fact that it's not easy to identify the purpose of the areas in the sidebars at first glance. They look too similar to each other and this requires me to scan a lot of content.” - @olistik
In addition to the hodgepodge of different button styles on DEV, we’re also hearing that you see other inconsistencies as well…
“The "newest listings" section has borders around every listing whereas when I look at the different sections for the tags that I follow there is only an outside border.” - @torianne02
“I wish the homepage would default to showing me a feed of My Tags, as opposed to everything. I think that's my only ask.”- @gatlingxyz
Why clutter your homepage with things you have already liked or read?
“I have read a post or liked it, I shouldn't see it again on the homepage.” - @vaibhavkhulbe
You may already be following awesome people and tags on DEV, but you don’t want to miss out on other interesting content.
“It should have more relevant and should have a section of recent/trending articles or authors so that I can discover new content easily.” - @vaibhavkhulbe
Above are some issues that you’ve been encountering with the home page. Some of you recommended interesting ideas for solving these problems and improving the home page. Here are some of the ideas we want to call out:
@cristinaruth noticed that our sidebars are not very accessible on mobile, and has ideas for how to make that information more accessible...
“... maybe scatter the listings on mobile throughout the feed like reddit does? I haven’t thought this through so there are likely holes in that idea.” - @cristinaruth
With a wealth of creators and tags sharing their content, you want a way to discover new people and content.
“Have a page "Explore" where we can see all posts and all tags” - @bairrada97
"I much prefer a recommendation page like on YouTube based on the creator I follow and like, while keeping the week / month / infinity ..” - @axelledrouge
Though some of you expressed liking our three-column layout, others envision different possibilities for how we can lay out our content on the home page...
“Would be nice if the content took advantage of my widescreen monitor and not ride a single small column down the middle.” - @skryking
Do you sometimes save articles in your reading list, but don’t remember to visit it? @cristinaruth has an idea for reminding you about these articles...
“Maybe even start showing me articles on my “to read” list if nothing else to show me? They pile up and I actually forget about them but I do visit the home page a lot.” - @cristinaruth
We’re taking note of your feedback and turning them into actual projects at the company. They include:
North Star ⭐️ We’re envisioning an ambitious design of what DEV 2.0 might look and feel like. We want to think big-picture on how we can create an experience that helps bring our community closer, while also improving the UI & UX through updates in style, spacing, typography, color, and much more.
Feed 💻 In parallel with the north star, we want to optimize what you see in your feed and how it's displayed. There are several things we could do to help you find and enjoy the most relevant content. This will mean both algorithm and UI/UX improvements.
Low-hanging fruit optimizations 🍒 Okay, those two are pretty meaty, systems-based work, but there are several things we could do almost immediately, such as fixing slight typographic inconsistencies and improving our visual hierarchy where the fix is obvious. This is basically a cheaper and easier version of the North Star project.
A couple of days ago, Paweł opened Chrome Dev Tools and started playing with CSS, trying to figure out how much work there would be to improve some things visually. He tried to take a screenshot every few minutes to document the process.
Here's what we did:
- De-emphasized sidebar widgets. Right now they are pretty heavy visually, stealing lots of attention.
Cleaned up cards. We use cards metaphor for everything - feed posts, sidebar widgets (well, not anymore after I de-emphasized them), and smaller UI elements. Because of some mixup of
box-shadowthey kinda look blurred sometimes.
- Unified typography. ¯_(ツ)_/¯
- Played with rhythm. By rhythm I mean paddings, margins, and generally all types of spacing. We tried to unify that here and there, especially in feed cards.
- Widened the page. Ok, this one is a side effect of me going too far in dev tools. We're probably gonna skip this change for now, but eventually it would improve our responsiveness.
Before vs after below:
We’re currently figuring out how we will roll out these changes. If you have any questions or thoughts, please drop us a comment, question, thought, or idea below :) Looking forward to it.
Paweł & Lisa