AlternativeTo: Notes from the #design channel

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:

 
 
 
 

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

 
listor - 5.gif
 

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.

 
sketch-files.png
final.jpg
 
 

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.

 
generated-gif.gif
 

In the end, after 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.

 
nasa-53884.jpg
 
 

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. 

 
Skärmavbild 2017-11-25 kl. 15.47.47.png
 

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.

 
Global header.png
 

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

 
ezgif-3-be81509c2f.gif
 

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.

 
ezgif-3-5fafeda79f-1.gif
 
 

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.

 
 
editing.gif
 
 

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.

 
lists-onboarding.png
 

I also designed nice empty states for the lists:

 
empty-list.png
 
 

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. 

🎉