My Window to Express Design Thoughts

Can you produce Apple-quality products and experiences using the highly autonomous environment you see at Google?

2016-03-30T12:26:00.003-05:00

Here is what I think: I am not sure if Apple was popular for products or because Steve Jobs was selling its products. Moreover, how do we know if Google is not popular.

I have an iPhone, iPad, and Macbook at home for personal use. However, most of my work happens on Google's software (Chrome, Google Search, Gmail, Drive, etc.). Google software ecosystem is phenomenal and works really well. The latest android update ‘Marshmallow’ move android phone experience at par with Apple. More devices in the world run on Android than iOS. Therefore, to deduce that autonomy decreases quality would not be fair.

Apple could work and became successful in autonomous mode because of the brilliance and thought leadership of Steve Jobs. The new product line from Apple after Steve’s death does not excite me anymore. Perhaps, in couple of years Apple will look for a new CEO. The downside with autonomous companies are their dependence on a leader to handhold the employees. Google on the other hand can work with any CEO with very limited oversight or direction and continue developing breakthrough products.

I think none of the approach is right or wrong; we will find successful companies across the spectrum - with Google on one end and Apple on another.

Key Takeaways from Product Management + UX Conference

2016-02-04T12:00:00.001-06:00

I attended Rosenfeld Media's Product Management + UX Conference

Below are some of the key takeaways:

You are not building software, you are changing the world by solving people's problems!

On product strategy and teams:

Strategy is essentially an intent rather than a plan.
There is no such thing as UX strategy, technology strategy, or business strategy. There is only one strategy, it’s called product strategy.
We build collaborative teams. We emphasize skills not roles, therefore, we must emphasize comprehensive strategy, not discipline specific strategy.
The real problem in organizations: a lack of organizational value for UX design. Bring UX to the table!
Core product team consists of PM, UX, and Lead Engineer. All of them have common goals and concerns and need each other’s support and help to achieve success.

How UX can influence executive decisions:

1. Understand ALL aspects of the business (finance, legal, marketing, pricing, sales, release cycles, etc.)

2. Use high-fidelity prototype to communicate new ideas

3. Communicate value by showing data from users (prototype testing or research)

What makes a good product team:

Good product teams celebrate when they achieve their objectives. Bad teams celebrate when they finally release something.
Good product teams have PM-UX-Engg. side by side, embrace the give and take between the functionality, the experience, and the enabling tech.
Good product teams are skilled with many techniques to rapidly try out product ideas to determine which are truly worth building.
Good teams get their ideas from OKRs (Objective – Key Results), customer pain points & struggles, and applying new technology.

Myth: Engineers create products for themselves.

Truth: Engineers are great problem solvers and passionate to create great products, but they can't connect to customers. UXers can help them to connect with customers.

To win, you need a team of missionaries not mercenaries.

Know your Mission
Set your Objectives
Choose your Actions
Learn from your Results

Advice for PMs

UXers can make you heroes by filling knowledge gaps. Leverage their UX skills to fill your knowledge gaps.
Stop relying on and using surveys, they rarely paint the true picture. Go find customer’s real pains and struggles by watching them work with your products. Ask for UX help.
Customer meetings are a rare opportunity to learn. Include UXers in customer meetings.

Advice for UXers

Be there early to shape the product roadmap. Work with PMs to help them shape the roadmap.
Listen and talk to PMs to identify knowledge gaps and help PMs fill them.
Let PMs be. Let them do what they want to do.
Just like a crime-board from detective movies, keep your hypothesis and UX experiments VISIBLE to everybody. Do not rush to PPT.

Porto (prototype)-persona is a persona based on guesses and assumptions. Every product company has enough info to create it. Use proto-persona to create new products.

Wake up your inner child...

2015-03-27T15:38:00.002-05:00

What is your mindset?

This article on brainpickings.com provide a good overview on different mindset types.

As far as I understand, a mindset encompasses everything related to our brain: beliefs, thoughts, actions, and behavior. A mindset is never fixed, it evolves every moment. It's been confirmed that patterns of neuron-firing change with time and every action we take - our mind is plastic, it's malleable. The question is whether we are changing our minds to work better or worse. Our thought patterns and actions influence and change the way our mind works.

When I started my career as an industrial designer. I am sure, I had a growth mindset. I loved experimenting with new materials, technologies, etc. without the fear of failure or retribution. But working in the corporate culture for years, perhaps, had got a hold of me and my mindset changed. After reflecting on my mindset a year back, I realized my mindset had become somewhat fixed; I am not ashamed of letting everybody know about this. But I got aware of the problem and started working towards it.

How did I know my mindset had become fixed? For the reasons listed below:

I was afraid of failure; therefore, I tried to procrastinate new things
I was afraid of embarrassment; therefore, I didn’t speak out new wild ideas aloud
I found comfort in doing the same thing, over and over again.

So, how did I fix my mindset or changed it from fixed to growth? I used the following strategies:

Learn: Instead of looking at everything as a success or a failure. You should look at every task as an opportunity to learn something new. Failures should no longer be dreadful, you should consider them learning opportunities. Add an element of fun to whatever you do. Fun takes away the stress and negativity from mundane and important tasks alike and infuses positivity and playfulness.
Embrace Setbacks: A setback can happen only when you are making a progress; therefore, setback is a good thing to happen. It means you are working towards a goal and moving forward. Setback means you are trying to come out of misery. A few negative spikes, now and then, do not make the bullish trend bearish. What matters is the overall trend instead of these occasional setbacks. Again, embrace and learn from setbacks.
Empathize: Instead of competing with people around you, treat them as your friends. Treat your boss as a friend, colleagues as a friend, customers as a friend. Considering them as friend, even mentally, will help you to empathize with them. When you start empathizing with other people, you make better connections. You make connections that are not only professional but emotional also; and emotional connections ring and resonate better. You become more compassionate. How to empathize? Read this...
Be Grateful: This is an extension of the above bullet, but being grateful for people around you and material comforts you possess is very important. The feeling of gratefulness opens your mind. You start appreciating the world around you. Start telling people how awesome they are. Start sending 'thank you' emails. How to become grateful? Read this...
Meditate: Meditation helps with mindfulness, which is a necessary element for the growth mindset. Mindfulness increases calmness and decreases stress. Meditation reduces the unwanted adrenaline surge in the body and helps us to focus and reflect. You perform things which you were afraid of in the past. Meditation removes the chronic resistance to unwanted thoughts and feelings. Instead of us fighting those feeling, meditation teaches us to embrace them. Headspace is a good meditation app to try.

