The travel bug

Raise your hand if you love to travel :). Both for work and pleasure.

Being a designer has taken me to new places like US, UK, Malaysia and India. I love to travel.

Its easy to travel in India, my native country. The modes of transport are easy to understand and arrange. Same is the case with UK – great country for public transit. Malaysia is good too. It is in US where I struggled with – by using public transit. The fault was entirely mine.

I was in California after a good gap of 7 years. I should have started driving the car in US by now. It was my second visit to the country, longer than the previous one. The right-to-left wheel transition was a bit baffling to me, initially. I tried driving once and then gave up the thought. I relied on friends to tag along in their cars on weekend outings and sometimes choosing the VTA trains to roam around.

Weekend agenda was simple – explore new places. The downside of using the public transit was time – a simple journey from San Jose (CA) to Gilroy (CA) is a 40 min drive. A public transit journey (combining train and bus) taken around 2 hrs.

Back then, we did not have smartphones. The iPhone was 1yr old. Google was touted to release its first Android device. There was no blazing internet on the phone that we have now. No question of maps on phone.  It was July 2008.

On one of the weekend trips back to home, I missed a bus. Me and my friend waited for the next bus to come, which did not arrive as per schedule. The printed bus time-table at the stop told a grim story of weekend bus gaps. There were relatively less number of buses plying on the roads on weekends.

I thought, we are in the one of the most advanced places on earth, i.e. California. How come we do not have any service / tool / application that helps me travel with public transport? Mobile apps were just beginning to appear on devices. What I was thinking as a concept was a mashup of public transit data, mobile phone capabilities and real time information.

In 2009, I sketched a concept – a public transit app that any tourist, or any city dweller can use to travel. The app is called ‘Ghumiyo’ – a slang in Hindi language, which translated means “travel”. Notice the template I used 🙂 – The Nexus One and the HTC Sense skin used as the Android launcher. 

Here is the app I designed:

Ghumiyo_1

Ghumiyo_1

Ghumiyo_2

Ghumiyo_2

Ghumiyo_3

Ghumiyo_3

Ghumiyo_4

Ghumiyo_4

Ghumiyo_5

Ghumiyo_5

Fast forward to today – I now live in Texas and I drive a car :).

Those cricketing ideas…..

At the moment, India is the ICC Cricket World Cup Champion defending its title in the 2015 edition. As I write, India has started off the defense campaign by a win over Pakistan. Online media, social networks and messengers are loaded with anecdotes, videos, game analysis, predictions and player trivia.

Indians are passionate about two things – Cricket and Bollywood. I have grown up on other sports in India too – tennis and football (soccer). But when it comes to the World Cup of cricket, other sports take a backseat. This will be the first time in 20 years, Indian cricket team will be playing without Sachin Tendulkar. He had been a regular figure in last 5 world cups, garnering maximum accolades to the team.

Over the years, the data visualization aspect of the game has improved. Nowadays, a cricket match analysis is replete with infographics and tools like wagon wheel, projection deliveries, momentum, hawk-eye, snickometer, etc.

There are multiple cameras that capture the action on the pitch and ground through different angles and get the granular data. From the sports data scientists’ point of view, the golden age of sports data (or rather cricketing data) is about to come. We now hear about the video analytics tools deployed by respective cricket teams to gauge the weakness and strengths of players.

Four years ago, I worked on two concepts related to cricket. One is the cricket scorecard and second is an iPad application.

I wanted to change the way cricket scorecards were presented to the users on television and websites. I wanted to give a new feel to it. This was my humble creation as I was just entering into the world of infographics design. Now, I look back and wonder at these designs and think they can be designed better :).

Scorecard - 1

Scorecard – 1

Scorecard - 2

Scorecard – 2

Scorecard - 3

Scorecard – 3

The second concept I did was a Twitter based cricket application called “IndiTalk!”. The premise is simple – talk, talk and talk about cricket. iPad was just launched, back then. The app UI bears good resemblance to the first generation iPad apps. This app, if designed today will probably have a different character to it.

IndiTalk_1

IndiTalk_1

IndiTalk_2

IndiTalk_2

IndiTalk_3

IndiTalk_3

Design for food

Let’s step away a while from the telecom domain :). I am going to present sketches I did for a pizza restaurant in Pune (India), Greens & Olives.

A brief history of Greens & Olives (G&O) should be told here. G&O was started in a place that was perceived as jinxed. The earlier occupant was a restaurant too. Before that, there was a retail outlet. The locality is brimming with 70+ restaurants. Moving to an already crowded competitive space was necessity. G&O decided that the food menu will be vegetarian, no liquor will be served. With odds stacked against it, it was going to be swimming with the sharks for G&O.

