The Cone Trees network The UX Bookmark UX Quotes UX Jobs in Singapore Nice one yeah!


My Work: Standard Chartered Bank, UAE wins World’s Best Consumer Internet Bank Award 2013 for UAE

World’s Best Consumer Internet Banks in Middle East & Africa 2013: Standard Chartered Bank UAE- UX Lead, Abhay Rautela

At Possible, as the UX lead for the Standard Chartered Global Revamp project, I planned, coordinated and executed user research, information architecture, content strategy and interaction design activities to create a unified information architecture and interaction design strategy and implemented it for Standard Chartered’s country websites across the globe both for desktop and mobile.

I worked on envisioning and realising a fully responsive, device agnostic and social media integrated internet banking country websites with more intuitive and user-friendly interface that facilitate better information sharing, by researching about the different types of users who would land up at the website, how they would land up and in what frame of mind would they be.

I planned, delegated, worked with other departments, and executed stuff like:

  • Surveys
  • Responsive design
  • Social media integration
  • Client meetings
  • User Interviews
  • Personas
  • Content Inventory
  • Page Description Diagrams
  • Paper prototypes
  • Interactive prototypes
  • … and more

Reproduced from the Global Finance website. Award URL

World’s Best Consumer Internet Banks in Middle East & Africa 2013
JULY 19, 2013
Global Finance names the 2013 World’s Best Consumer Internet Banks in Middle East/Africa

NEW YORK, July 18, 2013 – Global Finance has announced the First Round winners in the “World’s Best Internet Banks” competition in Middle East/Africa. This is the 14th year Global Finance has named the World’s Best Internet Banks. Details on all First Round winners will be published in the September issue. First Round winners include Best Corporate/Institutional Internet Banks and Best Consumer Internet Banks at the country level. Winners were also selected in Asia, North America, Latin America, Europe and CEE. The Regional and Global winners for these categories will be announced at an Awards Ceremony in New York City in November and published in the December issue of Global Finance. Also announced were Regional winners in Sub-Categories. Global winners in the Sub-Categories will also be announced at the Awards Ceremony and in the December issue. The list of First Round winners follows.

Winners were chosen among entries evaluated by a world-class panel of judges at Infosys, a global leader in consulting, technology and outsourcing. Global Finance editors were responsible for the final selection of winners in the First Round.

Only banks that entered the competition were considered for awards, and awards were only given in those regions, countries and categories in which there were entries.

Winning banks were selected based on the following criteria: strength of strategy for attracting and servicing online customers, success in getting clients to use web offerings, growth of online customers, breadth of product offerings, evidence of tangible benefits gained from Internet initiatives, and web site design and functionality. Category winners, such as “best in social media” were selected based on the relative strength and success of those web products and services.

“The Internet has transformed the way many consumers and most businesses bank,” says Joseph D. Giarraputo, publisher of Global Finance . “The continuing improvements in Internet offerings represented by this year’s entries show that more significant Internet banking developments are still ahead of us.”

COUNTRY WINNERS: Best Consumer Internet Banks
… UAE: United Arab Emirates- Standard Chartered

Guidelines for Sending Screenshots of Web Application and Website Pages for Usability Reviews

Status: Work in progress (what is this?)

Whether it is your clients or development team, it’s important to explicitly specify screenshot requirements rather than assuming the other party to provide screenshots in the right way. This ensures an efficient usability review that is not unnecessarily impacted by files being sent and resent all the time.

  1. Send screenshots of the full webpage. Use an application like Greenshot (freeware, IE) or FireShot (free 30 day trial) for this purpose. This enables better review of the page rather than it being reviewed as separate images.
  2. Send images in PNG format. The biggest issue that occurs when screenshots are not sent in a lossless format is that colors are not true to the actual screenshot because of lossy file compression. This reduces the accuracy of UI issues filed for color specifications.
  3. Send screenshots of web pages at a 100%. Don’t try and fit the entire length of the page in one screen because the image is and colors distort.

UI Pattern Libraries for the Enterprise- What. Why. How & the Difference From a Style Guide

Status: Work in progress [what is this?]

What is a UI pattern?

If you break a website or application down from a user interface perspective, you will end up with a bunch of user interface components that are used again and again throughout it. A user interface pattern is called so because that pattern can be used repeatedly to solve a particular design problem.

Examples of UI patterns

  1. Accordion- An accordion can be used to display information when there are too many items to fit in a limited space without overwhelming the user.
  2. Step indicator- A step indicator is used in screen flows to inform users of the number of steps in multi-screen process.
  3. Progress indicator- A progress indicator is used to shows actual progress of a task being done by something or someone.