If you do all the things mentioned above, you will start to feel good about your life, other people's lives, and the world around you. You will stop seeing new things or people as a threat. Instead, you will start embracing them, and look at them with the mindset of curiosity, fun, playfulness, and learning. The mindset of a child.

Wake up your inner child…

Vote for My Entry for Optimal Workshop's WUD Competition

2014-11-18T11:54:00.002-06:00

How to Change Icon Color in 7 Steps

2014-02-06T12:34:00.004-06:00

As a user experience architect, I do not do visual design myself. However, last month I needed to change the colors of some icons that was handed over to me (from Grey to Blue). I thought that should be simple and straightforward task. I searched online for the Photoshop solution but I did not find anything useful. I found vague responses on StackOverflow, which were least helpful to me.

So, I got in touch with my visual designer friend to demystify the approach. He gave me the solution that was straightforward and simple and worked for mono-colored icons. Here are the steps:

Import the icon in Photoshop.
Using Marquee too, select the area you want to apply the new color to.
Lock the layer.
Select the foreground color by picking on the foreground color icon in left hand tool bar.
Enter the desired color values in the Color Picker dialog box and hit OK.
In "Edit" click on "Fill.." or hit "Shift+F5" to invoke Fill dialog box. Ensure "Foreground Color" is selected in the dropdown menu and hit OK.
Save the image with a different name.

Enjoy changing icon colors!

My Designer Hubby - FedEx Logo

2013-10-29T09:58:00.002-05:00

Is Responsive Design the Answer to Mobile Design?

2013-08-01T15:39:00.001-05:00

Mobile design has come a long way. It all started with native apps, then came an era of hybrid apps, then designers went crazy for mobile web (creation of mobile version of websites).

Lately, designers and developers are beating the drum for “Responsive Design.”

At least for now, responsive design appears to be a silver bullet to address all the design issues pertaining to various screen sizes – it is very promising. Responsive design works on the philosophy of: “design once and for all.” Meaning, there is no need to maintain multiple sites, which helps decreasing the development costs. The site – with a single url – renders itself differently on different devices by analyzing the query type using flexible grids, layouts.

So, is responsive design truly the solution to all problems? Most of the posts and blogs indicate that it really depends on user’s context than anything else. Some companies are creating a mash-up of both mobile and regular sites.

eSurance realized that their mobile users had different content needs than desktop users. For example, the mobile users needed contact and policy information handy in case of an accident. On the other hand, desktop users don’t really care for this kind of information. Therefore, they had to create two different sites. Responsive design didn't work for them.

In conclusion, there is no shortcut to identify whether a responsive site or two different sites – one for desktop and one for mobile users – are required. Therefore, as designers it’s our prerogative to go hard on user research to identify correct user scenarios and design accordingly.

Design Lessons - iPad Application for Supplemental Insurance Agents

2013-04-08T13:58:00.001-05:00

Lately, I designed an iPad app for supplemental insurance agents for a global client based out of Chicago. Designing for mobile is always fun because of its connectivity and size constraints. Below are some of the design lessons from the insurance domain that I would like to share.

Supplemental Insurance Industry Context

The retention rate for sales agents is very low, at least for this client. Every year 2000 new sales agents are recruited to maintain an average of 1300 agents on payroll.
For effective selling, agent training is a significant part of the hiring process. Due to low retention rate, the training costs are pretty high.

Sales Agent Usage Context

Uses heavy paper binders for references on medications, sickness, product related brochures, during sales process
Spends significant time prospecting – customer conversion rate is less than 10%
Services customers in various locations; therefore, internet connectivity on iPad cannot be taken for granted
Works with both office and residential customers
Works at variety of locations: parks, coffee shops, fairs, homes, offices, inside the car, etc.

Design Considerations

Design for portrait mode (default) to accommodate more content (long forms, brochures, etc.).

Divide the content (long forms) in multiple sections and sub sections with expand and collapse functionality For e.g. create a master section with expand/collapse functionality and create nested sub-sections with their own expand/collapse controls.

Use lookups with both alphabetical (A -> Z) navigation and search capabilities to reduce errors. List of medications and health conditions can be pretty long; their names are confusing and homo-phonic.

Reduce key strokes wherever possible, typing on iPad is not very user friendly. For e.g. Carry over the information that’s already entered in the form; e.g. names, addresses, etc.

Use wizards, wherever possible, to ensure 100% form completion and reduce training costs. Do not create a linear wizard; instead, allow the agent to hop back and forth between various steps – sales process is highly dynamic and unpredictable. A customer may demand an agent to show something from a step which may not be the next.

Allow the agent to save incomplete forms for future use. Sometimes prospect takes couple of days before making the final decision to pay for the insurance.

Make the forms editable as long as they are not submitted to the system for final processing.

Create effortless payment steps. Customers could use different payment methods or multiple payors for same or different policies – consider edge case scenarios.

Create an easy to read and sign payment summary screen. Customers like to read the application summary before approval.

Create large area for signatures with a finger on touchscreen

Provide clear directions on every step if the agent needs to switch to paper for some reason

Use two or three column layouts for side-by-side comparison of rates and policies.

Agents need to know – just in time – if the customer doesn't qualify for insurance. The disqualification cue on the UI has to be subtle enough to not catch the customer’s eye. Disqualification from one insurance type doesn't disqualify the customer from other insurances. Therefore, customer relationship, even with a disqualified customer, is really important – he can always refer the agent to his friends and family.

Of course, every project is unique and brings its own set of problems and challenges. Irrespective, we should try to leverage device or OS’s guidelines and patterns as much as possible for better user adoption.

Human Factors – Bed Time Reading on iPad

2013-04-02T16:58:00.000-05:00

51% of iPad use is in bed or in front of the TV – according to Neilsen. 61% percent of eReader owners use their device in bed, compared with 57% of tablet owners and 51% of smartphone owners. Sorry, I don’t have the new numbers.

Some people are trying to solve the problem – to read effectively on iPad in bed – by creating plethora of kitschy products.

That’s why as designers, it’s very important for us to understand the context of use to create user friendly applications.

I use my iPad primarily during the bed time to read news and books. In bed, when I read on iPad, lying straight on my back, my viewing area or (scanning area) becomes almost half of the iPad screen length.

