Uncover the best stories, lists, and more with Medium’s new topic pages.

Following the new Explore topics page, which makes it easier for you to unlock the depth and breadth of stories on Medium, today we’re starting to roll out redesigned topic pages across Medium.

Our newly updated topic pages help you go deeper on the topics that matter to you by surfacing the most relevant, high-quality stories and lists on Medium. These pages help organize and curate the vast amounts of knowledge that lives on Medium.

Jump between related topics

There are so many useful topics on Medium, but sometimes finding a topic that matters to you can feel disconnected. Now, with a dedicated row of topics across the top of the page, you can quickly and easily bounce between connected and related topics, making discovering new topics that much easier.

These topics contain both a mix of interests that are from the Explore topics page and ones relevant to you.

Recommending more for you

Recommended stories on topic pages condense and simplify the stories we think are most relevant for you, getting you access to the best stories, quickly. These stories are comprised of a combination of ingredients, including trending, Boosted, and what we previously called “Best.”

Lists are also a great way to go deep on a specific topic. You’ll now be able to see recommended lists on certain topic pages. These are currently hand-selected by Medium’s content and curation team.

The existing “Top writers” section has now become “Who to follow.” Eventually, this will also feature authors and publications in a topic that are a part of our Boost program and represent some of the highest quality writing on Medium. As a result, how we define “Top writer” is evolving, so we’re going to be removing the mention of “Top writer” from a person’s profile page while we do this work.

A human touch

Surfacing the highest quality stories sometimes requires a level of human curation. In order to unearth the most standout writing in a given topic, select topics will now include curated lists, with stories chosen explicitly by Medium’s content and curation team.

Try them out

Redesigned topic pages will start rolling out today on Medium.com and the Medium app for iOS/iPadOS and Android.

Topic pages will continue to help build on Medium’s ability to organize and curate the best content, empowering you to go deep on topics that matter. Try out topics, like Technology, Self Improvement, or Marketing, and let us know what you think!

Discover more with updated topic pages was originally published in The Medium Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

Below are a few of the tips that have been shared on our team recently.

1. Copy .svg assets from a browser and paste them directly into Figma

(via Greg Dougherty)

2. Type in a color name in an input and get a hex value

(via Greg Dougherty)

The available color names you can choose from are defined in the CSS Color Module, also known as X11 color names. A few fun names you can input include bisque, linen, and olivedrab!

A bit more info on what appears to be the origin of this feature (from George Kedenburg III) on Twitter.

Similarly (via Collin Olan), you can always preform simple math calculations in an input.

3. Double-click the bounding box around text to wrap it to “Auto width”

(via Helena Zhang)

Helena on Twitter: "Thought I'd drop a quick tip on hump days, just in case ya didn't know...🧙‍♀️ 10 second tips 🧙‍♀️In Figma, did you know you can double-click the bounding box around text to wrap it to "Auto width"? pic.twitter.com/hl0aSyRKjH / Twitter"

Thought I'd drop a quick tip on hump days, just in case ya didn't know...🧙‍♀️ 10 second tips 🧙‍♀️In Figma, did you know you can double-click the bounding box around text to wrap it to "Auto width"? pic.twitter.com/hl0aSyRKjH

4. Press Shift + X on an element to swap stroke and fill colors

(via Helena Zhang)

Helena on Twitter: "🧙‍♀️ 2 second tip 🧙‍♀️Press shift + X on an element in Figma to swap stroke and fill colors, à la Illustrator. pic.twitter.com/zqTIrsgX4K / Twitter"

🧙‍♀️ 2 second tip 🧙‍♀️Press shift + X on an element in Figma to swap stroke and fill colors, à la Illustrator. pic.twitter.com/zqTIrsgX4K

5. Ignore auto layout by pressing space bar as you drag an object

(via Helena Zhang)

Helena on Twitter: "🧙‍♀️ 11 second tip 🧙‍♀️Ignore auto layout in Figma by pressing space bar as you drag an object. pic.twitter.com/fjUe8gcAAz / Twitter"

🧙‍♀️ 11 second tip 🧙‍♀️Ignore auto layout in Figma by pressing space bar as you drag an object. pic.twitter.com/fjUe8gcAAz

Figma is loaded with great features, so I’m sure there are a bunch of other useful tips out there. Got a lesser-known tip? Add a response to this story!

A few lesser-known Figma tips was originally published in Medium.design on Medium, where people are continuing the conversation by highlighting and responding to this story.

Revamping our lifelog app

Over the past eight months, the Swarm team has been hard at work researching, prototyping, and building towards Swarm 5.0. On Tuesday, we launched. (Go download Swarm 5.0 now.) It was a big undertaking that involved a lot of people. Foursquare co-founder Dennis Crowley has already shared why we made me these changes, which means I can explain what, precisely, we were up to all this time.

As a product designer working on Swarm, some of the pieces I specifically worked on for 5.0 included simplifying the information architecture, updating our internal style guide, redesigning the home screen and the profile. More on all that below.

Getting started

Our first priority was simplification. We knew that Swarm had a lot of the right pieces, but they may not have been organized in the most intuitive way. The plan was to make some changes, and then test them with real consumers in real time — and learn and build on this feedback.

One of the earliest, most immediate takeaways from user research was that we heard that Swarm’s visual language was younger than our core demo of urban explorers, age 25–45. So in addition to simplification, we knew we’d have to focus on how to make Swarm feel modern now.

