Design prototype above all – Function follows form

Settle to a development framework, I say to myself, in recent past I believed form follows function was a great approach to develop web applications. But our brain is wired such that the real function of the realistic application is somewhere hidden inside our mind. Once the function is ready and later when we design, tons of features, logic, navigation, routes and relationships looks a miss out.

In some cases at design stages we feel the logic is incorrect and the entire application requires rethink and re-looked. In addition, pain to developer and multiple communication loops only adds to existing chaos.

This is why I believe “Function follows form” is a great alternative to application development process. This approach helps us to deliberate on actual requirements, feature list, navigation and routes, application logic and data relationships very early during the development stage.

Trust me, this approach is hard. Television, book reading, holidays and family time all takes a back seat while you change the world. Constantly your mind drags you to the next best feature you want to incorporate in your design or the application logic you need to define. Application logic still stays into documentation to a large extent but by now you are clear with your requirements.

In this advent of technological advanced era, believe me you don’t need millions of cash, costly hardware and expensive tutorials. What you need is a design framework such as Twitter bootstrap, Foundation, Gumby and its likes and self motivation. You could learn about twitter bootstrap in couple of hours and jump right into the app design. It is that easy.

Function can always be integrated later with the language of your choice. My personal preferences are Ruby on Rails, Python on Django, Meteor JS, Angular JS and PHP.

For a beginner most seems difficult, there will be phases where we feel that things are not working but then there is Google and Stack overflow.

Scratch your own itch – You won’t believe, I spent more than 20 minutes to figure out how images are embedded in the HTML but eventually I figured out that the answer was exclusion of double quotes. I spent 30 minutes to figure out how to integrate dashboard in my design and I found them on Google in-house developed visualization API’s to satisfy my design needs.

There is no limit as to what you can achieve, so go ahead learn few frameworks, kick some tires and dive right into app creation from scratch.

