Design A Better Website: Foundations First

How many times have you finished a project, only to look back and then say, “Man, if only I knew the things I know now and I could go back in time and redo it over again.” I know I have.

It happens to all of us; we get excited about a project. You make jokes with the client about the current website, contracts are signed and you start mocking up prototypes. On small projects you might get away with this. On big projects, changes and scope-creep will start sneaking up on you as soon as you do your first presentation. If you ever do end up launching your project, it will most likely resemble the monstrosity you were hired to fix. It might only just look a little better.

Good design and user experience begins not with a pretty mockup, or even layout, but with a concept foundation that focuses on company goals. And those goals are not “let’s make a prettier and simpler website.” Since you are responsible for UX and UI, (User Experience and User Interface) it’s your job to make sure users have the best experience through the interface that you design. To do that, everything has to be thoroughly planned out from the beginning.

Initial Website Design Research

After the initial research of the client’s field, as well as their competition, I inspect what we have to start with. I have a separate cost just for this analysis (it’s then included in final quote) before I ever quote a project. This avoids ambiguous high quotes with hope that it will cover whatever is discovered later.

Today my client is a non profit organization in an archaeology field. They explore and protect archaeological sites in the south west. Their current website is a monumental achievement in disorganization. Imagine mountains and mountains of unorganized horded content inside an ancient cms portal. Thus, the first step is to organize what we have.

Step 1: Familiarize Ourselves with the Content.

When you need to build a new house you don’t tear down the old one without first taking out things that are inside. Our first goal was to go inside all of the rooms, and take out all the content. In design speak, we needed to go inside and figure out what content deserves to be a unique post type and what pages are static.

We can then come up with a strategy on how to best organize this. The reason we are not checking to see what should stay and what should be removed first is because in the real world this can’t be done right away. There are different people responsible for different parts of the site and there is too much unsorted content. Our best bet is to classify it first.

I usually start with the main navigation and go page by page. This way, I have a site blueprint before the first meeting. This was not the case with this project, most links were not accessible through top navigation and where hidden within the content (you’d be in for a treat if you just quoted the project based off their navigation). Only by talking to different people on the client’s team was I able to get a better picture.

Finally, I had a brainstorming session with the client, where I asked them to identify their current website focus, workflow, site content and features. We then came up with the following core types (some are new and some were already in place):

The most difficult part was that the majority of links were not accessible through top navigation and were hidden within the content. Only by talking to different people on the client’s team was I able to get the whole picture.

Step 2: Create focus, simplify and organize.

Now that I had all of the content out of the house and placed it in boxes with labels, it was time to come up with the blueprint for a house that will showcase our content in its best form. Before we get to that though, we need to create focus.

According to the client, its users visit this archaeology website for research information about its projects, learn about ongoing events, as well as read its monthly magazine. Even though these content areas are where visitors end up, it’s not what the website revolves around; in order to find the focus, you have to look at the organization’s core.

I pinpointed that “location” is at the heart of all this content. Without location there would be no archaeological sites, ruins, museums or exhibits. At its core, everything in archaeology relates back to a location.

Now that we have our focus it’s time to simplify and organize. Next, I further broke down the content into things that were not related to locations, such as team pages, annual reports, and so on. After a little tidying up we ended up with this rough map:

As you can see now we have two core areas: “Things to Do” and “Locations.” “Things to Do” covers everything you can do in the organization while “Locations” focuses on content that’s related to a specific location. The idea is that an average user might not know the name of the video or a project but will likely know the location it relates to. For example, by going to a projects page, a visitor will find the desired project through its location.

Additionally, each color represents a unique post type. I realized that from an organizational perspective, events, exhibits, classes and online exhibits are all, essentially, events, just different kinds.

In the current site there was a static page for a magazine as well as a store page. I decided to eliminate the extra step of going to the store page and, instead, have a unique template for magazine store items. The rest is pretty straight forward: An about page to learn about the organization; a direct link to the store; a donate page (because those pages make money and need a place in the main nave), plus new pages for updates and a direct link to the store/donate. Those pages make money, so they deserve a place in the main navigation. We have created our organization blueprint, now it’s time to connect actual content to it.

Step 3: Looping in the Client

As you can see from the site map above, it only includes the page types but not the mapping of content. And, as you probably already know, most of issues occur when the client starts adding content to its site. To avoid this, the client is looped in from the beginning. I created a Google doc that included the sitemap above and asked the client to map its current content to the new structure.

If something didn’t fit we figured it out later. This is a critical step as it not only gets the client involved but it uncovers issues with structure before implementation begins. In this case, some of the site map menu items were changed, and since the client also had many different donation pages, it made sense to create a unique post type just for that.

Creating Visual Structure Through Wireframing

Now, it’s time to give all this a visual structure. To have the system function successfully, and to take the idea of “everything is related to location” correctly, I created a bidirectional relationship between post types.