In the last two years Aditya Nilangekar, Pavan Iyengar and their team has excelled in creating G&O an exciting restaurant in Aundh, Pune.

Food and ambience is great. Chef’s recommendations are superb too.

The mobile app I designed complements the customer experience G&O team has created in 2 years. The iOS app and Android apps are being designed.

Here are the sketches of the mobile app (mind map and app UI):

Mindmap

Mindmap

Mobile App Concept - Page 1

Mobile App Concept – Page 1

Mobile App Concept - Page 2

Mobile App Concept – Page 2

If you are living in Pune, head to Aundh. Here is the address (opens a new Google Maps window) – Opposite Tangent Furniture Mall, Nagras road, Aundh Pune, Maharashtra. Call: +91 20 3267 3030

Time is the essence

Bill Gates wrote a book called “Business @ The Speed of Thought”. I don’t remember exactly when I read that book, but it did impart me the sense of urgency one needs in business, and in design.

Fast forward to recent times when I was working in an agile software development project. User stories are the holy grail for design & development. People revolved around stories, epics, acceptance criteria and got the work done in sprints.

In one of my projects for a telecom operator, I was designing the reports module. I sketched two explorations of the UI.

Here is how the UI is supposed to work – It is a progressive disclosure (step wise reveal).

1) On the page, only Data Source choice is seen first. User starts with a selection of data source.

2) Report selector is then shown to the user. User chooses a report name.

3) The page shows up the report columns to build the query.

4) The user clicks “Generate Report” button and the report is shown to the user.

Exploration #1

Exploration #1

Exploration #1

Exploration #2

Exploration #2

Exploration #2

Notice the differences in the approach – in Exploration#1 report column selection can be done by drag-n-drop of column names. In Exploration#2, there are additional filters for reports, “Save as Favorite” action to the report, contextual data presented to the user as “related reports”.

Exploration#2 was finally chosen by the development team.

Time to create these two explorations, discuss and select was 1 hour.

Time is the essence.

“We want new concepts”

How often you hear these words from the bean counters? No need to dwell on the count. Just get the work done :).

The example I am presenting here is an enterprise dashboard application of a telecom operator. Dashboard gives a summary view of its enterprise customers – what contracts are expiring, no. of sales opportunities, escalations, ticketing reports, etc. It also gives the ability to dive down and see the granular details of enterprise customer data.

This was a legacy application created by mashups – typical scenario of multiple heads managing volumes of data with disparate technology platforms talking to each other. End result was a ‘patch-work’ application that suffered experience issues of the data (incomplete data, irrelevant data) and performance.

Imagine I am the user, a sales executive. If I log in to the dashboard application I see partial data on the CSAT, sluggish data on the contracts that are expiring and incomplete data on the new opportunities.

If I am a program manager and want to see escalations of a particular customer, selection of 1 year ticketing records would generate 11 million table rows. This would slow down the performance and hamper the user experience. Now imagine this scenario both in the web browser on your computer and on an iPad native application.

You might be thinking now, where are the user experience issues? Hang on to that thought.

This is what you are told –

1) You cannot contact users.

2) You can play around with the existing application. But remember, don’t break it.

3) We know user experience is not the problem. The real issues are data binding and performance.

4) “We want new concepts”.

Here is the concept #1 – Zoomable Interface

Zoomable Interface - 1

Zoomable Interface – 1

Zoomable Interface - 2

Zoomable Interface – 2

Zoomable Interface - 3

Zoomable Interface – 3

Zoomable Interface - 4

Zoomable Interface – 4

Zoomable Interface - 5

Zoomable Interface – 5

Zoomable Interface - 6

Zoomable Interface – 6

Zoomable Interface - 7

Zoomable Interface – 7

Here is the concept #2 – Spider Chart Interface

Spider Chart Interface - 1

Spider Chart Interface – 1

Spider Chart Interface - 2

Spider Chart Interface – 2

Spider Chart Interface - 3

Spider Chart Interface – 3

Spider Chart Interface - 4

Spider Chart Interface – 4

Here is the concept #3 – Data Visualization Interface (not a fully designed user journey).

Data Visualization Interface - 1

Data Visualization Interface – 1

Data Visualization Interface - 2

Data Visualization Interface – 2

Data Visualization Interface - 3

Data Visualization Interface – 3