Liked this post? Follow me (https://twitter.com/vishantpai) to get updates on new posts, design and development happenings.

3 steps to requirement gathering.

Often, when  business analyst gather requirements, its natural that below questions to revolve and spin around their head.

Where do I start? Should I navigate through the process first or ask the process owners about their wish list or maybe jump to gather requirements of the TO BE system.  A great detail of confusion isn’t it? Over a couple of years and after few experiments and deliberations, I have arrived to a state that seems to be working for me. Before I share my experience let me inform you that Alec sharp has greatly influenced me to settle down with the current process of gathering requirement.

1. The process:

Process is the foundation to develop usable applications, especially when the request or transaction changes multiple hands. On the contrary if there are less activity owners then a jump to mock ups won’t really hurt. For instance requirement gathering for a facebook or instagram like app won’t require a process to be written.

2. Create Data relationships

Regardless of complexity, size or feature set, you can break down any web application into simple operational mechanics:

  1. The web app takes in data from users

  2. The web app processes and decides what to do with that data

  3. The web app produces some output for the users

All web apps work like that, so at the start, it’s best to break down your web app’s core features into data relationships to see:

  • How your web app should be built

  • How your web app might deal with user data and presentation

  • What features you need to prioritize

  • What web services and web technologies you’ll need to enlist and get familiar with

For example, let’s take the primary feature of Instagram — posting a photo up on the photo-sharing service — and break it down into the fundamental operational mechanics above:

  1. The web app takes in a photo from users

  2. The web app processes the photo to scale it up or down to the layout of Instagram and also what photo effect the user wants to apply to the photo

  3. The web app produces a modified image and displays it for the users

 Lets create a breakdown of the data relationships like this:

Users

Has 2 permission roles (User and Admin)

A User can upload Photos

A User can manipulate Photos

A User can like or dislike Photos of other Users

A User can comment on Photos

 

Photos

Photos are uploaded by a User

A Photo can get a Filter applied to it by the User who owns the Photo

A Photo can get liked/disliked

A Photo can get a Comment

A Photo can be deleted/edited/updated

A Photo can be private or public

 

Filter

A Filter can be applied to Photos

A Filter can be created by an Admin

 

Comment

A Comment belongs to a Photo

A Comment can be created, edited and deleted by the User who own the Comment

A Comment can be deleted by the User who owns the Photo where the Comment is on

 

3. Jump to mockups and prototypes:

Now that we have our process and data relationships in place, lets jump to creation of mockups. There are two types of mockups: Low fidelity and High Fidelity.

Low fidelity mockups are paper sketches that makes it easy to understand the requirement little bit more in detail. This kicks in the thinking process that aids in creation of high fidelity mockups and prototypes plus it saves a loads of time.

High Fidelity mockups are made using online tools that have interactive elements built in.

Prototype – Finally, at best prototype built on HTML5 and CSS3 serves as a virtual replica of your to be system. If you have loads of time before the development is to begin, prototyping is feasible solution. The second best candidate is high fidelity mockups in order to translate requirements to your developer.

Focus on Behavior and Less on Look-and-Feel-

Quite often, frustrations that people have with a web app come from the way it behaves, not the way it looks.

I’m not saying you should ignore how your web app looks altogether, but I think that this is something you can refine, polish, and invest in more once you confirm your solution is something users actually want.

What I’m suggesting is that you direct your time and resources into your web app’s value proposition — which for a web app is usually the fundamental problem it’s aiming to solve for its users.

If you like this article follow me on Twitter for more updates

PS: The article is written keeping in mind building applications for small to medium scale enterprises but the ideas are not restricted to building large scale applications.

Thanks Alec for instilling process based thinking and Marc Gayle for inspiring on Data relationship based thinking.

Requirement gathering with an UI framework

ba

A “traditional” requirement gathering process typically involves gruesome activities such as process owner interviews, wish list walkthroughs, documentation of each requirement in extended form, data flow design, in-depth business rules, identification of various types of fields, validations and integrations and much more.

Enormous amount of time is spent to document these activities, but still multiple questions by developer flows and process owners do miss out on critical elements? Predominantly, this is because of huge gap between textual understanding of the requirement and visual thinking.

To bridge these gaps frameworks rescues you from such textual syndrome, Twitter bootstrap, Foundation, Groundwork, Gumby, HTML5 Kick-start, Boilerplate and few others give a rock solid foundation and support to your visual thinking machine. Business analysts are in an era where prototype designing is now a child’s play why not exploit it?

With the advent of these tools in no time we can create an ideal prototype that serves visual purpose of your clients towards user requirements, data flow, fields required, placement and types of components , validations, business rules and integrations required.

Perspectives:

Process owner – Visually senses the output of requirement instead of browsing tons of documents. The process owner does not have to wait till end to view the output demanded. Only to find during UAT stage the hits and misses including logical errors.

Business analyst – Frameworks assists analysts to draw the real requirement that is visually expressed and demonstrated to the process owner, client and developer.

Developers – Developers are apprised in advance of the effort required to build the application. They worry less about design and more about implementation of business logic. In addition, the frameworks are complied to work on multiple browsers, these frameworks not only makes developers life easy but also comes with a great online forum support in-case a help is needed.

These frameworks are free to use and in some cases inexpensive but packs and punches great features that may gather client’s requirements in a record time. Never before a business analyst is armored with this kind of environment that promises speedy requirement analysis and if you wish to further take the framework on steroids then development frameworks such as Ruby on rails and Python on Django is your answer. Not only your prototype is ready but when plugged  with a development frameworks your requirement and application sprints.

Need updates on my future posts. Follow me

The fall of age old navigation bar

The trend has begun, as I presume, I see more and more web applications where I do not see the age old navigation bar. Or is it that navigation bar has found its new avatar.

Look out for trychec.com navbar design. The product uses button pills in the navigation area than multiple links, that gives the webpage an unique and modern style.

chec

The navigation bar must be clean and clutter free. Look at this one, a work in progress web app at 16columns.com makers of 34pass.com. This is an internal link to create a new project instance. Again a simple nav bar that only does what it is supposed to do. Just three links, one search bar and a settings icon.

365audit

Few tips to keep navigation bar simple:

Social bookmarks : Social bookmarks can find its place in the footer instead to keep its place in the navigation bar.

Keep it simple: Use precise and easy to understand words on the navigation bar. Leave out unnecessary words that don’t add anything to the navigation item. For instance instead of “In the News,” consider simply “News.”

When choosing a navigation bar, start simple. Evaluate your content thoroughly and ask yourself what your users need to access quickly. More often than not, a complex navigation system is an indicator to better content planning and organization.

Go for a clutter free navigation bar in this “Less is more” world.

Where else did you see where the navigation bar has found its new avatar?

Web application from scratch – List of tools

What does it take to create a web app from scratch? with little research and heIp from 16columns.com, I derived following list of tools:

Tools at design stage

  1. Paper sketch – Nothing works best than to pull out a pen and Scribble, draw lines, jot notes, create wireframes. Liberate yourself.
  2. Mind map – My personal favourite, a small but serious powerful tool to put all your ideas good,bad and ugly at one place. “Coggle it” is the only cloud based best mindmap tool available there..
  3. Balsamiq- Sketch ideas with a mock up tool. These tools cost less than $10 per month. Other tools include mockflow, uxpin to name a few.

Now that your design is ready prototype makes it way.

Prototype tools

Best tool is to open code editor (npp is free and best) and just code. At this stage a framework like bootstrap or foundation can be handy.

This preferably must be a near replica of the application you wish. It also helps to translate requirement to developer and promotes fixed price culture if development is outsourced.

If you self develop, functionality is what you should crave for instead of design. Design goals can be met later.

After prototype your developer pitches in and begins to write that beautiful code for your application, to equip him, below mentioned tools can make a dent in universe.

Tools at development stage

  1. Ruby on rails – In today’s fast paced development world ROR is the buzzword, many applications are built on these solid frameworks, to name a few basecamp, groupon, 34pass.com , Twitter and many more. Python on Django is another great framework to get that app live quickly.
  2. Aptana studio to write your code. Notepad ++ is another great tool to write your code. Jetbrains Pycharm for Python/Django. Other include Netbeans, eclipse and so on.
  3. Email and Domain Host – Namecheap is one of the best web hosting company out there, there are many other too, but namecheap is seriously cheap and the interface enables you to go in a self service mode due to its stellar admin module. What I like best is the live support which is instant and powerful
  4. Code host and revision control – Though github is the buzzword, I personally recommend bitbucket. As on today, with bitbucket you get 5 git or mercurial private repository free. Also the interface and features are awesome.
  5. Application host – Heroku is best to host both Rails as well as django app besides node.js, java and other frameworks. Heroku comes with great add-ons that remove the stress out of server management, monitor apps, email deliveries and much more.
  6. Chec – To manage your payment integrations with your app. For customized solution you must look for other providers.

To manage Design and Development

  1. Trello for project management – Use this tool and you will know why. Trello eases out your worries to manage project. For web application development I recommend to make following lists Activities, New ideas, Working, Completed and Known bugs. Trello manages your activities, resources and schedules along with file management.
  2. Droplr – Simple and effective file sharing tool, especially during design stage when the pages go under multiple revision. Trello too can be used as a replacement of droplr.
  3. Needless to mention Skype and gtalk
  4. Elance if you wish to hire designers and developers.

I hope this compiled list is as useful as it was to me. Would still like to know if there are any better tools than one mentioned above. Happy web application development

Manage product not a function

In today’s corporate environment company comprises of various function/departments. Often innovation and product excellence is  lost when company concentrates on multiple activities such as employe management, product performance and profitability, meet various statutory requirement, maintain various applications and so on.

Top management has a box full of issues, concerns, glitches which have to be dealt with. How could one manage this humungous task of organization management

A different perspective:

Create products as a business unit, make products and service as a profit as well as a cost center instead of an entire function.

Take for examples products such as Mailing, Hosting, Cloud, Security services etc. What if we make each product as center of excellence.

Lets look at how this type of management drill down, case in here “Mailing Product”.

Cost involved to sell each product – R&D (Innovation), People (Salaries), Operations (help-desk costs, Administration costs, Technology , Facility cost, Travel, Infrastructure) etc.

Profit – Revenue-Cost

A dedicated support function (Compliance, Sales, Procurement, Support etc) can be setup to these individual product (Dedicates resources for Mailing, Hosting, Back up etc). Hence mail service is not just a product in X company it is their individual value stream, a revenue center and a center of product excellence where the objective is to create more innovative products.

Each product have similar center of product excellence teams that strive to be on top. Even the measurements against these particular product becomes manageable.

Typical measurement lists for a product:

1. Number of support calls logged

2. Revenue per head count

3. Number of complaints

4. Delivery within time.

5. Revenues, Profits and so on…

This is a decentralized way to run a company but one may try to see if such management style reap any benefit.

I credit Jack Welch who forced me to think products as individual center of excellence (reference: Straight from the gut)

Wait, now automate

Did your organization deployed rapid automation recently?

If yes,

  1. Did your organization contemplated seriously on impacts of the new automation on internal systems, external systems, suppliers and customers?
  2. Does the new automated system eliminate 7 kinds of waste?
  3. Does the new automated system add value to customer?

If your answer to point 1, 2 or 3 is negative then probably you rushed to automate rapidly that may produce an undesirable outcome to organization’s good intention to automate.

Toyota takes really long time to accommodate any kind of IT solution into their system. Principle 8 of Toyota Production system states to use only reliable, thoroughly tested technology that serves your people and process across boundaries.

At Toyota new technology is introduced only after it is proven out through direct experimentation with involvement of a broad cross-section of people. Toyota will go to great lengths to analyze the impact it may have on existing processes. (The Toyota Way – Jeffrey K . Liker)

Nowadays, majority of IT solutions are implemented with direct proposed solution without any defined metrics, cost-benefit analysis, impact on customers/systems/suppliers, impact on cross functional department, value addition and so on.

Points to remember before we automate:

1.      Establish manual process with the help of Lean, Six Sigma, TOC or any other proven improvement methodologies.

2.      See if the new automated system will add value to existing process, customers, suppliers and other stakeholders and remove waste from the process.

3.     Analyze the impact of new system that affects processes, customers, suppliers, systems and stakeholders

4.     Perform cost-benefit, impact and risk analysis.

These are just few tips but the organization must go to greater lengths and spend a great amount of time to decide implementation of new systems.

Decision making at Toyota imply strenuous planning for 10 months and then implementation in installments such as with pilot production and be fully implemented at the end of the year with virtually no remaining problems – Alex warren.

Let’s not rush to develop or buy the newest technology or application before you thoroughly test it and prove that this new technology will cater to all respected needs.