The idea is this: When a visitor comes to this archeology website and picks the Grand Canyon, not only will she see information about that location, but will also find the projects, events, exhibits and anything else that the client marked as related to that location. Since the link is bidirectional, visitors will also get to the Grand Canyon from visiting a project page, too. So, I ended up with this:

The locations index page showcases all locations with the most recent at the top. The search bar is the first thing the user sees when they get to the page. I envision that upon entrance the google map will take up around 80% of the screen, so users can pick points on the map, then as they scroll or search the list grid will come into view.

On a single location page main body is on the left, since it’s the most important information and related meta information is secondary, so it’s on the right. When designing a layout, to achieve good composition you always want to have very distinct primary, secondary and third element blocks. This way your eye will follow from one to another instead of getting stuck on a page.

Therefore, in our layout, the user’s eyes will start with the header, then move to the content block, followed by the right sidebar. Each piece of related content is displayed in order of relevance and importance. If the user is reading about the Grand Canyon, for instance, it will likely be followed by photos and a map.

This is chiefly an educational site, so “Related to this location” comes next. Since the client doesn’t have much that’s uniquely associated with each location, I combined seldomly used related content into a single block under the body.

Placing magazine and video thumbs under related content adds additional visual elements and directs users to the “buy” page. The page is completed by showing related locations since this entices users to further explore the site.

The next step is to continue this structure for other post types. Here are a few of them:

Now that I have a general model for the post types, I can focus on the home page. Just as with all UI, the first step is coming up with the goal for the home page. The client’s research showed that many users stumble upon the site without fully understanding what it is. Therefore, an introduction and welcoming text needs to be the first thing users see. The new, core focus revolves around locations and that should be the secondary block, followed by what’s going on at ArchaeologySouthwest.org (the current magazine, blog, events, newsletter and so on). Here is the iteration of the layout process:

With V1, I came up with a basic layout that resembles the original homepage. There is not much hierarchy; the first thing a user will see is the featured location and then he will get lost in the columns. With V2, I created a separate column that makes it easier for the eyes to follow. However, it can still be improved. This is where knowledge of the content plays a major role. I know that ArchaeologySouthwest.org doesn’t have more than two events going on at a time, so it doesn’t make sense to have many on the home page. In V3, I focused on the upcoming events so that if there will be more than two, the user can click a ”More” button and see the rest. I also put additional emphasis on the current magazine since it’s the client’s moneymaker. Users start at the top and using an F-pattern, move down. So now, the eye flow is Featured Location > Welcome > Magazine > Events > News.

Now that I have a visual wireframe and structure of the site it’s much easier to solidify features and how things will work. I have another meeting with client to go over actual functionality (which now comes to light) and flow of user interaction. I know there are still going to be tweaks in the end, but they will be tweaks and not entire process changes. Most important is that there will be no surprises.

Website Design

Now comes the exciting part. Converting the wireframes to something that people will use and experience. Using this design, I wanted to reinforce the flow further by using brands colors and typography. The client’s style guide is as follows:

Start with Typography

Typography is the foundation of a good design, that’s why we figure it out early. Most of their identity uses Univers Condensed Light and Adobe Caslon font. There were no rules on when Adobe Caslon was to be used, but I noticed that it wasn’t used as often as Universe. I conducted a small font study to see what pairings create the best feel for a professional humble non-profit organization without looking too different from their current collateral.

Upon doing font comparisons, it’s clear that Adobe Caslon will work great as a title font, and Universe for sub titles. By having our main titles in sentence case gives the brand a more personal feel. Having it in all caps makes Archaeology feel too much like a corporate institution.

For main headings I’ll use Adobe Caslon, and use Univers Condensed Light for everything else to match their current branding collateral.

Creating the Look and Feel of the Website

I wanted to create a light and open experience for users who should feel that this nonprofit organization takes them seriously without being cold and corporate. Based on analytics data, the majority of visitors arrive from desktops (probably because most people visit the site for research) and therefore, my initial focus was on designing for desktop users. This turned out to be the final design:

When arriving from a desktop, I wanted users to see immediately the featured location, welcome text and the upcoming events followed by part of the magazine title. This way people see what the company is about, and what they are promoting before they have to scroll on most laptop devices. By using a soft shadow on the left column it gives it more focus and solidifies the hierarchy.

On mobile devices, the priorities are a little different; since users are accessing information on the go, the Events are more important so they are higher on the list. The complete layout ends up like this:

I updated the donation button in the footer to be more friendly by changing it into a sentence instead of a button.

Creating the Rest

I can then apply this design concept into our other layouts as well.

We know for certain that users come to the details page for two reasons: either they want to learn more about the landmark, or they already know about this location and are just looking for information (directions, phone numbers etc). Therefore it’s important to present both options right away so our users are not searching for it.

I decided to break out the details column out of content area to give it more weight as well as make the page more interesting. This helps to create a compositional hierarchy so when user comes to the page they see the title first followed by gallery images and then meta details column. This insures that they will notice additional meta information right away. A little bit extra padding the column keeps the eyes within it and makes it easier to skim down through information.

