The UX Kanban

In some organizations, the user experience (UX) team is seen as a problem child. It has merits, brilliant minds and capable hands. But, it has its own ways of working.

In a typical services company, the UX team works in a horizontal mode – providing consultancy to every business unit. In product companies, the UX team may be divided according to the product portfolios. Regardless of size and nature of business, one thing is common that managing the UX team takes a toll on the CxOs of the organization. The pressures of billability, team members’ utilization and investment of tools are the commonplace problems. Of course, there is no panacea (the cure-all medicine) to these problems.

Many tools, methodologies have been attempted to “civilize” the team. One of them is Kanban.

Kanban literally means ‘signpost’, a just-in-time production system designed by Taiichi Ohno at Toyota. Kanban is a system to control the logistical chain from a production point of view, and is not an inventory control system.

In simple words, Kanban means to produce only when there is a demand. It helps organizations to be leaner, productive and have faster turnarounds. There is ample material available on the net to read and watch videos on Kanban system.

I took the Kanban approach and applied to the typical UX team scenarios. The first sketch shows a Kanban dashboard of projects in UX portfolio. It has visual cues and legends that helps the UX managers / leads to focus on what is important from delivery and sales point-of-view.

The overall view

The overall view

The second sketch depicts the Kanban system from the team and tools perspective – how many designers we need to hire, what tools we need to purchase.

The team and tools view

The team and tools view

The third sketch shows the Kanban cards the UX team members would receive as work queues. They will get a precise description of what needs to be delivered, how and when.

The UX delivery view

The UX delivery view

If you tie these three sketches together, it could lead you to a system of UX team management – a web tool or an iPad app (if you visualize). Who does not want some structure to the maverick team :)?

Audiobooks

If you have read the Tolkien classic ‘The Hobbit’, chances are that you have seen the Hobbit movies too. Would you head to an audiobook that narrates the book? If you do, would you buy a book from an audiobook company?

The digital publishing industry is made up of e-books and audiobooks. They complement, not compete with the traditional books. Audiobooks offer different kind of experience – you can hear the books on the walk, on the drive, while cooking or any other activities that do not ‘demand’ attention.

I recently reviewed an audiobook application and bought an audiobook. The app experience was underwhelming and I was amazed to see the difference of treatments to the Android app vis-a-vis the iPhone app. So, here is my design concept that will give an enhanced experience of an audiobook app.

Audiobook Mindmap

Audiobook Mindmap

Audiobook Concept Page 1

Audiobook Concept Page 1

Audiobook Concept Page 2

Audiobook Concept Page 2

The Electric Generation

We are indebted to the scientific society of the 1900s who invented technologies we take for granted.

One of the inventors happens to be Nikola Tesla. Elon Musk is redefining the electric cars through his venture Tesla Motors. Major automobile manufacturers have taken their steps building electric cars – Nissan, Chevrolet, Toyota. Those who are genuinely interested in understanding the electric car history can read about Better Place (started by Shai Agassi, now closed) and watch the documentary “Revenge of the Electric Car” on Netflix.

While the electric cars’ evolution is on, it has not stopped the automobile world to leverage their technology to the most ubiquitous form of transportation in most countries – the bike. One of the companies that is manufacturing an electric bike in US happens to be Mahindra, naming its electric bike as “GenZe”. If you happen to be in Bay Area or Los Angeles, chances are that you might have seen that bike on the road.

I designed a mobile app concept for GenZe. The users of the mobile app are students, pizza delivery guys. The idea of the app was simple – know the bike’s essential parameters before turning the engine on. 100+ parameters of the bike are up in the cloud. There are sensors on the bike that give crucial data about the bike’s mechanics, electrical, tire pressure, etc.

The iOS and Android app offer the similar experience, with one exception. Android phones have a desktop widget of the App – no need to launch the app. There is also a micro-website that gives detailed analysis of bike’s usage.

GenZe iPhone app

GenZe iPhone app

GenZe iPhone app

GenZe iPhone app

GenZe Android app

GenZe Android app

GenZe Micro Website

GenZe Micro Website

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.

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.