A Framework for doing UX design reviews

In today’s world, guess its well understood how important is designing your products and experiences in right way.  Having understood this importance, most companies hire designers/ outsource the design process. Some still have PMs / Engineers / Marketeers  making product designs.

In any scenario, the process goes through an initial concept of an idea to paper wireframes to more detailed designs (wireframes and then visuals). And then we go through iterations on each step.

Also, specifically whenever we (as Product Managers / or other stakeholders) sit down to review interaction designs / wireframe / visual designs or anything post the initial concept stage we tend to think about a lot of different perspectives, this is exactly when we also tend to miss out certain elements of the design that need a lot attention.

Its for this purpose, I have put down a checklist / framework for reviewing such designs, just so that all feedback gets captured in fewer iterations.   This by no means would be comprehensive, in fact would love to hear your feedback on which important aspects are missing so I could them in.

Also, while making this list, I have borrowed heavily from this excellent book on UX.

  1. Persona / right frame of mind: Get into the persona and frame of mind of the user. Make sure you spend some-time thinking about this user (say half a minute or so) before you start reviewing the design from that users perspective.
  2. User Flows – Its important to review user flows instead of just screens. Most of your screens would be common – but its the user flow that would give you the questions the screens need to answer.
    1. Call out the flows /scenarios to be played while reviewing the design
    2. And then take each scenario and run through the screens
  3. The Strategy Plane: business & User Objectives
    1. Does the screen communicate what it is about and what action is required by the user ?
    2. Heading
    3. Sub-heading
    4. Overall message being conveyed by the screen in the first glance.
  4. Scope Plane: Functions & Content
    1. Go over all the questions the user would have in his mind and whether the screen provides answers to those questions. This would need you to make a list of questions that would pop-up in the user’s mind when he looks at this screen.
    2. Review Sections & Sub-sections
    3. Review the functionality and content of the screen
  5. Review the CTAs
    1. Identify the primary CTA(s) of the screen and make sure its easily visible and attracts the most attention on the screen
    2. Identify the secondary CTA on the screen and takes lesser attention than the primary CTA and is still fairly visible as per the business needs.
  6. Structure Plane: Interaction Design & Information Architecture
    1. Screen specific Interaction elements
      1. effectively communicates interactivity and functionality(what user can do).
      2. informs user about state changes(file has been saved, or any feedback), while they interact.
      3. prevents user error or mistakes, like the system asks user to confirm potentially harmful action(i.e. deletion).
    2. Hierarchy of information laid out on the screen and each section.
      1. organizes, categorizes, and prioritizes the information based on user needs and business objectives.
      2. makes it easy to understand and move through information presented.
      3. flexible to accommodate growth and adapt to change.
      4. appropriate for the audience.
  7. Skeleton Plane: Navigation & Information Design
    1. Navigation design –
      1. how would the user arrive at this screen
      2. Specific sections of the screen
      3. Go back to where he came from
      4. Come back to this screen after going back etc.
    2. Information design
      1. How exactly is the information displayed / designed.
      2. Text, images, icons, logos etc.
  8. Surface Plane: Visual Design
    1. Brand personality/consistency
      1. The personality of the screen should match the brand personality.
      2. This includes fonts, colors, tone of the language, button labels, headings etc.
    2. Unity, Variety and Balance.
      1. Unity – Visual Consistency in elements.
      2. Variety – Different elements marked different visual so that the user can tell the difference.
      3. Balance between Unity and Variety so that the screen does not get confusing / over-whelming.
    3. Visual overload / burden
      1. Depending on the purpose of the screen.
      2. Functional screen where users are expect to complete a task are visual light  / not-overwhelming.
      3. Where as magazine type use-cases where the users are just expect to browse, the screen should be visually interesting to look at.

This can also be used by the designer to make sure he/ she has thought through all the aspects of the designs and hasn’t missed out anything important.

Resources:

After I have started to refer to this list, it has started to take a lot more time reviewing the designs, but a lot of detailed feedback has started to come out, hope you find this list helpful too. Do share feedback.

 

Next Post: (Should have ideally published before this one 😉 ) Framework for documenting and reviewing Product Requirements.

 

Advertisements

One thought on “A Framework for doing UX design reviews

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s