So what concept was finally chosen? None. The development team cited issues related to time and tweaked the existing UI. Even the low hanging fruits in the UI turned out be sore.

Infographics : Day 1 @ TechMahindra

Pune is a city in Western India, often referred to as Oxford of the East. In lies Pune, the growth roots of many software organizations that have survived all the booms and busts of western markets. One of them is TechMahindra, which has offices in as many as 3 locations in Pune. The office that I am talking about is in the heart of the city, on the bustling Karve Road.

TechMahindra has always been inspiring designers like me to express their “solution mindset” to the problems no one cares about.

I took in my stride the necessity to design my own solutions that will help me on the job – two examples have already been shared through the blog posts – the Elevators infographics and the RUS infographic.

To a new employee, the first day in Karve Road office is memorable in many ways. The credit goes to the architecture of the connected TechMahindra buildings – the Sharda Center and Annex. The day starts with “no parking” in the designated office parking to accidentally landing up in parking by stairs, losing the way from Sharda Center to Annex and vice versa during lunch time, the orientation program on first day, etc are all too much too imbibe on the joining day.

I created an infographic – 4 column fold-out that explains the various activities that happen on 1st day in TechMahindra. There is a visual path that directs the reader / user to understand what they are supposed to do.

I submitted this design to the HR in 2013.

First Page of the Infographic Brochure

First Page of the Infographic Brochure

First Fold of the Infographic Brochure

First Fold of the Infographic Brochure

Second Fold of the Infographic Brochure

Second Fold of the Infographic Brochure

Third Fold of the Infographic Brochure

Third Fold of the Infographic Brochure

Closure of the Infographic Brochure

Closure of the Infographic Brochure

Infographics – Resource Utilization Summary

When you are part of a corporate ladder, you are bound to do things you do NOT want to. If you are a designer acting like a design manager in a software services organization, then brace yourself for challenges ahead.

One of the duties that you assume in this role happens to be team management. Imagine there are 5-6 designers report to you and you need to ensure that they are 100% billable. Services organization needs granular data of employees like utilization of employees, what business any employee is accountable for, how much back-dated billing has happened for an employee, etc.

Team management was one of my duties in my earlier job. The tool used to track my team members was not helpful at all. It did not give me any idea about RUS (Resource Utilization Summary). Confused navigation and inappropriate content of the RUS tool drove me to maintain my own spreadsheets of data. But something was still missing.

As always, necessity is the mother of invention. Getting lost and landing up on wrong floors of the TechMahindra building through elevators had made me design infographics for elevators. This time, I took the same approach for team management and created an infographic.

This is how it looks:

Infographics : Resource Utilization Summary

Infographics : Resource Utilization Summary

The header section shows summary of the team member. The 5 columns show the overall utilization of the team member across 5 months. “RUS” means Resource Utilization Summary generated by team management tool (a customized tool in TechMahindra). PMTs are project codes assigned to the team member.

As always, sketching on paper helps :).

STEP 4) UNDERSTANDING THE TARGET DEVICES /PLATFORMS – PART 4 OF 4

“Sell this pen to me…” says Jordan Belfort in the movie “Wolf of Wall Street”. Let’s put aside the personality profile of Jordan for the moment, and concentrate on the “selling” aspect.

“Designing a solution is 30% of your job. Communicating and selling your design is 70%” were the wise words of my mentor.

You can be a great designer, doodling in isolation and toying the product with great tools. Your design will never make it to the market if you are not able to showcase your designs with a story.

That’s right. You have to orchestrate your story about the design to your audience – who are willing to guide it, nurture it with their money and resources.

Let’s say that you have quickly sketched out user journeys for key user tasks. You might be working in a agile model of software development. You want to validate the designs created – e.g. iPhone app for banking consumers. There are 3 key tasks in your sketches – view balance, bill payment, add a new credit card.

This is how I would present the paper prototypes to the audience and get their feedback:

1) I will invite all key decision makers & influencers (product manager, development lead, business analysts, system engineers, etc) in a conference room with a 30 minutes time slot.

2) On the soft board, I will pin up paper sketches in a sequence.

3) I will have another design team member, preferably UX researcher – to take the notes of the discussion. It is important that one talks (me) and the other (UX researcher) jots down the points as design inputs.

4) I will summarize what the session is all about to the audience. I will set a context first, when and how the user is going to use the app – what time of day, what place, and what is the trigger point of launching the app.

