A UX designer’s guide to productizing an application

The past few months were full of enlightenment and a few challenges. The enlightenment part is partly from this book that I have started reading seriously (though its been real long since I’ve acquired it via flipkart), and partly from our team at work as we are continually looking to refining the UX of a product that we own.

Being part of a product UX team is exciting and exhausting at the same time. The exhilaration and adrenaline rush that the initial phases of UX design offers will soon be overtaken by the tedious testing phase, the demotivating cross-browser compatibility check phase and the dirty avalanche of new feature requests that just wont stop coming at you. Nevertheless, the passion which drives each team-members to take the product to the next level, is the winner all the time, and it is that passion that keeps us going even in the most testing of all times ( even when asked to fix IE bugs!) This is a lesson that I have learned from my own team, and from successful product managers like Ryan singer of37signals.

Building an application that meets the requirements is just half the job done! The key lies in being able to mold it into a sell-able product, and here some are some of my learning from experience so far:

How we define a product, out of a web-app?

For an enterprise, selling an application to customers is first priority and according to the great Jef Raskin – “As far as the customer is concerned, the interface is the product”! So, obviously the interface and its underlying layers should be ready to wow the customer, and only at a point when the app is ready to be sold to a customer, it becomes a complete product! There are several factors that goes behind productizing an app. If the following questions are answered satisfactorily, you are on the right track:

• Is your app scalable enough?
• Is your app flexible enough?
• Can your app change dresses easily?
• How transitional is your app?

Is your app scalable enough?

First lets accept that, customer is the king. Most often in my experience, the final product almost always had been too far from the initial envisaged one. No, I’m not talking about the ‘Designer/Developer gap‘ here. There is a bigger problem to deal with – Featuritis! This comes free with every product development life cycle. The urge to add more features, some more, and more. Though a proper UX vision and strategy can take calls on un-necessary additions, last-minute changes are bound to happen. Making sure, these changes can be easily accommodated is the first sign of a successful product. As a UX professional, here are some tips towards a scalable UX architecture

1. Keep the IA open-ended: Keep things simple to make additions easy. Things like opting for a select box instead of toggle-set buttons, making room for those extra nav items, Choosing a contextual sidebar to plugin items later on, and so on.
2. Keep the visual design scalable enough: Its not just enough that the information architecture of the application is scalable enough! While IA needs to be able to accommodate more features, flows and elements, its the visual design of the application that also needs to give strong support to the IA, and be scalable, by not limiting the design pattern to the features/flows alone. Room should be given for further inclusion and enhancement.
3. Use semantic, unobtrusive and established front-end development frameworks: Most of the time, the changes will be introduced after the prototyping has been completed. Often such changes throws the whole HTML/CSS code to tantrums, and the more such changes, the more messy the code becomes to manage in the future. A solution is to make use of a tried and tested framework, which effectively makes use of semantically correct markup/css hooks, unobtrusive JS and of-course cross-browser compatible. (Bootstrap is my recommendation for such a framework)
4. Use an object-oriented CSS architecture: It doesn’t stop there even if you choose the best front-end framework. There always will be the need to customize any frameworks to match the design of our own application, and this means more hand-coded custom CSS! Here is where the need to use a solid technique to make the CSS code scalable and manageable comes in handy. Using an object oriented approach to build the whole CSS architecture is a best way to make the CSS code stay cool all the time! Here is a good resource to start with.

Is your app flexible enough?

While scalability is about containing additions and growth, flexibility is all about changes within, and only if the app is ready to face the change will it succeed in becoming a product. period! Flexibility from a UX view point, include the ability to make changes to the interaction/Information/Visual elements here and there without investing too much of time/affecting other aspects drastically. Here are some tips towards a flexible UX architecture:

1. Use advanced CSS techniques like variables, mixins: One of the most time taking exercise while making design changes to a WIP application is, the rewriting and fixing of HTML/CSS. Using a CSS preprocessor and aptly leveraging its capabilities should help overcome this hurdle. This should help give a kick-start if you are still contemplating whether to use a preprocessor or not
2. Follow modular CSS architecture: Modularizing the CSS is a great way to make sure, changes can be made easily and safely. This practice involves splitting the CSS code to logical individual stylesheets (eg. forms, typography, tables, navigation, etc), and then importing them to a master stylesheet. Modular approach makes sure each key aspects of the app’s UI is properly organized and enables smooth addition of changes especially when there is a team of front-end engineers involved.

Can your app change dresses easily?

Each customers have their own requirements and most of them have unique branding guidelines too. Getting the app to quickly change the dress complying to their own branding guidelines is a priority requirement from most of the prospective customers. This calls for a proper strategy while building the CSS architecture. Here are some tips towards attaining the same.

1. Identify all configurable elements of the interface in terms of branding — This is the most important part. Identifying all the elements of the UI, which are open to customization. This details should be documented and consolidated well. It comes in handy especially while pitching for new customers, for quick presentations, demoes and more importantly contributes towards the complete packaging of the application, before shipping to the customer.
2. As always its important to make sure the content/presentation and behavior layers are seperate with efficient usage of markup, css and js techniques.
3. Use variables efficiently in CSS – Variables can do magic when it comes to creating themes / skinnable UI. SASS/LESS/Compass and similar CSS preprocessors can power the css creation process with variables (also variables will soon be a part of default CSS specifications). Collating all the configurable values which has been identifies as a part of step1 on this section, and maintaining a separate CSS file for all variables is an effective way to make the UI of the app easily them able.

How transitional is your app?

Ive already stated that transitioning is an integral phase in a product’s life cycle. The UX team which builds the product has the additional responsibility to make sure that, all the key aspects of the user experience of the application from UX strategy, information architecture, interaction, visual design to front end engineering are clearly documented for any team to take it forward. Over the time, I have created a checklist of transition-guide documents for every product team involved in building and designing web based applications.

1. UX Strategy document:Should cover the overall UX vision of the app, and strategies behind adopting various interactions/flows/features. This would give a high level view of how the app was envisaged by the core team.
2. A visual styleguide: We all know what a visual styleguide is. For the uninitiated, here is your chance to get inspired (one, two, three)
3. A front-end engineering guide:Should extensively cover the details of frameworks, pre-processors, approach used in building CSS, in-detail coverage of the reusable CSS patterns, information about IE hacks used if at all present, details of any dependencies that might have developed so as to keep any frontend engineer working on the code later on informed properly.
4. A user guide: They are the user manuals for using an app. A comprehensive coverage of various key features and a clever adoption strategy will do wonders in a good user guide. Also walkthrough videos, detailed audios/podcasts will delight the user much.

Just my 2 cents (I know there are many open ended points here. I would post individual posts on the missing links in due course. The brevity of the post is to send the message that there are few aspects to be taken care of while productizing an application). Would love to hear from all those experienced and seasoned fellows out there.