The client does not plan to have many videos and magazines related to each location, therefore we are only showcasing 2 items and if there is more they can click the link.

The Mobile view collapses as you would expect with the content wiping first, and then the meta information. I made the videos and magazines last on our mobile page since they are least important for mobile users. Other inner sections follow this same structure and wireframes to create a consistent flow and experience.

Looking back at the design process you can see that the majority of the time was spent organizing and planning. Whereas only 30% of the time was spent actually designing. Often when designers show their work, they are dishonest about how much time is spent on google docs organizing, rather than doing pretty mock ups. Thus, many other designers jump straight into mock ups and end up with derailed projects and unhappy clients. There is no one way to plan, it just has to be done if you want to have a successful project. Let me know what your process is, and how it differs - I’m excited to see the workflows of others.

This post was written by Alex Guverich, Toptal Freelance Designer 

Usability Past Its Breaking Point: A Toptal Design Talk

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.

Toptal Technical Editor Kent Mundle Interviews Toptal freelance designer Darko Stanimirovic

This project challenges many assumptions of what a website portfolio is, as well as what a user experience might be in web space. 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, has it simply gone too far?

Kent Mundle (Toptal Technical Editor): Darko, have you ever encountered an interface like this?

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, rather than understand how the site works and how to engage with it.

I imagine that most designers who 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 forget it. Even if you come to the site with a specific intent to find a certain project or latest exhibition, you are hard pressed to find your way around. The artists and designer behind the site seem a bit indifferent to the typical needs of the user, but rather more interested in the unique experience.

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

KM: Is this an inherent quality of an online portfolio project that allows the design to break such rules?

DS: Often artist’s portfolios are done by designers, rather than someone leaning towards the developer’s role. Often, these designers have no idea how to execute a product. But, they’re free 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 a simple catalogue of work.

Usually, a designer asks, “What’s the goal of my site? Where will I collect emails? Etc”. 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 all of the user’s needs.

“Usually a designer asks: What’s the goal of my site? Where will I collect emails? Portfolio design can be an opportunity to relieve these standards.”

This website has the sense that the design of a poster or exhibit wall was then fit to the web medium. Obviously, the designer was aware of all of the possibilities that web can provide, but these possibilities seem added onto the mindset of a product in print. 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 this designer’s project, and try to understand what they have achieved by combining the different worlds of print and web design. You can see how similar this website is to a trend called exposed content. I’m not sure if the design is genuinely striving for a unique experience, or just applying this trend. However, whether or not they plugged this trend in, how Ro-Lu’s designers incorporated some interactivity into a print-like web page 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 one improve upon the navigation structure, without compromising the initial design intent?

DS: There are ways I think to make this site more effective, but I’m not sure how interested the designers were in making the navigation more obvious. There is an attitude of traditional graphic designers who say that they don’t care if viewers figure everything out, as if it is a part of the fun.

For example, 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. This may be exactly what an artist would want out of a portfolio/exhibition. However, outside of this context, there 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, and that nothing is clickable.

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 then able to explore. 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.

Similarly, with the zooming option, it’s just not that obvious. The buttons seem hidden in the top left corner. I feel 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 as well. 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, not much more is afforded once you zoom in. You really just feel more lost. As well, with the randomness of text, there isn’t much incentive to read it.

There is some attention needed within the projects themselves as well. I feel as though it’s a bit unclear what to do after selecting a 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, scrolling along an axis implies that the same type of content is progressing. But, here the elements in every direction with entirely different types of content is confusing. 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 portfolio 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 will 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 really positive thing.

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 friction 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. Therefore, there aren’t really any absolutist rules at play here.

• 
• 
• 

“The designer accepts that not all people will be able to consume the product properly.”

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 continue to serve, and communicate the personality of the studio. It almost seems to be more for the amusement of the designers, or studio, that these ordered views are still tricky to navigate. The ‘ordered view’ is their attempt to present an easier navigation, but it is almost offered ‘conceptually’ as an alternative, as it 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 confuse the gridded organization as well. They appear to be specific projects, 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.

The Archived section, however, is the simplest, and is a straightforward list organized by date. Still though, 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: Can the good intentions of a designer relieve their product of its negative qualities?

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 though for clients with a popular 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. So, for that I would commend the studio and their designers.

“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.”

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 thing to understand 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 to already be there. Thus, there is somewhat of a buffer for bad usability. As with 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. To me, you can immediately see the person behind the business in every decision made about the sign: the color, 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 project is inherently more flexible, in that they don’t always have to communicate everything perfectly, 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 artsy 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 recreating 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 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 on digital media, publications, and identity design for the art and cultural sectors.

Note that this article was transcribed from a spoken interview between Darko and Kent. This article was written by DARKO STANIMIROVIĆ, a Toptal developer.