You might remember when Pawe and I asked for your feedback and input on the home page last week. Yup, were the design team at DEV and we want to improve your DEV experience so that we make the most out of our community here.

Hello again. It's time to do some work!

Pawe Ludwiczak Feb 4 2 min read

#meta #design #ux

What we heard from you

Based on what you told us, here are the main issues you have with our home page:

1 The home page is visually overwhelming

Were 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

2 Some things are inconsistent and confusing

In addition to the hodgepodge of different button styles on DEV, were 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

See our full audit here (Figma, Jan 10, 2020)

3 Youre not seeing enough content from people and tags youre following

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

4 You keep seeing things youve already read or liked

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

5 Youre not discovering new, interesting content

You may already be following awesome people and tags on DEV, but you dont 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

Your ideas

Above are some issues that youve 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:

Improving our mobile experience

@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 havent thought this through so there are likely holes in that idea. - @cristinaruth

An Explore page for discovering new creators and tags

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

Making use of screen real estate better

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

Reminding you of your reading list

Do you sometimes save articles in your reading list, but dont 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

What were doing

Were taking note of your feedback and turning them into actual projects at the company. They include:

1. North Star Were 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.

2. 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.

3. 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.

Whats next

Rolling out low-hanging fruits optimizations

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 border with box-shadow they 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:

Were 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