Unless I am using lot of pillows (in bed) to elevate my head from the rest of my body, it’s really difficult to view the whole iPad screen easily. Of course, I can hold the iPad slightly higher to make it easier for my eyes to scan the whole screen; however, its weight adds a lot of stress on my arms if continued for a long duration.

It’s incumbent upon us as designers to recognize this problem and provide better design solutions. Let’s not get into product design here; the easy fix is to first recognize the reduced screen scan area during lying on back and design for it.

For the same reason, browser based sites with long scrolls work like a charm for me - when I reach the middle of the page, instead of lifting my head or iPad up to read the bottom half of the screen, I just swipe the page up and bring the new content to the top half. On the other hand, reader applications like “Kindle” do not work in this scenario – at all, and cause lot of annoyance and frustration. Every time I reach the middle of the page, I am forced to lift the iPad screen or my head to view the content in the bottom half.

One solution could be around creating long scrolling pages instead of using paginations. Or provide the user an option to switch between long scroll and pagination based on his context.

I am sure some of you are also facing the same problem. But, we cannot just leave the problem for others to solve for us. We are the problem solvers, we are the designers.

Is Sitemap Dead?

2012-12-07T13:53:00.001-06:00

Sorry, but I needed an interesting subject to draw your attention. Did it work? J

I am facing a growing problem of explaining the concept of sitemap effectively to our clients. It’s very important for the client to understand an artifact clearly – if we are seeking approval on it.

The problem is arising because of the connectedness and dynamism of the content and functionality that today’s technology offers. Gone are the days of static HTML pages, where the user used to navigate on pre-defined paths on the sitemap. We are in the era of portlets, multi-layered dynamic UI, widgets and context sensitive controls.

In today’s world, sitemap:

Is not a page hierarchy; It’s not information hierarchy either
Doesn’t “truly” represent hierarchy levels because the content/functionality can be accessed from multiple routes
Doesn’t map to user flows either

So, the question is: how to best present the sitemap to the client? Moreover, how to explain it effectively and clearly?

Are we doing the sitemap because it has been part of our deliverables – historically?
Does it really have any value? Shall we start doing conceptual sitemaps going forward, as the article (link below) suggests?
Does it makes sense to seek client approval on this – even when they don’t get it?

This article on Sitemap in UXMAG clearly defines my problem - http://uxmag.com/articles/is-the-sitemap-losing-its-client-facing-steam

I am attaching a conceptual sitemap as an example. Do you think that the conceptual model works better than traditional sitemap?

I would like to hear your experiences, comments, thoughts, and suggestion on the same.

The best way to use iOS6 maps

2012-10-08T11:29:00.002-05:00

Who Paid Tributes to Steve Jobs

2011-10-14T12:10:00.000-05:00

Steve Jobs (1955-2011) touched so many of us through his high-end consumer products. His early demise has created a big void both in technology world and in our hearts. Everybody - including fans and foes - came together and prayed for his soul.

Here is how Apple, Google, and Amazon paid tributes to this visionary -

And, here is how Microsoft's Bing ignored to pay respects -

*These screenshots were taken on October 6, 2011- a day after Steve's death.

Is Apple Going to Become Google of Voice Search

2011-10-05T15:43:00.002-05:00

Like everybody else, I was not disappointed by iPhone 4S announcement. Everybody was expecting Apple to upgrade the phone, which Apple did with: new processor, camera, iClound, and iOS 5; however, it still has the same look and feel. Perhaps, that's why it's called iPhone 4S not iPhone 5.

"Siri" is now trending on Twitter. Though, I did not like the name but the idea of having a "voice controlled" personal assistant is very powerful. Siri does not, just, parse the words in a sentence but also makes sense out of it. This is a huge improvement and - sort of - a dream come true for a lot of us. I am sure that after Apple's announcement others are going to follow its footsteps.

Apple really needed something to exist in business for long term. The most powerful companies, today, are the ones who know the most about us. Sounds creepy, but that's really true. Think of Google and Amazon, both the giants know so much about us. That's why they can tailor their solutions for each of us.

Everybody was questioning Apple after it opened its data center in NC. Now, everything "really" makes sense. After the launch of iCloud, Apple launched Siri yesterday.

Siri will remain a beta product for sometime. It may not be a perfect personal assistant that you dream of, but it's a great beginning in Natural Language Processing space.

Now, here is the catch - Apple's data centers will not only be collecting mountains of data from iCloud but also be storing, managing, and analyzing voice queries using sophisticated natural language processing algorithms. Siri could, potentially, turn Apple into Google in terms of voice search – the next wave in search technology.

It’s a win-win situation for Apple. Apple may use Google search to retrieve results but all the "rich" data queries from Siri will remain with Apple. Google will not be able to use that data in any way.

Is Apple waiting to become Google of voice search? Only time will tell....

Thoughts?

11 Big Google Plus Secrets Revealed

2011-07-18T16:46:00.011-05:00

Although, it is too early to comment on Google Plus's success or failure, it surely has become a talk of the town these days. Google has packed this product with some awesome features to deliver a powerful punch. Learning from its past failures - from products like Buzz, Wave, and Orkut - Google, this time, has meticulously worked for the success of every single feature on Google Plus.

Google Plus is packed with smart features. But, some features help it to stand out from the competition.

Scarcity

Like Apple, Google has its own way to intrigue people for its products. Google creates the desire for its beta products by creating scarcity. If your friend is on Google Plus and you are not, it definitely is a matter of grave concern. Scarcity makes Google Plus a highly desired product - money cannot buy you an account.

Virality

Google products spread virally through personal "invites," of course available in limited numbers per user. An "invitation" coming directly from a close-and-trusted friend to use a product demands more attention and quick action than any other existing form of marketing. The probability of the invitee using the product increases many folds. Through viral distribution Google Plus has amassed over 10 million users in just two weeks.

Adherence to Conventions

Google Plus does not have an uncanny resemblance to Facebook's design and interaction by accident. As a matter of fact, Google has stolen most of Facebook's design for Google Plus. Remember the saying, "good designers copy, great designers steal?" Google is aware of users comfort level and expertise with Facebook user interface; and, by stealing the design from Facebook, Google has ensured that Google Plus's design does not overwhelm the users with a "completely" new interface. Using Google Plus is a cake walk for Facebook users.

A Suite of Products with Single Sign On

Not all of us are technically savvy to efficiently and effectively manage plethora of username and passwords with a zen-like ease. Managing and remembering these growing number of sign-on credentials is a big pain among web users. Google offers a wide array of products, ranging from: Web, Mobile, Media, Geo, Home & Office, Social, Specialized Search, and Innovation. Google has perfected the complex art of single sign on; the user can seamlessly switch between Google products, if he is already signed on.

