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.

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

It’s time.
It’s time to design.
You know the users.
You know the market.
You know the people very well, whose money is riding on your idea :).
You know the timelines.
You know the constraints.

It is important to know the devices/platforms that you are designing for. The software and hardware are intertwined. Know the devices / platforms well enough so that your design solution utilizes the device’s capabilities to a great extent.

Get yourself familiarized with the device. If you are designing an interface for television, spend hours playing with the TV remote and watching TV. TV remote may open up possibilities in your interface design.

TV Guide

TV Guide

If you are designing a control panel for a washing machine, get the brains of the industrial design and engineering team. Understand the machine capabilities, the happy paths (e.g. musical tone to indicate that washing is done – scenarios in which user will not encounter any problem) and exceptions that come with the machine (e.g. the washtub is overloaded). Understand what the machine CAN DO and CANNOT DO. People will tell you what the machine is SUPPOSED to do :).

Washing machine control panel

Washing machine control panel

Test the device to the limits – both in terms of software and hardware. Imagine the worst-case scenarios of usage.

When iPad was launched in 2010, Amazon came up with a funny ad for Kindle. Clearly, it knew the device positives, the users and the context. Here is the ad:

We have embraced touch-screen interactivity in majority of the devices. Mobiles, tablets, ATMs, point of sale terminals, medical devices, field-force devices all have touch-screen capabilities.

Devices also come with their own interaction & visual design language.  Apple’s iOS applications have to be designed keeping in mind the ‘Apple-ness’ – the way interfaces look and behave.

Apple has published its Human Interface Guidelines to help designers and developers create new iOs apps.

iOS Human Interface Guidelines

iOS Human Interface Guidelines

Google also has published its Android mobile UI guidelines. Slowly and steadily, it is bridging the gap with iOS in terms of the ‘experience’ of using Android applications, vis-à-vis iOS applications.

Android Design Guidelines

Android Design Guidelines

E-commerce websites have evolved over time. Take example of Amazon that started selling books and now sells everything on earth. Another candidate is eBay, which has maintained its DNA of being the flea market on the web, right from its inception. eBay has undergone changes to its website.

eBay has published its ‘pattern library’ online to familiarize the interaction designers & visual designers with its unique templates that define the eBay experience.

eBay UI pattern library

eBay UI pattern library

Understanding the devices brings in our discussion on the ‘T-approach” in older post: know the devices and target platforms as much as the user needs. A little more knowledge will surely help you. Less knowledge about the device / platform may create a loosely coupled design solution.

Gene Kranz, the flight director of Apollo13 quoted the famous lines while discussing the options of bringing the astronauts back to earth. His team members debated on the limitations of the lunar module – designed only for landing on the moon, not to fire the engine & come back. Kranz replied, “I don’t care what anything was designed to do. I care about what it can do.”

Great designers see the product in one shot – fusion of hardware, software, interactions and experiences. That’s what makes a great product great :).

In our next post, lets look at the tools that you will need to create the sketches / paper prototypes.