In November of 2015, I joined the Design Team of Stack Overflow. It is the largest online community for developers. More than 50 million programmers visit Stack Overflow each month to help solve coding problems, develop new skills, and find job opportunities.
During the last 3.5 years, I've been working on several projects at Stack Overflow. Starting from tiny UI updates, through building features and parts of the product that had a massive impact on the community, ending with leading design efforts for one of the Stack Overflow's SaaS products.
With mobile apps I tried to bring Stack Overflow content to developer's pocket. It wasn't only about Questions & Answers but also Jobs.
Stack Overflow is very heavy in terms of content. It's fair to say "content is the king" here so I wanted to keep UI as invisible as possible and deliver seamless reading experience.
It was really challenging – bring all the functionality and features from desktop site to mobile app, yet try to focus user on what's the most important – content.
Question & Answers view
Question view is, without doubts, the most important view on Stack Overflow. On web, probably around 95% of traffic goes to a single question view. This is the essence of Stack Overflow. So it's fair to say that making it perfect on mobile was absolutely priority number one.
In early 2017 we launched new header on Stack Overflow. At first glance it seems trivial, but it was extremely huge project that had impact on ~50 million users every month. Stack Overflow has (almost) never been redesigned. So in 2017, header was pretty similar to what was created 10 years ago. And during that time, Stack Overflow as a business has changed drastically – we've added bunch of products like Jobs and Documentation. But the header has never reflected those changes – it was optimized to completely different product.
It's worth to remember that the same header markup was used across ~160 other sites (since Stack Overflow is part of Stack Exchange network). So making any changes to that element had even more impact. But at the same time it had to be very flexible because only Stack Overflow's header needed special treatment (because of extra features and definitely bigger traffic). Our goals were clear:
- Present all the tools we provide for developers in a way that’s consistent with them actually discovering them.
- Increase traffic to Jobs and Documentation.
- More intuitive, updated visual design.
- Increase the number of users who sign up and gain access to more site features.
- Don't screw up bunch of other metrics :).
It took us several iterations, many research sessions, tons of AB testings and prototyping, and a lot of time spent on conversations with our community members to get where we are right now.
Further header experiments
We knew that this will be an ongoing project and we will never be done with it. So when we launched V1, we already had bunch of other ideas that we wanted to explore and test at some point. Below I present few of them.
Stack Overflow for Teams
Stack Overflow for Teams is a private and secure home for companies' questions and answers. I've joined a team working on this branch several months ago and led design efforts, cooperating with Project Managers, UX researcher and other stakeholders. Stack Overflow itself is not a SaaS product but this branch was something completely opposite. It required different way of thinking.
One of the pieces I'm very proud of is conceptual work, long before we launched the product. Having only general business and product plan we had to come up with completely new design concept that would merge both worlds – Public Q&A and Private Teams. It was extremely interesting project and also really challenging given very limited period of time we had for this conceptual work.
I've been working on lots of smaller and bigger experiments that have never been released, nevertheless I'm very proud of many of those projects. Below I present some of them.
One conceptual idea was around new home page for Stack Overflow. Right now it's basically list of questions. And the concept was to build some sort of a Feed that would consolidate list of questions I'm interested in (based on tags I follow), activity in questions and answers I follow, inbox events and so on. It would basically be a place that would led me to browse more on Stack Overflow and stay a bit longer on the home page itself; something that would let me discover new content types; a place being activity driver.
Stack Overflow has many content types, like Questions, Answers, Comments, Jobs, Inbox notifications, Achievements and so on. All of them could be grouped and categorized in different way (for example based on time period, or similar tag, or its source like a private Team). So it was important to build flexible UI concept that could work in many different ways. Below is a bit of exploration I did for the Feed.
This one is a result of company wide hackathon. Stack Overflow has very powerful moderator tools. But that section is exposed to very few people since not too many of them are moderators. But at the same time, it's extremely important part of the community because it basically has impact on every piece of content we have.
There're tons of questions, answers, and comments being flagged every day. And each content type can be flagged in several different ways. This helps us keep the content super high quality but also adds another layer of complexity to the Moderators Dashboard.
Moderators Dashboard has a lot of powerful features. I wanted to simplify UI without reducing features and make it easier to navigate which at the end of the day would help moderate content faster and smoother.
This concept was inspired by email clients' interfaces. I've divided the layout into three columns:
- Main Navigation – it's basically list of tools for Moderators but also predefined filterings.
- Flags Listing – list of all pending flags associated to specific question or answer. It gives an overview on how many flags (and what types of flags) specific post has.
- Selected Flag Preview – finally, when Moderator selects a flag, it will be displayed in right column providing a lot of additional context, actions for each flag and so on.
This type of interface helps organize and structure complex data and gives an opportunity to scan a lot of content at first glance without navigating and scrolling too much. It basically helps speed up moderation process.
Tag Watching Widget
There's tiny but powerful sidebar widget on Stack Overflow – it lets users add tags to the watching/ignored lists. I personally think it's one of the most important features because it has tremendous impact on what users see on their home page and what notifications they receive. It's basically something that let users personalize their Stack Overflow – instead of showing all content, we're narrowing it down only to what's interesting for users. It has an impact on time spent on the sitesince it helps filter signal from noise.