What is a UI pattern library?

A UI pattern library is a collection of user interface design patterns. The UI pattern library documents these UI patterns and defines how they should look, behave and often how they should be coded too. It can also provide specifications on templates, flows, and general heuristics.

How can a UI pattern library help an organization?

UI patterns help an organization ensure a consistent user experience across a suite of websites and applications- in terms of how they look and how they behave, application flow and pages layouts. The greater the number of applications, the greater its use.

The difference between a Style Guide and a UI Pattern Library

We will restrict the scope of a style guide to the online channel for this explanation and refer to it as the Web Style Guide. The real difference between a web style guide and a UI pattern library can be explained through what each of them specifically address, and thus their audience which governs the way they are structured.

Both strive for consistency in visual design and interaction covering interactive forms to typography. A style guide’s primary purpose is to ensure that branding is correctly applied to maintain the organizations identity across different websites and applications. On the other hand, A UI pattern library’s primary purpose is to present a set of solutions that address unique design problems. For example, how do you address session timeout frustration for users? How do you address application errors so users are not left disoriented and confused? How do you prevent users from accidentally exiting long forms if they’ve filled them half way through? Since these solutions address design problems, they can increase the efficiency of website and application development with increased usability.

Think of it as extending the value of a style guide rather than a replacement. The style guide’s primary audience is the designer who will refer to it to ensure that the visual design is correctly implemented. The UI pattern library’s audience is the Business analyst, developer and QA (Quality Assurance). Business Analysts and developers, with little or no help of the Usability team (depending upon the importance of the project, availability of usability resources and timelines) can use the style guide to work on the flow and user interface for an application. Even better, developers can pick code samples (HTML, CSS, Java script) to implement the UI pattern. Last but not the least, QA (Quality assurance/ testing team) can use it to verify the correctness of user interface implementation.

The structure of a UI pattern

A UI pattern can include the following sections:

1. Name of pattern

2. Example image

3. When to use it (description of the specific problem it addresses)

4. When not to use it

5. Similar UI patterns

6. Pattern success notes in different applications

7. Specifications (platform specific CSS, HTML, Java script)

8. Accessibility

9. Attachments (e.g.- icons accordion states)

Extending a Style Guide to a UI Pattern Library

A style guide can be extended by adding the categories from the structure above that are not a part of the style guide.

The UI pattern library as a web app rather than a document

The advantage of having a UI pattern library as a web app rather than a document is:

1. Lets you look at the UI patterns from different views. For example- organize by looking for a design problem. Organize alphabetically. Organize by layout section.

2. UI patterns should be updated, added and retired. A web app makes it easier to do so than a document.

Great Examples of UI pattern libraries

1. – A great example for a company specific UI pattern library

2. – A generic UI pattern library but with examples from only Yahoo properties.


A List of UI Components for a UI Pattern Library for Web Apps and Websites

  1. Accordion
  2. Vertical tabs
  3. Horizontal tabs
  4. Step indicator
  5. Horizontal navigation
  6. Horizontal navigation (Two level)
  7. Horizontal Mega dropdown menu
  8. Vertical navigation
  9. Vertical navigation (Two level)
  10. Links (with default, hover, on-click and visited states)
  11. Form components (with default, hover, focus, on-click states for controls)
    1. Name lookup
    2. Combo box
    3. Multi-select combo box
    4. Text box
    5. Form text value
    6. Label
    7. Checkbox
    8. Radio button
    9. Primary button big
    10. Primary button medium
    11. Primary button small
    12. Secondary button big
    13. Secondary button medium
    14. Secondary button small
    15. Inline edit
    16. Form layout
    17. Form sub-headings
    18. Form groups
    19. Hint text
    20. Instructional text
    21. Help text
  12. A modular grid based layout addressing several possibilities of standard web applications and websites layouts
  13. Messaging
    1. Success message page level
    2. Success message inline
    3. Error message page level
    4. Error message inline
  14. Tables
    1. Data table with

i. Pagination

ii. Filter

iii. Sorting

  1. Processing indicator
  2. Progress indicator
  3. Login box
  4. Modal layer small
  5. Modal layer medium
  6. Modal layer large
  7. Tooltip
  8. Typography
    1. Headings- H1 (Page title) to H6
  9. Notification badge
  10. Breadcrumbs
  11. Facetted search
  12. Header compact
  13. Header regular
  14. Footer compact
  15. Thumbnails small
  16. Thumbnails medium
  17. Thumbnails big
  18. Video player small
  19. Video player medium
  20. Video player big
  21. Fat footer
  22. Auto complete
  23. Carousel
  24. User card

