My UX Designer’s Workflow & Methodology

Posted on Sep 17, 2011 in writings

I finally have decided to write an article on the methods I use everyday of my designer’s life. It basically explains the main steps and workflows used in a project lifecycle from a UX Designer’s perspective. The main concept is to try to use developer’s methodology and apply it to the design field. UX Design is cartesian, emotional and socialDon’t hesitate to give your feedbacks.

All the subjects described here can not be applied to every project. Some needs more focus on a particular point than others. Also depending on the resources and budget the steps can change. The idea is really to give a bird’s eye view of the main phases of a project. There are no golden rules that works everywhere.

What is a UX Designer?

What is the exact role of an User eXperience Designer?

“Because we have to understand so much of what our peers do, and because empathy is at the core of our values, we are in a unique position to be the diplomats and translators within our fragmented teams” Aaron Walter

Many people already explains perfectly what is a UX Designer.

  • UX Designer deals with many problems & people. Their role is to understand the different aspects and collaborate with all the other parties (technical, marketing, direction, end-user, clients). It is about a broad knowledge. He is a diplomat. From The expanding Role of UX Design, by Aaron Walter.
  • They need to be excellent communicators and facilitators, as they often help bridge gaps in communication between other organizations. This also means they need to be able to speak the language of development, marketing, manufacturing, sales, and, of course, users. From The Skills of UX Professionals, by Robert Reimann.
  • Check out also the 5 guiding Principles for Experience Designers, by Whitney Hess.

The UX Designer has an enough broad knowledge to understand the different aspect of a product. His mission is to translate those elements into a great interface that serve the user. He is a graphic designer, who has an extensive knowledge and experience of the market he is working on.

He is the guiding thread of any project that have an user interface.

The Workflow

1. Before the Project

1.1 Define the Product Strategy

1.1.1 Ideation

First of all we need some fresh ideas to create a new product or improve an existing one.

This is the ideation Phase : how to facilitate and encourage the creation of better ideas.

Many great techniques exist.

My favorite : travel, open your eyes, listen to the user and discuss with other people. Don’t be afraid of sharing ideas.

Other great ones: see Johnny Holland’s blog post and What is Ideation ? from LukeW.

1.1.2 The Strategy

The strategy needs to answer precisely those questions:

  • For What? The service description.
  • For Who? Very very important question here. Every product is targeted to someone. If you understand who you talk to and adapt your communication/language to this person, you’ll reach the goal.
  • Why it is good? What is the added value for the customer.
  • How it is better than the other? The added value compare to the competitors.
    • Is it a new product? We absolutely needs to understand why nobody has done it before. There has to be a reason. Try to find out why.
    • Is it an improvement of an existing product? Highlight the pros & cons of the current product. Listen to the feedbacks from real user of the product.

1.2 Study of the Target

  • The market, the environment : make some research and find out data on the protential market the product is addressing to.
  • The competition: create a benchmark with the main competitors. Highlights the features, the strengths and the weaknesses.
  • The user, i.e for who. Yes again we need to ask ourself this question. Who will use the product. We should create personas here.

A persona template example page

1.3 The feature List

Now we can create a feature list which will highlights the details of the what for discussed above.

We have to iterate that list to keep only the essential. The bigger is the feature list, the more we’ll have a problem on our product at some point.

Now we precisely know what the product will do and for who it will be targeted.

We also know what is the competition, why some are a succeed and other fail.

Eventually we have a precise idea on what is the killer feature and why it will be better than the competitors. Excellent, we’re in a good way.

The Tools of the trade:

  • For brainstorming, and almost everything : A mind-mapping tool.Use a collaborative one or at least an open source that works for everyone. Pay attention to the export format available. I use XMind for now. I like it because it is fast, cross-platform and it has many keyboard shortcuts. Also xmind files are XML files. Extra versatile. My only regret is that it is not collaborative.
  • For the benchmark, graphics and studies : Excel obviously.
  • Compile everything into a powerpoint in order to communicate and exchange ideas to other parties.
  • A general rule is to use tools that can be used easily by a broad audience.

2. The project

2.1 The Information Architecture (IA)

The IA is the foundation for every medium/large scale project. It is a document that unify all the information about a project. So far I found that the best way to represent it is indeed a mindmap (oh yes again…).

The IA goal is to summarize, organize, categorize and unify all the content and the way to represent it.

It is not just a sitemap of a website. Many more information will be included here. And remember we never work alone so it is very important to create a solid taxonomy in order to be understandable by the other.

The legend I use for the content architecture