Our life goes beyond social networking websites. We routinely use email, documents, rss readers, maps, storage, etc. While Google caters to almost all of our online needs, Facebook and Twitter fail terribly on this front.

Google Bar

Often unnoticed, do not go by its size. Google bar, though, is still evolving, it definitely delivers a punch. It is both simple and powerful at the same time. Google bar not only provides access to all Google products/services in a single container but also takes a real time dashboard avatar - by providing notifications on Google Plus. For sure, in future, like Apple's new iOS 5 notifications, Google will start notifying across its entire product suite.

"Circles" Feature

Most of us face the perennial problem of differentiating between personal and professional messages. Some users use Twitter to market themselves and Facebook to communicate with family and friends. Others maintain two different accounts on Facebook and Twitter - one for personal and the other for professional use. Multiple accounts, obviously, are painful to manage and act as deterrents to many.

Though, applications such as Hootsuite provides an option to integrate various social media websites in one place, it, of course, does not allow adding other popular services such as: mail, photos, videos, blogs, etc. Also, most of the users are technically-challenged to use Hootsuite.

Google Plus seems to - gracefully - solve this tough problem by creating "Circles." Circles enables and empowers the user to create and share messages targeted to specific groups from the same message box with great ease.

Unlike Facebook "Groups," creating a new Circle in Google Plus is a piece of cake. Circle has a great visual interface with intuitive drag-n-drop features to quickly create and edit members.

Stream Filter Feature

The ease with which messages from various circles can be filtered in Google Plus is highly commendable. The quick filtering helps the user to quickly find the messages of his interest instead of mining for relevant messages by reading through a long scrollable list.

"Hangouts" feature

Facebook rushed to launch video chat soon after Google Plus launch. Perhaps, Mark Zukerberg's team needed something to compete with "Hangout." The beauty of "Hangout" is its ability to facilitate multi-party chat. This much desired video-chat feature was just not available for free to the masses.

With Hangout, one can create a live video chat session with multiple people without being a nerd - simply by using Hangout from Google Plus. According to Jay Morgan, a User Experience designer: "Group video chat has a lot of potential for getting people together to make a decision or have a conversation. It's better than a call, and it's better than many 1:1 conversations."

Invisible Chat

For many - obvious and vague - reasons, sometimes we just do not want to make ourselves available on chat. However, we may require to chat with just one person without making ourselves online. Facebook Chat does not allow a user to chat with other users in invisible mode, which is a big drawback. Sometimes, you just do not want to get distracted by other users. Google Plus, however, solves this problem by allowing its user to chat in invisible mode.

Disable Reshare

Google Plus allows its users to disable further sharing of their posts. This feature ensures that sensitive and private information remain in close circles. It enables the user to take control of the information that he shares with his circles.

Message Amplification

Google Plus informs the user about the amplification of a post by displaying the number of times a post is re-shared and the people involved. The names who re-shared the post help the user to identify the amplifiers in his circle, helping him to concentrate on these people.

For all the reasons explained above, it is clear that Google Plus has the potential to stick on the social media landscape for a long time.

Please read my previous posts in a series of Google Plus:

Post I - Is India Heading Towards the Biggest Virtual Migration?
Post II - Why Google Plus Will Click in India?

If You Were to Rename Google +1 Feature

2011-07-18T09:36:00.000-05:00

A buzz is going around in social circles about Google +1 feature. It seems that engineers at Google, like always, decided to use mathematics as a tool to quantify social interactions. Although, Facebook's "Like" does quantify the number of likes on a post or a picture, the term "Like" itself has been historically a part of our day-to-day conversations - unlike +1 from Google. The notion of "Like" has been so deep-rooted in our psyche that we automatically associate ourselves without thinking twice about it.

Steve Krug, the author of the book "Don't Make Me Think," advocates design with minimal cognitive strain. Google's +1 on the other hand, makes you think twice about its usage and intended notion.

If I liked a car, I never say, "I +1 this car." +1 is a mathematical concept; and, is so far away from vernacular.

A successful website sticks with the existing users mental model.

If you are given an option to rename Google's +1 feature to make it more "humane," what would it be?

Why Google Plus Will Click in India

2011-07-15T16:36:00.012-05:00

This is Part II in the series on Google Plus: Is India Heading Towards the Biggest Virtual Migration after Part I.

Though the post investigates India's potential adoption of Google Plus, it may be a big hit in other countries too. However, examining cultural and contextual nuances for every country is beyond the scope of this post.

Demographic Make-Up of India

A Big Pool of Technocrats

India has one of the biggest pool of technocrats; with most of them working for global IT firms as software developers and engineers. People in IT are not afraid of trying new technologies; as a matter of fact, they are the "innovators" and "early adopters" of adoption curve.

The young crowd in India loves technology, trusts Google products, and adopts new products real fast. They loved Orkut at one time, therefore, they will be more than willing to try Google Plus.

Age of the Targeted Population

India has one of the biggest population of youngsters and young adults. According to Wikipedia: India has more than 50% of its population below the age of 25 and more than 65% hovers below the age of 35. Younger population exhibits curiosity, experimental nature, and higher risk taking ability with new things. According to a study on age related difference in risk taking: when compared to their younger peers, older adults are supposed to prefer to make safe as opposed to risky responses.

With such a young population the chances of number of users trying Google Plus increases manyfold - and, therefore the chances of conversion.

No Language Barrier

India speaks and understands English. India is second largest English speaking country with 11.38% eligible speaker population after USA.

Therefore, India can quickly embrace any new service - in English - without waiting for local translations. Google Plus is good - as is for Indians.

Existence of Collectivistic Society

Unlike West, where the society is "Individualistic," Indians are motivated by group needs. In these societies, kinship ties are much stronger and may take precedence over expertise in matters of appointments and promotions.

Indians are more likely than not get influenced and persuaded by trusted recommendations. The more the number of people recommending Google Plus, the more will be the number of users adopting it. Once this process gets into infinite loop, Facebook will be out of the picture.

Huge Overseas Population

Many Indians have migrated abroad. The NRI (Non-Resident Indians) and PIO (Person of Indian Origin) population across the world is estimated at over 30 millions. Most of them are still in active contact with their friends and family back in India; and, many rely of social media websites for real-time news and updates from their near-and-dear ones.

