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:
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.
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.
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.
I used Framer to explain the different states to the rest of the team:
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.
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.
I also designed nice empty states for the lists:
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.