We went to work on churning out a number of different ideas, which came in the form of sketches, wireframes, and low-fidelity design iterations. We were constantly evaluating, whether it be by printing things out and hanging them up on a wall or building quick static prototypes.

After numerous iterations, it was time once again to share with people outside of the Foursquare walls. We conducted new rounds of user research, which let us know that participants liked that we’d removed a lot of the app’s complexity.

These groups also loved the redesigned lifelog (see Dennis’s post for more on this topic), which we put front and center, and the universal search feature, now prominently located at the top of the screen. It was clear we were on the right track.

Updating our internal style guide

Swarm has always had a great visual design foundation and we didn’t want to lose that when thinking about 5.0 and beyond.

Instead, we decided to establish a robust style guide that helped us embrace the updated information architecture. It’s so important to keep the design team on the same page throughout the iteration process, so I created a living style guide which included styles and reusable components we could all share.

This was a bit difficult to start, mainly because we didn’t exactly know what the entire visual direction for Swarm 5.0 would be, but I knew we wanted to simplify the language. We also knew that this style guide would evolve over time (which it has) as we continued building on features.

Once we had a few of the major pieces in place, things started to roll.

Next up: Redesigning the home screen

As I mentioned, we knew we wanted to surface a user’s check-ins in a very prominent way to create a personal lifelog. We explored multiple iterations of the home screen. We developed design directions that ran the gamut from pretty safe to crazy. We wanted to consider the entire spectrum and exhaust all ideas.

We kept going back to the idea of a single line that connects all of a user’s check-ins, and so that’s what you see in the app now. Conceptually, we liked the idea that the vertical line easily illustrates the places you go. It ladders up to the Swarm 5.0 focus, which is on lifelogging and remembering everywhere you go.

The map on the home screen was a given: we knew the map, which shows off a user’s every check-in, was always going to be prominent and interactive.

Updating Swarm’s two dynamic feeds

Once we decided to simplify Swarm’s visual language, we decided to make updating the existing dynamic feeds in Swarm our next priority. Since we were elevating check-in history to the home page of the app (instead of it being a subview on your own profile), check-in feed cells needed to closely match what your friends’ check-in cells looked like. Meaning, the home screen (Timeline tab) should feel very similar to the Friends tab since both highlight check-ins. This was difficult for a few reasons.

1. We wanted to connect category icons on the home screen to create vertical lines, which creates a connection between the places you visit. This was hard because we needed a solution that worked with the numerous types of cells. We ended up using a large amount of padding to the left of the check-in to allow for a vertical line to go straight down the screen.
2. These cells also had to clearly articulate that you can confirm or deny whether or not you’ve been to a place. To account for this, we created grey (unconfirmed) visits that are displayed on the timeline. These stand out on purpose, so you can quickly confirm or deny you were at that specific place — and then get back to exploring the world.
3. Also, you don’t want to see your own avatar repeated multiple times on the Timeline tab, so we needed to figure out how to make the Timeline tab feel similar in weight to the Social Feed tab. We used a category icon inside a circle on your Timeline tab, which helped with consistency between tabs.

Redesigning the profile

One phrase that was said quite often, was that a person’s profile should capture the lifelog from a 10,000-foot view.

In 5.0, the profile needed to highlight the statistics and elements that are most important. Again, the map is a top feature; it needed to be given ample space. We also knew (anecdotally) that people already loved to share their maps on Facebook and Twitter. We decided that showing a large native map with orange pins (dots) at the top of the profile was the most clear way to highlight the places you’ve been. We settled on a card-like layout for some of the stats we thought you should care about most.

Another profile page challenge was determining which stats needed to be the most prominent. In the end, we agreed that Check-ins, Places, Categories (with its own architecture and design elements), Streaks, and Mayorships were the most compelling insights based on feedback from new and longstanding Swarm users.

Two key design tips

Big releases don’t happen without a couple big takeaways. Here are mine:

1. Get engineers involved at the beginning. Something I continue to strive to be better at is getting engineers involved earlier in the design process. At times, decisions were being made quickly and I’m sure I could’ve saved some time by vetting early designs by someone with a bit more technical knowledge to tell me if my idea is just too crazy and potentially outside the scope of the project. I struggled with this at times mainly because of the speed the entire team was moving. Sometimes a tiny design decision can have a large technical impact. It’s on me to continue to get engineers involved earlier to figure it out.
2. Share early, share often, and sort through the clutter. I tell myself this going into every project and/or feature that I work on (though I’m not always great at it). There are a lot of people and teams that want to be included in early design directions, but it’s not always feedback that’s actionable. Sometimes it’s hard to cut through some of that to get a clear and meaningful opinion. It’s always good to remember that just as it’s important to share, it’s your job as a designer to take in all the feedback and use it to make informed decisions.

Lastly

Looking back on all the planning, prototyping, researching, designing, and building — launching Swarm 5.0 has been a huge feat. The engineering team rewrote many core views in Swarm and almost every screen was changed in some way. 20+ people were dedicated to working on the Swarm team over the past eight months, including Sam Brown and Jack Osborne specifically, who helped out on design work.

Soooo what are you waiting for!? Download Swarm 5.0 now. We hope you like it.

How we designed Foursquare Swarm 5.0 was originally published in Foursquare on Medium, where people are continuing the conversation by highlighting and responding to this story.