Sometimes members of the same family live in different countries and cities. Talking to all of them at the same is a big technical challenge. Skype allows video chat with one person at a time and so does Facebook. Hangout feature from Google Plus allows such geographically distributed families to video chat at the same time. Certainly, this feature is going to attract the attention of these families.

Migrate Orkut Accounts to Google Plus

Although, as of today, Google has not announced any migration option to Google Plus for its Orkut users. But sooner or later Google will allow Orkut users to port their data to Google Plus - after all, both the products come from Google. This will help Orkut users to carry over all their photographs, contacts, posts, and other details to Google Plus without any data loss.

Considering that India is the second largest user of Orkut in the world, the migration option will certainly work like a charm for Orkut users. Imagine moving your entire history on a click of a button. This will not only help Google to consolidate all its Orkut user base on Google Plus but also increase the number of users dramatically.

For all the reasons mentioned above, I believe that Google Plus will certainly usher in a new dawn of social networking in India.

In my last post in the series on Google Plus, I will be discussing about Google Plus features.

Building Mobile Applications Using Web Technologies

2011-07-14T15:22:00.003-05:00

Most of the IT companies have large development teams that focus primarily on web technologies. These teams are ultra smart and efficient in building web based applications. However, with the advent of mobile, more and more clients are demanding and investing in mobile applications development also.

There are number of mobile platforms choices available to a user. Therefore, most of the times, clients demand for cross platform compatibility. Of course, all the mobile platforms provide developer SDK to build native applications. But with so many platforms, the real challenge, for the IT organizations, is to perfect all of them.

It does not make sense for the large IT organizations to create platform specific teams – the overhead will be huge. And, it does not make sense for the client to approach different vendors to develop applications that run on multiple platforms. It, therefore, makes sense to develop mobile applications leveraging the existing web technology know-how in the organization.

This is a win-win situation for all the parties. IT companies can use their existing pool of developers without getting them trained on specific platforms. Clients can continue working with their existing IT vendors without seeking out for small time mobile application development shops.

The very first thing is to get the client’s buy-in on the choice of application type – native vs hybrid vs web.

Here are some of the advantages and disadvantages:

	Native	Hybrid	Web
Speed/Performance	Almost Instant	Almost Instant to Slow Depends where the content is served from – Local Vs Web	Fast to Slow Depends on Network
Offline Mode	Yes	Yes For local content only	No
Findability	Fast – click an icon	Fast – click an icon	Slow Requires the user to open the browser and type the web address
Hardware API Access	Full Access	Full Access	Restricted to Limited
Sell on App Store	Yes	Yes	No Access could be sold to the user but the process is not as seamless as 1-click download from the app store.

If you plan developing a native application

Appcelerator Titanium Development Platform: Titanium makes cross-platform native application development easy. A free and open source application development platform, Titanium lets you create native mobile, tablet and desktop application experiences using existing web skills like Javascript, HTML, CSS, Python, Ruby, and PHP.

If you plan developing a Hybrid application with a native wrapper for multiple platforms

Web applications do not get full access to the device API. Phonegap bridges this gap by allowing developers to author native applications with web technologies and provide access to device APIs and app store.

Phonegap allows to package Sencha Touch code and resources into a binary app – ready to distribute to Apple, Android, Palm, Symbian, and BlackBerry devices.

If you plan developing a web based application

Sencha Touch: Sencha Touch allows you to develop mobile web apps that look and feel native on iPhone, Android, and BlackBerry touch devices.

jQuery Mobile: jQuery mobile framework takes the "write less, do more" mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms.

But keep in mind: Web apps do not get full access to the device API.

--------------------------------------------------------------------------

Further reading

Here is a great discussion between Phonegap Vs Appcelerator

http://savagelook.com/blog/portfolio/a-deeper-look-at-appcelerator-and-phonegap

http://savagelook.com/blog/portfolio/appcelerator-vs-phonegap-vs-adobe-air

http://stackoverflow.com/questions/1482586/comparison-between-corona-phonegap-titanium

Here is a wonderful presentation on Native vs Hybrid vs Web: http://www.slideshare.net/fling/native-v-hybrid-v-web

Six Rules to Designing Mobile Apps: http://www.slideshare.net/fling/6-rules-to-designing-amazing-mobile-apps-media-2011

Is India heading towards the biggest virtual migration? - Part I

2011-07-13T13:42:00.005-05:00

We Love Opportunities

Migration is an intrinsic part of human nature. We have, historically, migrated to various parts of the world for various reasons ranging from opportunities to war. Wikipedia defines human migration as: a physical movement by humans from one area to another, sometimes over long distances or in large groups.

However, a virtual migration is slightly different - it happens over the web. One just needs to create a username and password on a new website and stop using the current one. Again, innovative & distinguished features of the website and social pressure are the two main factors that fuel virtual migrations - much like the physical migrations.

Why India

This post talks about India for one obvious reason: its population. Today only 8.4% of Indian population has internet access; still, India has around 100 million internet users. With just 50% internet penetration, the usage will shoot to 600 million users. The size of the market in India is huge and the opportunities for online revenues are endless.

A brief History of Social Networking

The world around us changed in 2002 when Friendster was launched - the social world around us had become virtual, for the very first time. Friendster, therefore, could safely be considered as the grandfather of social networking.

Just a year later, Myspace was launched in 2003. Certainly, it was Myspace that truly revolutionized social networking among teenagers and young adults. It soon became a hosting place of millions of gaudy homepages. In 2005, Myspace had over 27 million users and a 400% growth since the last year.

Given Myspace's unprecedented success, who would have thought of its demise as a social media superpower. But, it happened; and it happened a lot sooner than expected. On Sep 26, 2006, Facebook opened its door for the general public - to everyone of age 13 and older.

What Facebook provided to its users was a new, clean, and fresh user interface. Facebook provided a clean white "wall" for status updates. The new Facebook look soon won over the immature, gaudy, garish, and sometimes repulsive - full of intimate pictures - Myspace homepages. Facebook also provided more mechanisms for collaboration over Myspace pages. With smart features such as: Wall, Chat, Photos, Groups, Events, Games, and Applications, in a well designed user interface, Facebook overthrew Myspace from its number one spot in 2008.

For some unknown reasons - perhaps, a topic of anthropological research - Facebook remained less popular in big developing countries such as India and Brazil during 2006 - 2009.

