Fran Rosa

28 March 2017Last update: 23 May 2017

Case Study

Super­files: Creating Brand Value With Inter­face Design

Español: Superfiles: Creando valor de marca con diseño de interfaz

Problem

I had to design a new software discovery and download site from scratch, for a company that already owns several similar sites. And of course the new site has to be different from the rest.

Also most of the sites are outdated and have to be renewed, so the new site had to set the new standard, and be used as an example of the company's sites in the meanwhile.

Goal

A new interface being responsive, easy to use and understand, with a strong visual identity, to use the site as an example and create brand value for the company.

Process

The other software sites of the company are technically — and visually — outdated, and bloated with mixed quality and poor content. So we started defining a content strategy and creating new content for a limited set of curated software and, with that content, we defined structure and navigation.

Having Superfiles as the name and domain for the project, superhero comic style was a perfect concept, and with a rich history of graphic styles to let us make an UI visually attractive and engaging.

Knowing the importance of creating a strong visual identity, we started with a logo. And that was a mistake. When working in user interface design for an existing brand, balancing a clear and easy to understand interface, with the aesthetics and graphic elements of the brand is always hard. In this project, where the interface itself is the brand, creating an isolated logo was only a constrain with no benefit.

So after that false start, we started over again, this time from the bottom up.

Although we were working with a limited set of software, complexity was an issue. Every software application has a card with a review, and many other details. So hierarchy in software cards was the first step. After that, choosing which information should be used on lists of cards — on the home page, for example — was next.

I prioritised simplicity, and a good visual hierarchy using typography size and contrast. I also let visual content — application logos and interface screenshots — fade into the background, to let the site brand shine.

Contrast and hierarchy in application cards

The site was still lacking of a visually striking element. The idea of having a bold header in a superhero comic style was tempting, but moving the attention and the action to the content area instead of the site's header was necessary. I went for having some illustrations to be used on category headers and as a background for cards on the home page.

A colour coded interface using different colours for each operative system — being those the first level of navigation — would allow me to use strong graphic elements in each colour, using monochrome colour schemes.

I rejected having an original superhero, both because the risk of it being similar to an existing character, and because I wanted to use the illustrations as a background and I wouldn’t be able to see more than a small part of it. I could also use landscape backgrounds, but it will be lacking the dynamism of comic illustration.

Using single actions not having the whole figure but using hands as an expressive detail resulted perfect. I made three illustrations — one for each of the OS.

Illustrations

Conclusion

At the end, there was almost no logo. Slant typeface by House Industries has a lot of character, but the site name and header is almost non-existent, and visual focus is always on the content area.

Details like the small graphic showing applications' rating, and balancing use of colour was crucial in order to achieve the final result having a clear contrast and hierarchy.

Final UI design

I am very happy with the final result of this project, but the most important lesson is creating a visual identity for a new brand — or working on an existing one — has to be flexible and there is no solution-for-all. Brands — specially those that live almost exclusively online — need art direction more than they need applications of their logo on everything.