Since we are talking about a mobile app, I will use specific usage behaviors to weave the story and the sketches – e.g. how users people are motivated to finish a goal, how users prefer shortcuts, how the content takes precedence over navigation in mobile apps, how users’ mind wander 30% of the time, how users make mistakes, etc.

When you cite these examples, it is good to have a workable solution in your sketch. The audience is there to hear you narrate different scenarios they have NOT visualized. As a designer, it’s your job to make them VISUALIZE and give their inputs.

Do not just restrict your presentation to pinned up sketches. Take out the phone from your pocket and show your audience some noteworthy examples. If needed have another photo-essay running that connects the sketches with the user context. You may also compile and get some user research data and quote. Get anything in terms of products / examples / packaging designs / tools / applications that connects with your sketches and triggers the audience’s reaction.

So what do you once you have gathered inputs from your audience?

Tweak. Tinker. Iterate.

Build a story, and sell.

Once you have a feeling that design on paper is great, step into Axure, Adobe Fireworks, Sketch and iRise to create digital wireframes.

That concludes all the segments of how to create paper prototypes. In the following posts, I will share the actual sketches I have designed for some projects.

Step 4) Understanding the target devices /platforms – PART 3 of 4

“Is this your best design solution?” my mentor asked me, staring in my eyes.

“Yes” was my confident answer :).

He said, “I bet that!”

This was eight years ago. I went back to the blank canvas and created 4 different design solutions for a portal solution. The notion of creating multiple design explorations has stayed with me for many years; it has helped me to design better.

I remember when I was at National Institute of Design (NID); I took a two-week coursework in photography. We were handed manual SLR cameras and told to shoot 6 rolls of pictures. My faculty member, Dr. Deepak John Matthew, shared a story about he understood the basics of photography (composition, balance, symmetry, framing, etc). When Deepak himself was a student he was told by his instructor to go to Gateway of India and shoot pictures. He came back and showed the 1st camera roll. The instructor asked Deepak to redo this exercise, 2nd time with a specific instruction ‘get the pictures from the spots & angles that you have not taken in your previous exercise’. Deepak showed the round 2 photos to the instructor. History repeated – he was told to do the same thing 3rd time. Frustrated, he went back to Gateway of India and took photos that he had not thought of in the first and the second attempt. On the third presentation of his photos, the instructor told Deepak that he was happy with the result. Curious, Deepak asked the instructor what was the need for all those 3 trips. The instructor said, “ Only when you are working with constraints, you will think differently and come up with different solutions. With every trip, your constraints multiplied and it forced you to chose spots & angles which could capture a better picture”.

There is no better story to drive home the point that design explorations is all about understanding your constraints, having multiple point of views (spots / angles) and having a different approach towards design solution.

Legendary designer Charles Eames quoted, “I have never been forced to accept compromises but I have willingly accepted constraints.”

Working with constraints is one of the ways to think & conceptualize. It forces you to perceive things differently. There are several other techniques that will help you to conceptualize.

Luke Wroblewski presents a different viewpoint in his book ‘Mobile First’ about how should one design for a mobile device. The principles presented here are applicable for non-mobile platforms too.

There are other methods like lateral thinking, which might suit someone.

A concept is made when you bring together all your methods of thinking, ideation, points of reference, your design inputs, context information and create a design solution that resonates with the real-world needs.

A concept can be an abstract idea. As a designer, you have to sketch out your ‘mental representation’ of what could be a design solution. It may not be a great design solution in the first attempt. Conceptualization is a process of creating multiple design solutions, improvising the same, and arriving towards a mature design solution.

Conceptualization is about having different points of reference and deriving the different meanings, accordingly.

As you may recall in our older blog post – the design explorations / sketches that you create, will depend upon various data points. Now you have all the information you need from the stakeholders and users, you got the tools and the blank paper is staring at you :). How do you start? Just take a paper and pencil and start sketching :). Capture all the concepts that come to your mind.

Let me present an example here – I was working with TechMahindra till Apr’13. Here is the ariel view of it’s offices in Pune (courtesy – Google Maps).

TechMahindra Office in Pune City

TechMahindra Office in Pune City

Marker A represents the building I was located in – Annex, 2nd floor.  I was told to relocate to the adjacent building named Sharda Center 5th floor, indicated in the picture by marker B. The highlighted box in the photo shows walking bridges that connects two buildings.

The architecture of these two building presented food for thought – what was supposed to become a routine activity (moving around from one building to another) suddenly became a need to ‘learn’ 🙂 – the way the buildings are connected, where the elevators are located and how the elevators operate :).