A New Cone Trees Communication Style

Status: Work in progress


I’d like to announce a change in my communication style for Cone Trees. It’s probably something that does not exist at the moment, not that I am aware of.

I’ve been busy with work and writing music and spending time with loved ones which has had me writing a lot less frequently as I did on Cone Trees. At the same time, there is so much knowledge for me to share with the UX community to help you work better. This is what prompted me to create a new communication style.

I call it Lean Collaborative Communication

The change is going to be me posting incomplete posts on topics that I will complete over time. The incomplete posts will none the less offer valuable information to you, the UX industry practitioner.

What is the advantage of this? Let me give you an analogy from the music industry, since I am an electronic music artist myself. Musician many a times choose to release singles instead of an album. This ways they get to publish music works quicker rather than having to wait a longer time before people can hear their music.

So these incomplete posts will offer you valuable nuggets of information. I will also be posting so much more frequently. As long as the post is incomplete, it will indicate it is under the post title. In true Lean Collaborative Communication spirit, I am currently marking this post as ‘incomplete’ too.

So that’s the lean part of it, what’s the collaborative part? Well, as long as the post is in ‘incomplete’ state, I will add readers comments that add to the value of the post. These comments will be integrated into the post, crediting the person commenting of course.

So there you have it. This communication style I’ve created is something that will let me post a lot more often and use the community’s engagement so that we together can offer even more value to those who read these posts.

There’s more to write and detail out, but I’ll add on to this post later.

I want to know what you think. Let me know by commenting below.

The most popular stuff from 2012 at ConeTrees

I wish you, my dear readers, a wonderful 2013. Here is what I wrote about and posted in 2012 which was the most popular with you all.

  1. The Difference Between a Heuristic Evaluation and an Expert Review
  2. Future Healthcare Concepts
  3. When Introducing UCD in an Organinzation, Technical Capability is Only Half the Story
  4. Karen McGrane on Adapting Ourselves to Adaptive Content
  5. RIP Bill Boddgride of IDEO (1943-2012)

Runne(a)r phones- if you run, you need one (earphone mounted rotary knob volume control)

This is a product idea I have submitted on Quirky targeted at runners.
Changing the music volume (because of traffic, changing environmental noise) while running is always a hassle. Well, not any more, Runne(a)rphone’s here.
Vote here: (if you like it, and tell your friends about it too)

Runner earphones- with a rotary dial to solve volume changing woes Runner earphones- with a rotary dial to solve volume changing woes Runner earphones- with a rotary dial to solve volume changing woes Runner earphones- with a rotary dial to solve volume changing woes

The Problem

This product is a solution to a very specific problem- changing the volume of your music device while running.

When running, we often have to change the volume over the course of the run, especially if we’re running in the city. We come across different volumes of environmental noise (running by a busy road, passing by a construction site, what have you). This means we need to turn the music volume up and down quite a few times throughout the run.

Now changing the volume can be a pain, depending on where we’ve placed our music device. If we’re not using a remote control earphone, then we need to take it out of the pocket and change it, which means slowing down and distracting ourselves from simply enjoying our run. Even using an armband requires us to slow down or bit, or stop moving the arm its on to change the volume… not something we like to do when all we want to do is zone out.

A remote controlled earphone is no better (something I personally use) because we still need to temporarily slow our speed down and get hold of the volume control on the earphone wire. I certainly don’t enjoy it, and believe you don’t too.

The Solution

My solution to the volume changing hassle is an easy, ‘don’t make me think’ one. It is an earphone for runners, where the volume is controlled through the earphone itself rather than the music device.
The difference is that the volume is controlled through a rotary knob (just like those on the old television sets) and this knob is placed on the earphones itself (as you can see in the picture I’ve attached- the extruded portion is supposed to be the rotary knob).

Changing volume is as easy as rotating the knob on either headphone. This means we no longer have to slow down while running. We no longer have to get distracted from having to cumbersomely change the volume. It’s as simple as volume changing should be while running.

Key Features

The product is an earphone targeted at runners and joggers. It solves the specific issue of the cumbersome process of changing the volume of music over the course of a run. It is special because I believe there is no other solution out there which makes it as easy as the this product.

Product Comparison

I am aware of none at the moment

The best of Cone Trees for 2011

2011 has ended and has been a rather good year for me. I know I have not been writing this year, but work has kept me very occupied, and happy.

