UI Design
11 minute read

Usability and the Art of Portfolio Design: A Toptal Design Talk

Darko is a designer, hacker, and founder with experience in UXUI design, apps analytics strategy, and prototyping chatbots and NLP features.
Read the Spanishes version of this article translated by Yesica Danderfer

In this article, freelance designer Darko Stanimirovic and Toptal Technical Editor Kent Mundle discuss the balance between usability, accessibility, and unique experience in a critique of the website portfolio for Ro-Lu. Ro-Lu is a furniture and landscape environment design studio whose practice has spanned many other disciplines. The studio identifies itself as having a sprawling, open and exploratory practice. Therefore their portfolio had to reflect their ideology.

This project challenges many assumptions of what a website portfolio is, as well as what a user experience might be in webspace. However, many users find that the experimental features seriously compromise usability. Is it okay for concepts to come first? What might this website be teaching other designers about challenging the status quo? Or, have the site simply gone too far?

Kent Mundle (Toptal Technical Editor): Darko, have you ever seen a design like this in web space?

Darko Stanimirovic (Toptal freelance designer): Well, I came to the page without any real understanding of the history of this artist group, or the designer behind the site. So, I was able to see it with fresh eyes. Immediately, I found it interesting visually, the colours and layout are great, but from the beginning, there was nothing to inform me what exactly the website was about, or how to interact with it. I was less inclined to try to learn who the artists were that the site was representing, rather than understand how the site works and how to engage with it.

I imagine that most designers that would engage with the site wouldn’t really like it because of its navigation, it’s unclear where you are, or where you need to go. But, I think at the same time it communicates the studio in a unique way - you can’t unsee it. Even if you come to the site with a specific intent to find a certain project or latest exhibition, the artists and designer behind the site seem a bit indifferent to those needs, and more interested in the experience of the page.

an interesting portfolio design is conceived as a sort of exhibition, rather than simple catalogue of work.

KM: Is this an inherent quality of the type of site being a portfolio design that allows it to break such rules?

DS: Often artist’s portfolios are done by designers, rather than someone leaning towards the developer position. Often these designers have no idea how to execute a product, but it frees the designer to think about the project in a different way. The interesting portfolios, as with this one, are conceived as a sort of exhibition, rather than simple catalogue of work.

Usually, a designer asks, “What’s the goal of my site? Where will I collect emails? Etc”, but instead the portfolio designer feels as though they are being invited to an exhibition to present work conceptually. Therefore, the viewport of the screen is treated as if it were the wall of an exhibition or static page in a magazine or brochure, and the designer doesn’t really think about whether or not the design is responsive, or something.

This website has the sense that the design of a poster or exhibit wall was applied to the interactivity of the web interface. Obviously, the designer was aware of all of the possibilities that web can provide, but these possibilities were used within the mindset of a print sort of design. That’s maybe why we have this huge canvas, with only a small bit of it revealed.

It’s curious none the less though to see the process of this designer, and try to understand how they have combined the different worlds or trends of graphic design with the web. You can see how similar this website is a trend occurring when it was designed, called exposed content. However, although this graphic style was somewhat trendy, how the designers for Ro-Lu incorporated some interactivity into a trend meant for print is very interesting.

Even if a viewer doesn’t understand the work of an exhibition, it may still affect them in other ways that are valuable.

KM: How exactly might we improve upon the navigation structure, without compromising the intent of the site?

DS: There are ways I think to make this site more effective, but I’m not sure how interested the designers were in making it more obvious. There is an attitude of traditional graphic designers who say that they don’t care if viewers figure everything out, as it is a part of the play. As with exhibitions in galleries, there are often no guides to explain how to consume the work. Even if a viewer doesn’t understand the work of an exhibition, it may still affect them in other ways that are valuable. They might still go home thinking about the work without necessarily having understood it. However, outside of this context, to describe the format here are some fixes I think I would make.

First, I would definitely communicate that this is a big canvas, desktop, or board of links. When you first land on the site, you think all that is immediately visible is it. It appears as though there is nowhere else to go.