The choice of Social Networking platform by users is, somewhat, mystical. It is largely based on the preference of the masses - and, not you as a person. Back in 2006, when I created my Facebook profile in India, I had nobody to talk to. All my friends were hanging out on Orkut. Ultimately, I had to abandon Facebook and join Orkut. At that time, users in India and Brazil were going crazy over Orkut - a social networking service by Google.

Orkut was created by a Google engineer - Orkut Büyükökten, and launched by Google to general public in 2004. Only three years later, in 2007, according to comScore social media statistics, Facebook had only 7.1% usage compared to Orkut's 43.0% from Asia Pacific region (primarily from India).

But, the change happened in India - finally. Orkut lost its number one status. For the first time, in July 2010, Facebook surpassed Orkut to become number one social media site in India. According to comScore: visitor growth to Facebook.com was up 167 percent in September 2010 versus year ago reaching 24.3 million visitors, with Orkut witnessing a 19-percent increase to 18.7 million visitors. In year 2010, Facebook witnessed the third biggest 228.28% growth in India, just behind Thailand (259.60%) and Brazil (270.01%).

Google Plus - A New Kid on the Block

Currently, Facebook has amassed more than 30 million user in India. India is the third largest user of Facebook as social media platform, just behind USA and Indonesia.

The migration of users from Orkut to Facebook, in India, was certainly a great - but widely unnoticed - event. Had it been a physical human migration, it would have leapfrogged all migrations till date in human history.

With the arrival of Google Plus, are we going to witness another great virtual migration of users from Facebook to Google Plus?

I strongly feel that users in India will certainly migrate to Google Plus in the coming months. I will be discussing number of reasons to support my argument in Part II - Why Google Plus Will Click in India of the series on Google Plus.

How to run Axure prototypes on iPad or Microsoft Surface

2011-06-15T16:05:00.005-05:00

Update 12/7/2012: I realized that GoodReader experience was frustrating both for me and my clients. Therefore, I was looking for alternate ways to demo iPad apps.

Lately, Axure started cloud share at www.share.axure.com to enable easy sharing of prototype with clients. It opened a new way to interact with prototypes. I did some research for iPad browsers that offer hide feature for browser chrome. Fortunately, I found Atomic Web Browser, which offers full screen browsing.

The interaction experience is much better on Atomic Web Browser than GoodReader. The only caveat is the browser control bar, which floats on the screen. The controls are transparent gray - so, they don't bother a lot on white background. However, the controls stand out against black background, as indicated in the attached image.

Remember: Atomic browser requires internet connectivity.

Microsoft Surface users need not to worry about full screen browsers. IE10 is provides full screen view on Windows 8. Mozilla is also developing a full screen browser.
--------------------------------------------------------------

As a User Experience Architect, I create and present Axure prototypes, on a day-to-day basis, for various platforms. Axure generates HTML output which can be rendered with ease on any browser.

These days I am working on a a couple of iPad applications; which requires me to present Axure prototypes on iPad. Safari is an option to run the HTML on iPad but the browser's header and footer make the demo look more for the web than the iPad.

Here is what you can do to get the true iPad app experience. Get rid of the browser.

How?