This is how the buildings were connected to each other, via the walking bridges:

  • 1st and 2nd floor of Annex were jointly connected to 2nd floor of Sharda Center
  • 4th and 5th floor of Annex to 4th and 5th floor of Sharda Center

The Annex had three elevators – a parking elevator that stopped on every floor. Two capsule lifts/elevators that stopped at alternate floors only (i.e Capsule lift#1 will stop at floors 0, 2, 4, 6 and 8. Lift#2 will stop on floors 1, 3, 5 and 7).

Sharda Centre had 3 elevators and none of the elevators stopped on 1st floor – the 1st floor was not rented by TechMahindra. In contrast to the Annex, these elevators stopped on every floor.

So here I was looking at a design problem – how to ensure that there is a ‘smooth passage’ from one building to another?

I took this opportunity of chaotic architecture and elevators to come up with information graphics. I experienced the confusion first-hand to move from one building to another. My peers (15 designers) were also in the same boat :), who had been told to relocate from the Annex to Sharda Center.

I made an assumption that visually I will show only one of the floors (between 1st and 2nd floor of Annex) to be connected to 2nd floor of Sharda Center – to avoid further complications. The concepts that I created can be termed as ‘explorations’ – I experimented on different orientations, visual forms to present the ‘chaos’ in a lucid manner. For some concepts, I succeeded and for some, I did not :).

I created the following six concepts / sketches addressing this unique design problem:

Sketch#1:

Elevator1

Elevator1

Sketch#2:

Elevator2

Elevator2

Sketch#3:

Elevator3

Elevator3

Sketch#4:

Elevator4

Elevator4

Sketch#5:

Elevator5

Elevator5

Sketch#6:

Elevator6

Elevator6

Of course, there could be more visual representations of the same problem. May be #1and #6 and be combined and something new can emerge. It’s all about putting down your mental representations on the paper and trying to achieve different points of view :).

Going back to the first story, I came back to present my 4 new design explorations and presented it my mentor. He was glad to see the variations in thinking. Talking about the design constraints, he concluded, “Do what you can…..where you are & with what you have”. I responded to his advice and I hope I have responded well :).

We have almost reached to the end of 4-step journey of paper prototyping. In our next and last post (Step 4 of 4), let’s look at paper prototypes’ validation techniques and activities conducted after paper prototyping.

Step 4) Understanding the target devices /platforms – PART 2 of 4

“Do not get trapped in tools! Focus on the design problem & apply the best design practice”- was one of my mentor’s guiding principles on user experience design.

I believed in him. That was 2004 then. Web 2.0 had not yet hit Indian shores. The designers had very limited digital tools for wireframing. Microsoft Excel & Visio were the de-facto tools for digital wireframing. I never visualized that the mighty Excel could churn out interactive prototypes. I found a new respect for Microsoft Office applications.

Couple of years down the line, Web 2.0 was in everyone’s slidepacks, the social networking phenomenon caught attention of users (Orkut was the cool place to be), and mobile apps ecosystem made a grand debut. The digital product design required new set of tools, new hands & minds of the designers. New interaction patterns were designed & published every day.  Some designers of 2004 had to take a ‘T-shaped’ approach towards design. I am one of them.

Tools – old or new, the way to reach a digital prototype has not changed. Paper prototype is never omitted :). Digital prototypes are created after the paper prototypes mature.

What has changed is the way the tools / stencils / templates are used, in creating paper prototypes. Earlier, I used a blank canvas for sketching user journeys. Now, I use the following templates –

1)   Designing a web based application / portal / enterprise dashboard

Browser Template

Browser Template

The result of using this template is –

Usage: Browser Template

Usage: Browser Template

 

 

2)   Designing an iPhone application

iPhone Template

iPhone Template

The result of using this template is –

Usage: iPhone Template

Usage: iPhone Template

3)   Designing an iPad application

iPad Template

iPad Template

The result of using this template is –

Usage: iPad Template

Usage: iPad Template

4)   Designing an Android application

Android Template

Android Template

The result of using this template is –

Usage: Android Template

Usage: Android Template

Of course, there are multiple templates that you can choose from. Sample this: http://www.geekchix.org/blog/2010/01/03/a-collection-of-printable-sketch-templates-and-sketch-books-for-wireframing/

Remember, as the saying goes, “let’s not get trapped into tools” :). Achieve a fine balance between the UX design tools and the design philosophies. Get the job done :).

In our next post, let’s see how to sketch on the paper – how to conceptualize the user journeys.