I would communicate that the user is intended to interact with this board through motion. Perhaps upon entry, you can quickly shift the entire page, just slightly, and leave it place. The user quickly sees that it can be moved, but is able to then go about it on their own. Or perhaps the individual elements can be identified with a slight motion. Maybe a photo steps a little bit to one side, some text to another, and they identify themselves as interactive or moveable. It’s hard to say though without prototyping.

The same issue with the option to zoom in and out, it’s just not that obvious. The buttons are in the top left corner. Although it might be more common to have this sort of navigation in the top right corner, either way, the other text buttons are sort of hiding the important zooming buttons. Somehow it’s been placed in a way that is just too subtle. Somehow, the zoom navigation needs to be more prominent hierarchically or hinted at. This being said I’m not even sure how useful the zoom is. Not much more is afforded once you zoom in, you just have to zoom in. As well, with the randomness of text, there isn’t much incentive to read it.

As with the navigation within the elements and projects themselves, there is some attention needed here as well. I feel as though it’s a bit unclear what to do once within the project. With a tablet or touch screen, the cursor cannot indicate that the main image is clickable for entry into the next stage.

Once you’re finally in, the four navigation arrows are a bit confusing. The left and right on their own seem straight forward, and provide a logical progression. But, adding the top and bottom compromises the whole structure. The scrolls left and right make sense as it progresses through the project. But, up and down all of a sudden there is hidden, important content, that you haven’t seen any indication of.

Usually, the idea of a scroll along an axis implies that the same type of content is progressing. But, here the confusing part is that the elements in every direction are entirely different types of content, so the logic is not very intuitive. Thus, maybe labels would help, but I would suggest removing the vertical axis completely. Although the studio may have requested for this symmetrical form specifically, I think just the linear navigation with perhaps links that continue along at the top and bottom for each project would have been ideal. In terms of the actual content, there isn’t much to change in terms of layout or presentation.

Part of this design is about playing with limitations.

KM: Although the site isn’t obvious or intuitive, are there redeeming qualities that make up for the navigation?

DS: As I mentioned with exhibitions, viewers are never guided through the content. The values of this are likely not things that UX Designers would usually appreciate. Usually, there would be no reason to make things more difficult for users. But, part of this design work is more about playing with limitations, than it is necessarily about product making. This means that the designer accepts that not all people with be able to consume the product properly. However, what results is that the product becomes more of an art piece itself. The goal is something other than “consume all information, read everything, get sales leads etc”. Many designers will only see this site from the narrow perspective of objective goals. Instead, this designer has created a product which leaves an impression of the artists, and their values, intentions, or style, rather than outwardly presenting it. In the context of countless artist’s portfolios online, this could be a significantly effective effort.

KM: So then the unique quality of this experience may warrant the drawbacks of the experiment?

DS: I think that the concept of the loose canvas can be kept while still making the site more usable. To improve the usability doesn’t necessarily mean to fall back into a masonry layout. For me, the main issue is that the user is left to discover the purpose, but again the author may say that this was their intention. There’s some friction in getting to know this site, but maybe that quality is exactly what makes the site so unique. The issue here isn’t quite the same as the design trends that make content less legible, such as light fonts on the white background, because its challenges are intertwined are simultaneously what make the site interesting.

KM: Do the other forms of organization, ordered and archive, provide any relief to this navigational structure?

DS: I appreciate the ordered and archive view, not because of their actual purpose, but because they serve, and communicate the personality of the studio. It almost seems to be more for the amusement of the designers, or studio. The ‘ordered view’ is their attempt to present an easier navigation, but it is almost offered ‘conceptually’ as an alternative, but still has its challenges. Although it’s in rows and columns, you still have to scroll and zoom out as with the big canvas.

The repeating labels confused the gridded organization as well. They appear to be specific project titles, but you actually have to hover to find the project title. It really is amusing that they distinguished the formats as ‘ordered’ and ‘random’, when it almost seemed easier in the beginning.

Archived, however, is the simplest, and quite straightforward as just a list organized by date. Still, they haven’t conformed to the traditional scrolling. The intent seems to be to use the limitations of the web platform in order to provoke the user in a way that they might describe as frustrating, ugly or broken.

