Fighting the Pretty Picture

User-centered design at 500px.

If you are a designer reading this, you’ve probably heard the expression ‘pixel-pusher’, maybe even addressed to yourself or to one of your designer friends. If you are not a designer you may or may not be familiar with the term, but you might have heard them saying something like “design is not just a pretty picture”. Well, it is not, and a ‘pixel-pusher’ is not what someone should be called if they are a good designer.

500px is a photo sharing platform widely known for its sleek interface and breathtaking content. This is the visible part of design iceberg that is doing good enough job attracting new users. However, what makes them stay (or leave) is the part hidden from users’ eyes — which is hours and hours of hard work — researching, brainstorming, sketching, wireframing, fighting over ideas, and winning… well, and a bit of pixel-pushing of course.

How do you know which button should be blue and which one green? What does define the choice of colour, shape, font, spacing, placement, and even the language? Artistic taste is one thing, common sense is another, best practices and design conventions are the third, and users themselves are the last but in this case the most important.

As a community we have to design everything with users in mind. Our people and their photos are the core of our product. If there are no people there’s no community. At the same time it’s hard to follow people’s needs and be innovative. How do you find out what people want without getting faster horses as an answer*? People don’t always know what they want or like but when they like something, they know it.

Good thing we’ve got a few tricks over here.

Interviews

The first approach is very straightforward. Ask questions, listen to what people say, watch what they do, take notes, analyze. Rinse and repeat. Usually after 3–4 sessions you start seeing a pattern, if after 5 you don’t — you are doing it wrong.

Unlike focus groups (the exercise when a bunch of people gather to discuss their ‘feelings’ towards the product) that used to be popular in the advertising world and proved to be too subjective, user-testing is objective and admittedly useful. You can’t test the esthetical component of the design (because people don’t always know what they want), but you can test functionality.

The trick is to trust your eyes as much as your ears. By asking a person if they prefer blue or green all you’d achieve is find out this one person’s personal opinion. But if you ask them to perform a task, such as upload a photo or create a discussion, their actions will speak for themselves. You only need to be patient and don’t take the feedback too personal.

Card sorting

When designing a navigation for the new product on 500px called Groups we had a serious challenge —there were a lot of different content types that needed to be organized in a simple and intuitive way.

There were groups created by you, by your friends, photos uploaded to these groups, discussions created around them by people you know and don’t know. All-together it made over 20 different units of content that needed to be grouped into a navigation that made sense.

There were suggestions to divide the content by type (groups, discussions, photos), by source (my groups, my photos, friend’s photos etc.), and by needs (discover, search, follow up).

When solving this puzzle we used a kick-ass method called card sorting. It’s awesomeness lies in its simplicity. All it takes is a pen, paper, scissors and a few users familiar with the product.

We wrote everything on paper cards and asked people to sort them into as many groups as they wanted and then name each group. After interviewing 11 people we ended up with 3 distinctive buckets. Even though people called the groups differently, they pattern was pretty clear.

After interviewing 11 people we saw a clear pattern

The next day we gave the same cards to another 10 people people and asked to place them into newly created buckets to validate if the division made sense the other way around. It did.

“Where would you go to see replies to a discussion you started?”

We ended up putting the most relevant information upfront and hiding the least important but still necessary information by breaking the content down based on whether and how often it gets updated.

The way to split the content: what matters and what doesn’t

It seemed less mathematical but more intuitive. It was not perfect in terms of its logic. Same as humans.

Final version of Groups home page

Guerilla testing

Organizing a proper user testing session takes time and preparation. The bigger the company grows the more process it acquires, the longer it takes to get things in place. Good thing about 500px is that it still praises this wild startup spirit that allows for spontaneous decisions and fast implementation.

When redesigning the new home page the team had hard time constraints. The one thing we had plenty of was our assumptions. We sort of knew what was wrong with the old page, but we didn’t see the full picture. Time was running up. “Let’s just go to Starbucks with a laptop and ask people” somebody suggested. So we did.

One thing a homepage needs to do is sell the product. If it doesn’t explain what the product is (alternatively intrigues the user enough to go learn it themselves) it doesn’t do the job.

The first question we asked random passers-by was “what do you think this site is about”. We got all kinds of guesses from ‘Facebook for photos’ to ‘instagram for professionals’. Funny enough ‘professionalism-ity’ was the biggest issue. While expected to introduce the product for everyone, our cover page was insanely intimidating. The other revelation came with somebody asking if it was just the 3 of us (who did the testing) working on the startup. For a platform with over 5M users at the time is was a shame. We did not show our scale, we did not look credible while frightening those who might have wanted to join us with the opulence of our HDR landscapes.

Blown away by the feedback we got to the office and redesigned the page.

And then went back to the Starbucks.

They say, the attention span of nowadays users is shorter than 5 sec. “Is it a travel site?” asked a millennial girl after the first glance. Facepalm. ‘Facebook for photos’ was way more flattering. Rinse and repeat.

Closing

No matter if you are a designer or a person working far from the creative field you might have heard that form must follow function. We all strive for beautiful design. And as it turns out it’s not all that hard to make something pretty (assuming you are an artist). Neither it is hard to make something work (assuming you are an engineer). What is hard is to make it both beautiful and functional. It takes a team, patience, knowledge and constant feedback.

Sometimes you spend hours writing the perfect copy, just to realize that people don’t read; or days refining pixel graphics, making sure iconography and spacing is consistent just to learn that the flow logic is so confusing that most people will never find your beautiful creation. The majority of users won’t be able to explain to you what they like or dislike about the design but they will always feel the difference.

Next time when after spending weeks perfecting something that has never been in use, you feel that you are too smart, give the product to real people, it won’t take them long to prove you wrong.

Rinse and repeat.

* Henry Ford’s quote “If I asked people what they wanted they would have said faster horses”

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.