Marten Björk

New List Feature for AlternativeTo

Juni 2019 notice: I'm moving all my blog posts to Contentful and Gatsby. Some images will be missing for a few weeks as I move all the content by hand.

I recently designed a new feature for AlternativeTo that allows users to create lists of their favorite apps to share with friends, family and the world.

Finding the right look and feel

The data behind each list comes from a database, but we didn't want the lists to feel like just data dumps. Instead they should feel like lovingly crafted blog posts.

When we started out, we didn't know exactly how the lists should look and we had a lot of unanswered questions; how much can we stray from the site's overall branding? Does numbering the lists make them appear algorithmic? Does the site's branding cause confusion about the sender?

The first sketches were really rough, but enough for the team to get talking:

A design proposal showing a blog post with a purple cover image, a headline and some body copy
A design proposal of a blog post featuring a large banner graphic, a heading and a list of apps

I created a few quick mock-ups in Framer to better explain different designs:

A gif showing a blog post desig proposal. The cover image to the left is fixed as you scroll through the post.

We moved fast and broke every typographic rule in the book, but quickly reached a consensus about what the list feature actually was. After a bunch of iterations we had a version of the list feature that we could all get behind.

Generating list artwork

We quickly realized that we wanted the lists to have some kind of cover art. We started exploring how we could generate it programmatically. I wrote a quick Node application that fetches icons from the website, stylizes them and generates animated gifs for each list.

A gif showing stylized app icons appearing one after another on a purple background

In the end, after a 98 message long back-and-forth in Slack, we landed on a calmer design that also made more sense from a technical perspective. It generates one image with all the icons on the back-end and then uses Imgix to blend that image with a background photo. It's efficient and we get CDN benefits automatically.

Rethinking the site header

During the design of the list feature we realized that the existing site header wasn't as clean and slim as the rest of the feature. It felt bloated. 

I went off on a tangent to explore how we could trim down the header while also accentuating important features like the user menu. The result was a slimmer and more efficient menu that would work for the entire site.

My design proposal for a new header. It features a logo, an search field that expends when focused and navigation.

I used Framer to explain the different states to the rest of the team:

An animated example showing how the header's search field expands as you focus it

A version of the header will role out in the future. In the mean time we settled for a simplified version of the current header. It was quick to implement and still looks good. To make the list — not the header — stand out, we made a white version that only becomes blue when hovered.

Getting the UX right

We spent a lot of time getting the editing UX just right. We wanted to build an editor that was almost inline, but since you can't edit an app's data (only its description) we had to strike a good balance between full-on WYSIWYG and showing what's actually editable.

A gif showing how to add a new app to the list. A small plus ico is pressed and an input field with app suggestions appears.

Better onboarding

The list feature is primarily accessed through the main menu. I designed several states for the menu to better introduce the feature to the users.

The menu showing a user's lists. At the bottom, it prompts you to create your own list.

Thanks

Thanks to Markus and Ola at AlternativeTo for being good product owners. They are open to weird ideas but also focused on creating shippable products. Hanging out in #design with them is good fun. 

🎉