Typically, designers have the mentality that a good website should be getting clients everything that they need to know on the first page or first scroll.

KM: If the intent of the designers was, in fact, to provoke users in such a way, does it relieve the site of its drawbacks?

DS: I do believe that much of this is intentional and that the randomness is not, in fact, random as it resembles a trend that has been popular for a while now, called exposed content. But I appreciate that they stick to their scrolling structure, especially with the archive page. The archive may solve many of their problems for meeting the needs of specific users who come looking for the names of specific exhibitions, or work from a certain period. However, this may not speak for all types of users. Typically, designers have the mentality that a good website should be getting clients everything that they need to know on the first page or first scroll.

A lot of the rules change, in terms of how an artist/brand can represent themselves when they are a big name. So this site really represents how they think about their work, their practice, and how they think about presenting it, rather than focusing on presenting in just the most efficient way.

Even if we go to their ‘about’ page, they embed elements that appear irrelevant, such as the thumbnail photos mid-sentence. These bits, to an average person, seem redundant or useless, but it really shows how this studio takes every opportunity to express their style, or who they are - and that’s what artists should do. This site is an example that a portfolio doesn’t just have to let the work speak for itself, but how it is presented can express the values of the individual as well.

Therefore, if this studio did anything more conservative, it would likely be looked over very quickly on the web.

KM: How might the context of a portfolio website, and it’s inherent users, allow or encourage different types of design work?

DS: I think with this type of website, one of the important things to understand as a the designer is how much people will know about the artists before coming to the page. If you already know the studio’s work, and you land on a site like this, you may be more willing to play along. However, there may be people if they didn’t know the artists, and felt confused, that they would leave after five seconds. So, this is the type of website where people will likely have a strong incentive already to be there. Thus, there is somewhat of a buffer for bad usability. Other businesses, they may lose customers.

This is why portfolio sites have a sort of freedom to be fun and interesting. It reminds me of if you drive to a suburban area with many shops. Often all of the signs and posters and done by the store owners, personally. So they often may be fun, or crazy or stupid, and to me you can immediately see the person behind the business in every decision made about the sign: the colour, the type, and any fun additions. Although, some artists may ask for a WordPress template and that’s it.

Do we sacrifice usability for originality or vice versa? How do we find that balance? It’s a difficult question.

KM: Although much of what is being challenged in this website is specific to the portfolio type of content, are there lessons that can be applied in general to web design?

DS: Although the portfolio site is inherently more flexible, in that they don’t always have to communicate everything perfectly. But, this website does show that experimentation in web design is possible and that it’s needed. This website transcends web design from what a screenshot can show. A screenshot of this site would look broken, or unfinished, but users can discover it to open up an interactive experience. Most web designers start a mock up on things that are not interactive, and this website would be impossible to conceive in that way. So, I think that it’s important that we analyze what this website is trying to do, rather than shy away from it because it clearly isn’t easy to execute.

The Web still has its limitations, but often web designers take them too narrowly. So, this site can prove how to begin to expand the possibilities. We should not disregard this as an artist, portfolio site, where a designer can do whatever they want. We should be inspired by the site, and maybe for our next project we try to take the limitations of the viewport, that this designer has challenged, and open them up. The question then for us really becomes, how do we do this without breaking usability. Thus, for designers to explore a precedent like this, we can definitely now challenge ourselves to do something unique.

KM: Often, of course, it’s difficult to reinvent the wheel within the limits of budgets and timelines.

DS: Yes, often those restraints force designers to safely resort to making what is already out there, or what people are used to. This speaks to a wider discussion of the importance of originality in web design, and understanding those advantages, or disadvantages. Do we sacrifice usability for originality or vice versa? How do we find that balance? It’s a difficult question.

The Ro-Lu website was designed by Dylan Fracareta and Eric Price. Fracareta Fracareta runs an independent design practice, focusing on design for art, architecture, fashion and cultural sectors. Price is a graphic designer and programmer with a focus in digital media, publications, and identity design for the art and cultural sectors