The legend I use for the content architecture mindmap

The image above is an example of a legend I have added on the mindmap file of a project when collaborating on the information architecture. By labeling every kind of information, it is easier to have a clear view on what will be done, what will be outscoped etc.

How to translate the Information Architecture into something tangible

How to translate the Information Architecture into something tangible

You can see on the image above how the information architecture works and how to translate it into understandable things for the different parties (copywriter, developers, project manager, clients).

At the end of this stage we will have a document that summarize all the content of the product and how it will be translated into a user interface.

An Information Archtecture mindmap example for a contact book app

Ex: an Information Archtecture mindmap example for a contact book app

 

2.2 The Wireframes

2.2.1 Knowledge

Know everything about User Interface (UI) rules, the UI components and how to solve problems of the most common interactions. Read Books. Follow websites.

Find inspiration on how others solve most common UI problems.

Some resources:

2.2.2 Make mockups

The ideal first mockups are on paper. But you’re not obliged to stick to that. Use what is the best tool for you.

The objective is to get a rough idea on how you will create your interface. How to translate the needs in the UI language. But very roughly and very rapidly.

Great tools are the one you can collaborate with, share with others and are not limited in term of components.

Balsamiq, mocking birg, Cacoo, and paper of course.

When you finish this step, try to review them with some fresh eyes. Take a break, wait one day and ask yourself those questions :

  • Does the mockup highlight the main objective of the product?
  • Is that clearly understandable?
  • Does the secondary features pollute the interface?

If not just redo. Again and again.

2.2.3 Make wireframes

Wireframes are really more precise than the mockups. I tried to have a pixel-precision on wireframes. It is important because it will be the basics of the html. So even there are no graphic design yet, the layout you will get in the final design will be mostly the same as in the wireframe. So the front-end developers can begin to html-ize some wireframes without waiting for the final design compositions.

From this point everything we create will be re-used. If the Information Architecture is the foundation of the app, the wireframes will be the rooms and the living area (and the design will be the paintings, furniture and decoration).

Use grids on the wireframes (960.gs etc.). It will help to get a consistency of the design, and to save the developer’s life.

I personally use Adobe Illustrator for wireframing. I love how fast it is to create wireframes. You will never be stuck because the library doesn’t have the components you need. You can design everything. It is extremely customizable. With art-boards included since the CS version,  you can now export different pages as single PNG. Easy to create, easy to update, easy to export. Awesome.

Illustrator for Wireframes

Illustrator for Wireframes

Fuzzy has made a pretty good summary of how a wireframe should be, check How to design a Wireframe.

The idea of course is to re-use all we have done for the next projects. I have templates for web, mobile, tablet, Facebook applications.

I also created my own “framework” in Illustrator that contains all the important icons, UI components etc. My personal component library. I just need to make a copy and paste to use a fully customizable drag&drop list! And of course it is perfectly linked with Photoshop. Great for the next step : the design.

Create your Framework in Illustrator!

Create your own framework in Illustrator!

Wireframes can not live alone on their side. It has to be passed to others, have some feedbacks. In short we have to annotate, comment and explain what we have produced.

For that purpose, sometimes I just add the comments on the wireframe artboard itself or I import all the exported wireframe PNG into InDesign. Then I add comments, annotation, explanation and finally produce a PDF.

Other web-app-based tools exists for commentating and annotating. It also enables to create a real discussion on the wireframes/design compositions. I’m particularly thinking about Notable or Adobe CS Review. The ideal tool would be directly integrated into the wiki used for the project management in order to keep everything at the same place. If you’d like to know more similar tools, check out this article from UX Booth.

In the end it will become a kind of visual-functional specification document. Extremely useful and really more understandable than the usual 40 pages functional specification word document. Developers/Clients/Marketing loves it.

Annotating the wireframes

Annotating the wireframes

2.2.4 Flowcharts etc.

Flows are very useful to describe interactions.

Flowcharts are used for generic interactions with lot of  if. UML applied to the design.

Flowchart example for a signup process

Flowchart example for a signup process

 

Wireframes Flows: those are useful to highlight the user’s journey into the app. It is basically the wireframes (or the design) mixed with a flowchart with some annotations.

Wireframe's flow highlight the user journey into an app

Wireframe's flow highlight the user journey into an app

2.2.5 Prototyping

Making interactive prototyping is essential to a project.

Building an html prototype soon enough in the project lifecycle will help to :

  • Facilitate the communication on some behavior with the developers/clients/other parties.
  • Make some “real” testing.