I left Delhi and moved to Singapore early in the year to join PebbleRoad and have since then had a great time working on a whole lot of digital strategy, user research, information architecture, mobile and social interaction design, usability testing and competitive evaluations for websites and intranets for both the government and corporations such as IE Singapore, Tourism Australia, Visa, SMU, Guiness, Singtel, DHL and more. And the projects went well, nothing like getting repeat proejcts from happy clients. Great team, great fun.

I plan to get back to writing again this year, so you can expect more articles on ConeTrees this year. It’s February already and it is a little late for new year greetings, none the less, I hope you have a wonderful 2012.

Most viewed

The UX Bookmark- the best UX links for the smartest User Experience practitioners
Videos from UX Week 2011
UX Quotes- Quotes on User Experience

Suggested viewing

A Quick Look into IDEO’s Design Process- Designing a Shopping Cart in 5 days
Alan Siegel on simplifying legal jargon (simple language)
Alexis Lloyd on new interactions with news

The best content at Cone Trees for 2010

2010 has been a good year. Besides improving products through usability testing and user research at work, I gave an expert tutorial at The India HCI/ IDID 2010 conference at IIT IDC, Mumbai in March and the book I contributed to, UX Storytellers: Connecting the dots was published in November.

Most viewed content

From the Downloads section- The Usability Testing Process (diagram)
From the (new) UX Glossary section- Post-Study System Usability Questionnaire (PSSUQ)
From the Quick Posts section- Rohan Shravan on the Adam tablet featuring tech specs better than the iPad

Suggested reading

From the Blog section- My chapter in the book: UX Storytellers – Connecting the Dots
From the (new) Tutorials section- How to create active and inactive tabs in Axure
From the Blog section- The official definition(s) of Usability

My chapter in the book: UX Storytellers – Connecting the Dots

UX Storytellers book cover snap shot

As a contributing author and an industry practitioner, I am happy to see the book, UX Storytellers- Connecting the dots, finally out and it looks great. The book is a collection of forty two stories contributed by various user experience experts from around the globe, each of whom share a particular real (or based on a real) experience of theirs working in their respective areas of expertise within the UX domain. Some of my favorite authors in the book include Deborah Mayhew (author of Cost-Justifying Usability and The Human-Computer Interaction Handbook among many others ) and Aaron Marcus (author of The Cross-GUI Handbook for Multi-Platform User-Interface Design and Mobile TV: Customizing Content and Experience among others).

If you work in user experience at any level, this book will offer you some fantastic takeaways, the kinds you are lucky to get when you come across someone really experienced at a conference or even professional meet ups.

Jan Jura (@IATV) did a fantastic job of conceptualizing, coordinating and putting all of this together, which took him over a year. And judging the success of the book by the buzz in the UX community since it came out a week ago, it definitely looks like its been worth all the effort he put in.

My chapter in the book is a story which aims at helping user experience professionals understand the real challenges involved when trying to introduce User-Centered Design (UCD) techniques in your organization where your goal is to ultimately integrate UCD into your organization’s Product Development Life Cycle (PDLC). It talks about how arming ones self with technical capability is only half the story, the other half being a team’s ability to effectively deal with soft issues and successfully engage with stakeholders. I hope you will learn from it and be able to put it to good use if you come across such a situation or are already in such a (tricky) situation.

You can download or view the book online at: A paid print version will follow, I’ve read quite a bit of it, and from all the value it provides, it definitely will be worth buying.

You can also read the book below. My story begins from page 412 of the Srcibd reader or page 434 of the book.

The official definition(s) of Usability

What is the official definition of usability? Well, the International Standards Organization (ISO) offers not one but two definitions of usability. One definition describes usability as quality of use and the other describes usability as a software quality.

Usability as quality of use

According to part 11 titled ‘Guidance on Usability’ of the ISO 9241 standard (1998), usability is the:

Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.

ISO 9241 is a standard covering a number of aspects for people working with computers. Currently titled ‘Ergonomic requirements for office work with visual display terminals (VDT), it will be available as ‘Ergonomics of Human System Interaction’ in the near future.

Usability as a software quality

Part 1 of ISO/IEC 9126 (1992) defines Usability as one of the six characteristics to describe software quality as:

A set of attributes of software which bear on the effort needed for use and on the individual assessment of such use by a stated or implied set of users.

ISO/IEC 9126 is superseded since 2005 by ISO/IEC 25000, the latest being ISO/IEC TR 25021:2007, ‘Software engineering- Software product Quality Requirements and Evaluation (SQuaRE)- Quality measure elements’.