The evolution of Alfred App

As Alfred App turned 5 years old last week and I've been lucky to work on the design, branding and UI during that period, I thought I would document how it has evolved.

Alfred beta

When Vero and Andrew came to me in 2009 with an idea for a new quick launcher for OSX, I jumped at the chance to create the original branding and website. They had a name –Alfred– but nothing else, so we thrashed out some ideas. Alfred is a quintessentially British name, so it inspired us to go with a classic bowler hat with an old-style magnifying glass for the app icon. I then proceeded to sketch out some initial ideas and throw some shapes in illustrator. Having never worked on an app icon for OSX before, I had to research best practices for formats and tools to create the icon. It also involved learning how to use the mesh tool in illustrator, which can be rather daunting when you've never used it before. We worked through some iterations shown below before we settled on the Alfred beta icon.

Alfred Beta Icon Ideas
Alfred Beta Icon

The next thing we needed to work on was the website. It had to be simple (reflecting the app itself), impactful and beautiful. I went with a simple 2-colour design with centered text and some small decoration items. The beta version launched in March 2010.

Alfred Beta Site

It went down quite well within the design community, even drawing the attention of a few 'web celebrities'!

Beautiful, simple, focused site:

Jason Fried (@jasonfried) March 9, 2010

Alfred grows up - v1

The beta period was very well received by the Apple community and Andrew and Vero continued to refine the UI and add features based on the feedback from the beta launch. The version numbers were growing rapidly and we were nearing the launch of v1 in 2011. With this came a need to re-design the website and work on some of the interface iconography for the new features. We decided to keep the icon the same for now and just focus on a fresh look for the website plus the introduction of the Powerpack. I also worked with Andrew on some of the UI design for the Powerpack features. Andrew, who is also an excellent UI designer as well as a developer, already had most of the UI planned out so we just researched some ideas together for various aspects of the interface. A lot of this work was simplified down or shelved in the end but it's interesting to see some of the work in progress.

Alfred Site V1
Alfred V1 Search
Alfred V1 iTunes
Alfred V1 Icons
Alfred V1 System Icons
Alfred V1 Install window

We also added a few variations on the Alfred icon for other features or marketing campaigns.

Alfred V1 Logo variations

Alfred V2

Alfred V2 (2013) gave us the chance to not only refine and iterate on a lot of work we had done before, but also give a fresh lick of paint to the App icon and iconography. For the Alfred icon, I played around with new textures for the hat and better lighting, but the main focus was on making the magnifying glass look more realistic. I experimented with thick and thin bezels, leather textures, new lighting sources for the metal frame and even gold!

Alfred V2 Logo ideas

In the end we settled on a thinner bezel silver frame and adding a new leather texture on the handle, with better lighting and shadow effects for the glass and frame.

Alfred V2 Logo final

The iconography needed updating for the new retina screens that were just being released. Luckily I had done all the originals as vectors so it was just a case of redrawing a few to make them look more realistic and then updating the sizes and tweaking some of the paths to make sure all the pixels looked sharp and crisp.

Alfred V2 Logo icons

For the website, Andrew & Vero didn't want to completely overhaul the look and feel we had defined with V1, so it was more a case of giving it a fresh look and bringing it up-to-date. We stripped it back to be more minimal and refined with small hints of the Alfred wallpaper and other decorative elements. It was also built responsively to work across all devices. Alfred V2 launched in 2013.

Alfred V2 site

Alfred Remote and beyond

Late last year and early this year, I got to work on Alfred's newest product: Remote. The website needed to fit in with the current look and feel but also stand by itself as a separate micro-site. We used a fixed header photo led approach with a new intro video and a simple stripped back layout for the rest of the page.

Alfred Remote site

So there you have it, an overview of how the Alfred brand and design has evolved over the last 5 years. Who knows what will happen with v3?

This article was filed under: Alfred app, Design, Evolution, Iteration