Moreover, it has great chances that the prototype will eventually become the html-foundation of the final application. So it is not something you will throw away after some tests. If it is done properly it can become the website itself.

Currently using html5, frameworks,  grids and some js, it can be very fast and easy to create the main layouts of an application.

2.2.6 Testing

Usability testing and/or AB testing?

Check The Right test at the right time from Above the Fold.

So when should you A/B test? When you want to compare two or more things, but are not sure which will be more effective. A/B testing is in its wheelhouse when two designs or copy exist, both with obvious benefits, but with different focuses.

At its best, usability testing begins early on in the project, and is conducted regularly throughout all phases, providing team members with continually updated information. The qualitative data of seeing through a user’s eyes can save time in the overall product direction and creation process. In short, there is no better way to learn than through the user’s eyes.

AB testing or Usability testing?

AB testing or Usability testing?

Regarding the results we iterate and go back to the wireframes step or even make modification straight away on the prototype until we get enough satisfaction with the results.

Don’t ask yourself if it’s useful. It is.

Tools of the trade:

2.3 The Graphic Design

This is the where we add emotions to our composition. Now we go beyond usability to give a pleasant feeling for the user. This is where the user will be satisfied to use our app. This step is really important and can make the whole difference.

A great design give some quality to the perceived application. The user will be indeed more confident to share information and signup to the service.

Pixel-perfect is mandatory at this point. It changes everything. The quality is in the details (and the devil is in the details so says the developer).

Again we need some inspiration first. But this time we will be focus on the design aspect : the texture, the skin, the colors etc. You should constantly watch dribbble, pattern tap, website design galleries, and non-digital trends.

Photoshop is the best tool so far. The basics are:

  • You’re not alone - Follow an etiquette
  • Use Layer comps (1 psd is better than 10)
  • Use Smart Objects
  • Try to use as much as possible vector shapes
  • Customize photoshop’s layout and keyboard to suit your needs.
  • Create your own layer style fx/gradiants/patterns.

2.4 Testing & Quality Assurance

Again do a second pass of testing after the design is finalized. Pay attention to:

At the end of a project we always have to face that horrible part when everybody wants to rolls out the product as soon as possible.

Developers are usually fed up with fixing the latest details and are loosing their hairs with the js-debugging.

Clients are in a hurry to see their project go live.

Graphic designers are inflexible with pixel details.

The project is facing with deadlines and everybody wants to get it done.

UX Designers are the guardian of the final quality of the project. But they need to make some compromise. After all he is a diplomat, right?

So without compromise it may ruin everything. Projects to come will be more difficult to achieve (team won’t be motivated, client may be disappointed etc.).

At this point we should not be tolerant about the quality (the finition, the pixel things) but we can eventually make compromises on features/pages that are not working very well. Sometime it is just better to postpone a part in order to make everybody satisfied and launch the project at the initial deadline.

So QA is always about compromises. But on the features or content and not on the quality. A client will be less disappointed to have a side-feature delayed of one month than having something that looks dodgy. This is not acceptable for the end user.

3. After the project

This is the optimization/refactoring phase.

3.1 Create and update your design framework

3.1.1 Project’s design toolkit

Create a design toolkit file in photoshop for the project. It shall contains all elements that the developer will need with all the different states (hover, pressed, disable, etc.)

A psd file that contains all visual elements. Great for the developers.

3.1.2 Global design framework

Take from your wireframes all the components you used and will use again in the future, enhance them and update your own library with them.

Do the same with the photoshop layer styles and toolkits.

3.2 Think about collaboration

We never do project alone. Use collaboration tools such as

  • Wiki for the the project management
  • SVN for keeping up-to-date files
  • Create a solid naming convention and folder structure for each projects
Folder Organization and naming convention

Folder Organization and naming convention

Some tools & resources

Collaboration :

Stay updated and find fresh info :

  • Feeddly - A great RSS reader
  • Delicious – Use it to search for specific content on internet. Often more reliable than Google
  • Twitter - Follow interesting people to stay up to date

Voilà. This is my opinion on a UX Designer’s Workflow. I think there are no ultimate technique or golden rules. It is all about flexibility and adaptation. Every project, team and environment have their own specificity that make some of the points listed above not possible to use. There are also other points of view and techniques that I have not talk about because either I don’t know them or I have not tested them, yet. But I’d like to know more about. Don’t hesitate to contact me if you like to exchange on some points.

I really hope you enjoyed and find this article useful.

 

UX designer's Workflow mindmap

UX designer's Workflow mindmap