Quick Overview of User Experience for Web Designers

Nov 2 2011 by Amir Khella | 17 Comments

How many times have you been in the following situation? You just spent two weeks working on a design that you’re showing to a client. He likes it, but he wants to make a couple of changes that would take a couple more hours of work. Why? You don’t know.

He doesn’t know. Nobody knows. He just thinks that adding an embedded map on the right side of the web page is cool. He really likes his own idea and wants you to make the change, and you’re left with one of two options: make the client happy, or make users happy.

We all know who signs the check.

Luckily, there is a third option: Using User experience (UX) to back your arguments.

In my design career, there hasn’t been a project where the client didn’t request to make design changes that felt subjective and unjustifiable, and there hasn’t been a case where UX hadn’t come to the rescue.

UX takes clients off the center of their own arguments, and puts users back in the center of the design, therefore turning subjective (and sometimes egotistic) design change requests into rational arguments that benefit the user.

User experience not only guarantees that designers and clients are moving forward on a common ground, but also aligns future changes and product updates with the original product vision, hence ensuring long term design integrity.

What is UX?

It is a framework where beautiful designs happen as a result of identifying the right problems and finding the best solutions for them.

Contrary to popular belief, UX is not a pure creative process, but rather a rational sequential repeatable process that can be applied to solving design challenges. It is concerned with how users feel when they use the end-product.

Integrating UX into Your Design Process

So before launching Photoshop, or even creating sketches and wireframes, take the following steps to guarantee that you’re solving the right design problems.

User Research

Start by doing some user research to identify the target audience. Whether you’re designing a website or a mobile app, create simple descriptions of the ideal users, their demographics, their technical proficiency, and their goals.

User Stories and Personas

Then write a couple of short stories about how they will use the product to accomplish these goals. At this stage, don’t be concerned with too much detail, but rather try to identify high-level use case scenarios. This activity is called creating personas.

System Flow

Based on these stories, draw a diagram of the system:  a snapshot of the main entities and how they relate to, and interact with, each other.

For instance, I am working on a web app that enables companies to find the right users for early testing, so I created entities for users, companies, and studies.

Then I draw arrows between these entities to indicate relationships such as "a company can create/edit/delete a study" and "users can browse/view/apply to a study".

If you’re familiar with database design, this is similar to creating an Entity Relationship Diagram (ERD).

So far, we’ve been working in problem space: We’re staying at a high level, and we’re not concerned with too much detail. At this stage, momentum is more important than trying to get everything right in each step before moving to the next. Because the process is iterative, you can always go back to a previous step to add or modify something.

Now that the problem and its attributes are defined, it’s time to move into solution space.

Wireframes

Start by outlining all the screens needed, and how users will transition between them. For each screen, identify one or two task to be accomplished, and the next steps to be reached.

Then sketch high-level block designs for each screen, stepping back every once in a while to do a quick walkthrough of the design using the stories you wrote in the second step.

Once the high-level design is congruent with the previous steps, add more detail to each screen, still doing design walkthroughs whenever possible to ensure that the users flow intuitively through the screens.

I often go through all these steps using pen and paper, or a whiteboard. This helps me stay focused on what I want to do rather than being constrained by what an app can or cannot do.

Prototypes

The final step is to prototype some screens, and click through them to get some feedback for how the design feels when it’s live. I usually use Apple Keynote and Keynotopia, and it doesn’t take more than a couple of hours to put something together that I can show to clients and prospective users and get quick feedback about.

Conclusion

Now that you’ve had the client’s consensus throughout the process (or even better, involved the client in the UX process), you have a good foundation to launch your favorite design program and create high fidelity screens.

You’ve also got a great reference to go back to whenever you’re faced with another but-I-like-it-this-way client.

I’d like to end by leaving you with the following quote by systems theorist Buckminster Fuller:

"When I am working on a problem, I never think about beauty. I think only how to solve the problem. But when I have finished, if the solution is not beautiful, I know it is wrong."

Related Content

About the Author

Amir Khella is a user experience designer, startup advisor, and founder of Keynotopia. Over the past 3 years, he’s designed more than 12 startup products, and several of which have already been acquired. You can get in touch Amir on Twitter @amirkhella and through his blog

17 Comments

Roshan

November 2nd, 2011

often I have bluntly refused to what client says because it is against the overall design and usability. If client is wrong, and you know it, you have to say it.

Orlando

November 2nd, 2011

Some good points here. It actually surprised me, in discussions with friends recently, just how many people seem to skip this whole process. I know several people who skip wireframes entirely. I think walking slowly through a UX design process yields a better product in the end.

Cory

November 2nd, 2011

A good angle to use indeed. Being able to communicate from the users perspective is always the best. If they know it will affect end users but still want it, at least you did your best explain your reasoning.

Good post

Rachael

November 3rd, 2011

I thought this was an interesting article, I do think an additional step in here that links to user experience is to research competitors and similar sites. So before you start designing, you can ask yourself what are the things that people commonly expect from a site like this. I think the most important thing though is wireframing, even if its just your basic ideas on paper so you can keep looking at your original thoughts throughout the process.

Mac @ 36creative

November 3rd, 2011

In my opinion user experience is one of those things that is a never ending journey. Constant analysis and tweaking to make sure that path has little to no speed bumps for your users.

Henry Louis

November 4th, 2011

It is an interesting way of explanation regarding user experience role in web design.

Aza

November 5th, 2011

nice information

Thx…

edie

November 6th, 2011

this is difficult i think to implement this process, especially when working with person who doesn’t understand about this process, but this article was a nice stuff generally..

Egor Kloos

November 7th, 2011

Good description of the process. These steps can also fit inside an agile process. You don’t always need to know everything at once. At each stage/sprint you can review the steps mentioned above and identify want you don’t have or rather want you need to complete the sprint.

Jamal

November 8th, 2011

So I guess I’m a UX Designer then :)

John Locke

November 9th, 2011

Great article with a organized breakdown of the research and implementation process. As a blue-collar guy trying to make the gradual switch over to professional web designer, I find any practical knowledge useful.

Jeremiah

November 12th, 2011

Great Article, UX is so vitally important. But this term has been gaining weight. But haven’t we been incorporating the methods in good design for years.
Cheers,

Pete

November 13th, 2011

A nice article but I find the terminology highly misleading. What you call UX is traditionally known as UCD, or user-centered design. When done succesfully, it leads to a product or service that causes great experience for its users.

UX is not a methodology, it’s a goal.

UX now has even its own ISO definition: “ISO 9241-210[1] defines user experience as a person’s perceptions and responses that result from the use or anticipated use of a product, system or service”.”

Maher

November 14th, 2011

I liked your article but why we are using prototype , why we didn’t start in design phase as it will be faster and deploy what im planned from previous steps “workflow, wireframes,….”

Lena

November 14th, 2011

It is an interesting way of explanation regarding user experience role in web design.

Thanks for sharring to us :)

Morgan & Me Creative

November 15th, 2011

Loved this, pretty much in sync with what we do as well. Prototyping is the best way to gauge what the final result will feel like.

ranna azam

November 20th, 2011

really nice things are suggested in this article.using user experience will be a great help for web designers.

Leave a Comment

Subscribe to the comments on this article.