Create your prototype without iPad frame. Use canvas size of 1024x768 pixels. (You may have to tweak your canvas a little to fit properly on iPad, as, I believe, Axure doesn't offer pixel perfect rendering.

Next....

Download goodreader from the App Store. It costs only $4.99. Install the app on your iPad.

Once the app is installed - All you have to do is:

Connect the iPad to your computer that you sync with
Open up iTunes
Select the iPad from the devices on the left sidebar
On the right pane of the screen, click on "apps" and scroll down the page until you see the last section called “File Sharing”
Click on GoodReader
Click “Add…”
Browse to and select your zip file with the demo in it

Once added:

Launch the GoodReader app on your iPad
Click on your zip file on the left
Click on Manage Files on the right
Click on Unzip

This will create the directory structure for the app.

To launch the demo all you have to do is:

Launch the GoodReader app on your iPad
Select the proper directory for the demo
Click on index.html (and then you are in). Or, to get rid of Axure frame, click on home.html or whatever your first Axure page is.

Voila, you just created a true Axure prototype for iPad.

Note: To avoid GoodReader toolbar to appear while demo-ing, try pressing and holding the buttons/links in the prototype instead of tapping it. It works for me.

Are you afraid of Twitter?

2011-06-13T12:05:00.001-05:00

This post is, certainly, not for tweet-o-holics, who wakeup and sleep with smart-phones on their sides. The post, also, respects an average Joe who manages to Tweet at least twice a week - either to report on their pathetically depressing meals or extremely ecstatic moods.

Believe it or not, even today, we have some social-media phobics - for obviously good and bad reasons. Be careful on social-media but paranoid. This post is one more attempt to motivate them to engage with twitter-verse.

As I am writing this post, I have 3748 Tweets and 286 Followers on Twitter.

My first tweet was tweeted in 2008. Then, like most of you, I gave up after my 10th tweet. "This ain't for me," was my response to myself. However, as Twitter grew more and more popular, I felt tremendous pressure from my User Experience (UX) community to become part of it - again.

Believe it or not, UXers are made to work on the bleeding edge of technology. They craft new experiences that leverage and explore the true potential of technology. I started again on Twitter in mid 2009 and never stopped after that.

Here is how I am benefitting from Twitter:

Network with my UX community in and outside Keane.
Learn about new articles, news and publications on UX and other areas without Googling about them.
Hear people's opinions on various topics.
Guage trends in technology, social media, and other areas.
Sell my thoughts, ideas, and opinions on UX and other topics.
Participate in discussions, debates, and sometimes just fun stuff.
Hear about new job opportunities from my friends and followers.
Believe it or not, I have got job offers through DM feature in Twitter.

Overall, it's a great tool with lot of potential. You will benefit from it only when you use it.

Let us discuss. Why do/do not you use Twitter?

And, of course, if you are/or going to be on Twitter, do not forget to follow me. My username is @praveenkvma

Paper Blinds

2011-06-07T16:46:00.001-05:00

Scenario: New home. Forty one see-through glass windows. No blinds. The blinds installation guy takes three weeks.

Problem: How to protect the privacy of occupants?

Tools: A pair of scissors, duct tape, staplers, some architectural drawings, and a designer mind.

Steps:

Attack one window at a time.
Measure the paper size, just once - of course, the size of paper will stay the same.
Measure the window size.
Use duct tape to stick the paper to create bigger surface area to cover the entire window.
Use scissors to cut off extra paper.
Use extra paper to create top and botton borders for extra stability and strength. This will help the blinds to stay straight.
Staple the borders and tape them to the paper.
Hang the freshly made paper blind using a step stool and duct tape.
Voila, you just created your first paper blind.
Keep repeating steps 1 through 10 until you have covered all your windows.
Sip a cup of green tea, appreciate your creation, and wait for another three weeks to get "real" blinds.

Here are some of the pics:

Social Media for Organizations

2010-09-29T16:23:00.001-05:00

I created this presentation to explain why Social Media is important for organizations. It is no longer about asking, "What social media will do for us," but, it is about asking, "What Social Media will do to us?"

View more presentations from praveenkvma.

How to Design a $100 Tablet – A Quick Overview

2010-08-25T10:54:00.000-05:00

Intel's Classmate PC (Eduwise) low-cost PC revealed (May 04, 2006)

The head of the world's largest chipmaker unveiled a mobile personal computer Wednesday designed to provide affordable collaborative learning environments for teachers and students around the world.

Intel Corp. Chief Executive Paul Otellini said the $400 machines, code-named "Eduwise," will feature built-in wireless and will be able to run Microsoft Corp.'s Windows or the Linux operating system.

"What we want to do is accelerate to uncompromised technology for everyone in the world," Otellini said during a demonstration at the World Congress on Information Technology in Austin. "No one wants to cross the digital divide with yesterday's technology."

http://www.seattlepi.com/business/268946_techcon04.html

http://www.intellearningseries.com

How to Design a $100 Tablet – A Quick Overview

The Context

Education is one of our most fundamental needs that help us to live with respect and dignity in society. It is the gateway to vast knowledge that ultimately leads to wisdom and virtues. Despite of education’s profound importance in our lives, not every is fortunate enough to receive it. Access to education is a grave issue in developing nations. The other important issue to ponder about is the quality of education.

Some Quick Facts on Education in India (Based on 7^th All India School Education Survey)

· Less than half of India’s children between the age 6 and 14 go to school.

· A little over one-third of all children who enroll in grade one reach grade eight.

· At least 35 million children aged 6 – 14 years do not attend school.

· 53% of girls in the age group of 5 to 9 years are illiterate.

· In India, only 53% of habitation has a primary school.

· In India, only 20% of habitation has a secondary school.

· On an average an upper primary school is 3 km away in 22% of areas under habitations.

· In nearly 60% of schools, there are less than two teachers to teach Classes I to V.

· On an average, there are less than three teachers per primary school. They have to manage classes from I to V every day.

· High cost of private education and need to work to support their families and little interest in studies are the reasons given by 3 in every four drop-outs as the reason they leave.

· Dropout rates increase alarmingly in class III to V, its 50% for boys, 58% for girls.

· 1 in 40, primary school in India is conducted in open spaces or tents.

· More than 50 per cent of girls fail to enroll in school; those that do are likely to drop out by the age of 12.

· 50% of Indian children aged 6-18 do not go to school

(Data extracted by Tarang.org)

The Intervention

A marketing team in a large computer chip manufacturing company assessed the education situation in India and other developing countries. The team proposed using technology to increase the effectiveness, quality, and reach of education. Further research, by the team, on economic scene and expenditure capacity of people in these countries suggested an opportunity to introduce an inexpensive futuristic device to support educational needs of students.

The Design Brief

The chip maker approached a human-centered-design firm to design a breakthrough product – A $100 device that would use the client’s chipset. The product was positioned somewhere between a Smartphone and a Laptop.

A team of researchers (including me) was created to conduct user research and design. The main focal points were:

· How students learn at school, home, and tuitions

· What are student’s motivations, goals, aspirations and needs

· How do students interact with their parents and teachers

· How teachers interact with students and within themselves (Teaching Methods and Sharing of Information about students)

· How teachers could best introduce technology into the classroom

· What are parents expectations from their children’s school

· How the new product fits in the education eco-system (Home – School – Tuition; Parents – Students – Teachers)

The Process – Contextual Design

According to Wikipedia: Contextual Design is a user-centered design process developed by Hugh Beyer and Karen Holtzblatt. It incorporates ethnographic methods for gathering data relevant to the product, field studies, rationalizing workflows, system and designing human-computer interfaces.

University of Twente, New Zealand, goes further and breaks apart Contextual Design into seven parts:

1. Contextual Inquiry: uncovers who customers really are and how they work on a day-to-day basis to understand the customers: their needs, their desires and their approach to the work.

2. Work Modeling: capture the work of individuals and organizations in diagrams to provide different perspectives on how work is done.

3. Consolidation: brings data from individual customer interviews together so the team can see common pattern and structure without losing individual variation.

4. Work redesign: uses the consolidated data to drive conversations about how to improve work by using technology to support the new work practice.

5. The User Environment Design: captures the floor plan of the new system. It shows each part of the system, how it supports the user's work, exactly what function is available in that part, and how the user gets to and from other parts of the system.

6. Test with customers: Paper prototyping develops rough mockups of the system using Post-its to represent windows, dialog boxes, buttons, and menus.

7. Putting it into practice: Prioritization helps the transition to implementation by planning your system implementation over time. Object-oriented design helps you move from systems design to design of the implementation.

Our Process

It is one thing to read the process in books and it is another thing to implement the process - in practice. Every project comes with its own uniqueness and requires custom solutions. Given the constraints of time, context, and nature of project the design team had to tailor the design process to suit project requirements.

The design team, obviously, had Contextual Design experience from other projects and clients but this project required a different approach. It was a large scale and face paced project for a large client. Also, the introduction of the product would bring about a major social change to the lives of many students, teachers, and parents. The design team’s responsibility exceeded far beyond traditional professionalism norms and blended into moral and social responsibility. The team was in the process of designing the future of students and their lives in developing countries.

The tailored Contextual Design process consisted of following steps:

1. Identify the Design Team

2. Recruit Participants

3. Conduct Contextual Inquiry

o Document pictorial artifacts of physical spaces that students interact with (Home, School), materials, objects, technology

o Document various observations during contextual inquiry

o Interviews with Students, Parents, and Teachers

4. Analyze and Interpret Contextual Inquiry Data and Create Affinity Notes

5. Create Affinity Diagrams using Affinity Notes

6. Create Personas based on Research

7. Envision Future

o Analysis – of all dependencies and relationships in the system

o Ecosystem – with all the entities and establishing relationships between them

o Future Scenarios – initiating the process of change

8. User Interface Requirements and Design

9. The Product Conceptualized – User Testing and Refinements

The design process worked successfully for the team. The process helped the team accomplishing the design goals: in time, with great quality control, and without personal biases.

Identify the Deign Team

Five design teams were created to conduct user research. Each team had three researchers. The research informed the design and development of the product.

Team Structure:

· Moderator (Interviewer)

· Observer (To capture behavioral, emotional, and contextual aspects)

· Recorder (To transcribe the interview)

Recruit Participants

Forty five participants were recruited for the project. The human centered design firm hired an external vendor to take care of the recruitment process. Of course, the design team provided the vendor with details of user group profiles.

Forty five user interviews of two hours each were planned across all the stakeholders: Students, Teachers and Parents. Three distinct categories were created to cover users and schools across various economic strata in the society.

Conduct Contextual Inquiry

The design team observed participants in the context of their work environment while participants were busy doing their day-to-day education related tasks. The team documented the observations (including pictures and drawings of workspaces) related to participant’s core educational tasks. The team captured explicit and implicit aspects by probing and discovering.

All user interviews were non-technical in nature. Interviews were primarily designed to capture user needs, motivations, goals and desires.

The team briefed the participants – about the nature of interviews and project focus – at a very high level without revealing any information about the product itself. The team never mentioned “computer” or “technology” in their design briefs to participants in order to avoid biases in the data.

Analyze and Interpret Contextual Inquiry Data and Create Affinity Notes

The team collected large amounts of data from forty five interviews. It was essential to share the data across the core design team. Every evening the team would meet for couple of hours in the meeting room to analyze the data collected during that day.

Affinity notes were created on post-its to capture: important observations, issues, breakdowns in work, insights, and design ideas. The average number of affinity notes for forty five interviews were sixty per interview. Given the number of interviews and humongous data sets, the team decided to capture only important aspects of the interviews as affinity notes.

Create Affinity Diagrams Using Affinity Notes

Affinity diagrams were used to make sense out of this large data set. Affinity diagrams helped the team to find patterns, hidden connections, and driving themes from large information set. It provided great insights into unseen linkages of information and helped the team identifying issues and gaps.

Create Personas

Personas are a great tool to communicate understanding of users to clients and other teams involved in the process. Also, it keeps the design team focused on user goals. A persona for every user profile was created. Overall, fifteen personas were created to represent all user categories. All personas were backed by exhaustive user research.

Envision Future

The team visualized how the new technology could fit in the existing eco-system. The eco-system consisted of: students, parents, and teachers. The ecosystem depicted flow of relationships, hierarchies, and dependencies, and information between each of its user profiles. It helped the team understanding the dynamics of the ecosystem. The team wanted to design the new device in such a way that it would meet everybody’s needs and goals without creating negative interference in the ecosystem. The new device should solve all the issues and gaps uncovered in the affinity diagrams.

The team created future scenarios with the help of personas. In the scenarios, the stakeholders of the ecosystem used the product to accomplish their common goals. The “product in use” scenarios helped the team in creating “winning” features and functionalities for the product.

After five grilling weeks, the team produced three concepts depicting both the user interface and product design.

The client finally picked one of the concepts for final product development.

Yes, a-hundred-dollar-tablet for education was born!

A chart depicting the design process:

How to Kill the Death Grip - A humble design suggestion

2010-08-23T17:28:00.001-05:00

Design is the intrinsic element of lifestyle - the essence of living. The more we talk, the more we explore it. This is the one-liner on my blog header. I firmly believe in design discourses as an exploration and discovery tool.

Lately, we heard a lot about Apple iPhone 4.0 antenna design flaw. Apple never accepted the flaw and orchestrated a big cover up, until lately, when it succumbed to deafening media coverage and continuous customer complaints.

It surprised me how Apple could create a product with such a basic design flaw. The wrong placement for the joint of antenna is definitely not an engineering flaw but a design flaw.

Someone in the design team did mess up user research. He forgot to perform contextual inquiry with the users while they used the product. Or he did not write enough future scenarios depicting the usage of this product. Something certainly went terribly wrong somewhere in the design process. Otherwise, Apple wouldn’t have to teach us how to hold mobile phones or give away free jumpers. A good design fits itself seamlessly in the user space in all usage scenarios.

All these years, Apple thrived on its outstanding user experience and high quality products. One design flaw has significantly tarnished its clean image. People are afraid of upgrading their phones to iPhone 4.0 from iPhone 3.0. Instead, they want to wait for a new hardware release with the problem fixed.

As a product designer, I also thought about the flaw and looked into different ways in which my friends and I use our mobile phones. I came up with a quick sketch based on my observations. The best place for the band seems to be top center.

I would love to get your feedback, suggestions, and criticisms on the design.

Learn to Get it On Paper

2010-06-08T11:45:00.000-05:00

Visual thinking is an important weapon in the arsenal of a designer. It not only helps solving complex problems but also helps in depicting complex relationships, task-flows, processes, etc. in a simplified manner.

Two days back one of my project managers came to me and requested help for a production support model, which he himself created in Microsoft PPT and was not happy with. He told me that his boxes/blocks model that spread across three slides was not really convincing and presentable. It not only lacked important relationships between components but had some of the components spread across multiple slides. He was not sure how to fit them together on a single piece of paper.

The crux: Information was in his head but not on the paper.

I decided to take the challenge. I sat with him for 2 hours where he explained me the entire model and the components associated with it.

My task was to:
1. Simplify the complexity
2. Establish clear hierarchy and relationship
3. Represent all the components
4. Make everything look presentable to an EVP
5. And create a single diagram.

This is what I created…

And here is the response from my PM after looking at the new diagram:

“This is exactly I wanted and it looks awesome. Thanks a lot!”

Not a bad day, considering that all this happened on Monday.

How did I do it? Here is a simple process:

Jot down all the components on a piece of paper.
Draw all these components on individual 3M Post-Its. Draw people as people and not as boxes; servers as servers, etc. You do not have to be an artist for this. Use simple graphics. Post-Its allow easy movement of components without drawing them all over again.
Paste the Post-Its on a whiteboard or a big sheet and using markers try to draw lines to establish relationships between them.
The art is to minimize the number and criss-crossing of lines.
Move the Post-Its if the current relationships do not make sense.
Keep on repeating step 3,4 and 5 until you have got what you wanted.
Whoa! You are done. What a nice job! :)

Remember, this is an iterative process. The more the time spent on thinking the better the end product gets.