Documenting UX

A lot of companies today implement an agile process and the remaining ones like to call themselves agile. A few years back any designer (UX/IX) would pull out their hair because turning around design details wasn’t easy given the amount of time a sprint would end. Years go by and processes have evolved. Processes like LeanUX and staggered sprints or design and R&D sprints in parallel have more or less solved this issue. However these processes have reduced the amount of documentation.

We have user research data, but never used it to create personas. We have analytics data but never exported them out of their software/databases. There are a list of scenarios or stories that are important or have a higher priority, but they never made it to the official todo list or backlog. All, I see is wireframes, trolls of em. Some of them make sense like login screens and forgot passwords; the others I have no idea. Today wireframes have become one of the most important means of documentation. I even see scanned sketches, photographed whiteboards and clickable wireframes. One change in the use case or workflow, and you are back to square one.

It does capture details; however, chances are when I see someone else’s wires, I may not like a solution. How do you support your solution? 

And I have made them all; mistakes. The fact that the requirements or priorities are in my head and not anywhere else does not do good for me to convince someone why these things need to be done the way I intend to. 

Over the last couple of months I started maintaining a combination of few documents that has helped me transition stuff and propose design easily. Here is a short run down of these documents and processes: 

We all do our bit by venturing out and talking to users. We capture notes and lot of em. When you do so, try to capture them as quotes. There are two important advantages in doing so. One, Its faster to write them while you are interviewing/talking to them and Two, it preserves the context. 

“I have to apply the same filter every fucking time I visit this page” 

“See I like this pages concept in OneNote. This way I can just have multiple notebooks and go and write down in pages within them…”

One of the important thing is to digitize these notes. It could be in a notepad or Evernote; I found excel helpful (yeah!). I was able to create buckets/categories and then write the quotes in these specific buckets. Also, when I digitized these notes; I was able to add attributes to them; like screen resolution, position, firm, interview date, system usage, type of user, etc. These become important when I really wanted to narrow down to specific kind of users.  Apart from that I color codeed these quotes – for example. Red for negative, Blue for positive and Greens for opportunities; this gave me an idea on the state of the existing software.  

I haven’t created any personas (and I might not for the time being) for my work. But when I was working on a specific problem, I was able to filter down to a handful of target users in my excel sheet then parsing through notebooks of research data. Once I have narrowed it down to a bunch of users, it is easier for me to identify patterns in their quotes (colors added value). Those attributes that you add now allows you to see how much is in common between these users.

After looking at my excel, I note down tasks/use cases/stories. I maintain a list in a todo list. Apple reminders does the job for me. Nothing fancy. This allows me to scope out, prioritize stuff. Anything that is high priority gets a date and bubbles up, rest of them just remain at the bottom. Simple.

Analytics – If you have it, great. This comes in use when you really want to see what users are doing with existing systems. How are they using it. Export them and keep them handy. Don’t rely on your system that you did log in and get data. Historic data is fine. Patterns are not going to change overnight. Export them because you can quickly pivot data. That is important to figure out supporting numbers for your uses cases. 

This accompanying my wireframes/sketches is a good combination. I try to ensure my wireframes are also not too elaborate. Stick to the specific workflow or use case and thats good enough. 

Trying to Keeping iSimple and Stupid. So far it has worked for me. Maybe over the next few months or a year I will know if it was effective enough.

Please leave your comments and suggestions or any of the processes you personally follow or send an email to get in touch.

Banner Blindness

An update to my previous post on Google Ads, here is an interesting article from Nielsen Norman Group. 

The most prominent result from the new eyetracking studies is not actually new. We simply confirmed for the umpteenth time that banner blindness is real. Users almost never look at anything that looks like an advertisement, whether or not it’s actually an ad.

The trouble with eye tracking is that it only tracks where your direct line of vision is. Human eyes are equipped with peripheral vision as well and that is where the trouble lies. Although the user is focused on reading what is important, he/she is completely aware of their surroundings. No wonder you would see banner ads that are “gif-fy” with saturated colors or text on them.

Please add “AI” to your Ads…

By now I’m immune to the ads that show up on the website and thanks to Readability, I don’t have to look at them constantly. 

When these ads started, they were irrelevant, some non-sensical ad would just show up randomly on the webpage. However the business model worked. Intelligence got built in and now ads are relevant. You search for something that you are looking to buy, invest and they would follow you all over the web like a ghost for the next few months. 

Well this was a welcome change for business. 

Last year around Thanksgiving I decided to upgrade my Canon DSLR camera. I had been using my existing 50D for about 5 years now, and the urge to get a full frame camera had been on my mind. So sometime in the first week of September I search for a Canon 50D on 3 sites. BHPhotoVideo.com, Amazon.com and for some odd reason Google.com. Apart form the camera I also did a couple of searches for lenses and a camera bag. If I was upgrading, I was upgrading a whole lot of things.

For the next 12 weeks until Thanksgiving week, where ever I went, I could see ads for Canon 5D Mark III, Camera bags every where. BHPhotoVideo.com was the primary contender followed by Adorma and other places where a Canon 5D Mark III was available. I was not bothered by these add, but I would observe them from the corner of my eye when I would be checking my mails, or reading something. 

Finally in November 3rd week I took the plunge and upgraded my self. The camera was delivered to me in 2 business days and Google with all its smart identified the tracking number in my mail box and of course there was the Google now card as well. Thanksgiving was good, the new camera was even awesome. I had a cool new later messenger bag for my new gear.  The Christmas tree went up and celebrations were all around.

After Thanksgiving I log back in and the first ad I see on the browser is for a Canon 5D Mark III from BHPhotoVideo.com.  These ad did not change. They were still there.

So basically,

  1. Google knew what I was looking for and they started showing me ads.
  2. Google scans my email to highlight any tracking numbers and also show me a Google Now card with the tracking number and the product tin transit. 

So why the hell am I seeing this ad now? Why are they so dumb? I bought an item that I was looking for; they scan my mails and the know what have I bought; heck they would even know if I returned something.

So instead of seeing ‘RELEVANT’ ads like accessories for my camera, Lenses that my go well with my camera or even a cool Vacation package; I still see an ad for a Canon 5D Mark III from BHPhotoVideo.com.

Graphic Recording for Documentation

As a Product Designer, wireframes, sketches act as a medium where I can think, explore, validate on a problem space. Be it a wire framing tool or just paper and pen, it works and I’m almost certain a lot of designers do. But the trouble is not there. That’s a great approach; however the problem lies when it comes to documenting this. In the last few years, the amount of documentation that I find for existing products or my own design is almost nil. I see wireframes; big fat wireframes. The bigger the system, the more. 

I don’t see a summary, or a workflow of the problem that someone is trying to solve. Wireframe is not a great tool to deliver that message; forget about a workflow. 

According to Will Evans

A picture is worth a thousand words; an interface is worth a thousand pictures; a theory is worth a thousand interfaces.

Earlier this month I got to attend LeanUX conference in Brooklyn. One of the best things at the conference was the Graphics Recording by Dean Meyers (@deanmeistr). His job although very creative was extremely important – record all the talks in a graphical way. Brilliant. I did not have to take down notes. All I had to do was once the talk was over and during a break walk over to the wall and snap a picture.

I came back to work with a solution to my cumbersome documenting issues. I quickly scribbled down workflows and summarized them in a graphical way. It was awesome. It was one of the best way to communicate the idea as to what exactly I’m trying to solve. I shared it with my team, bingo they got it right away. 

I shared it with someone else with no context to my project to bring them on board; they came back with 100 questions.

What went wrong? I thought I had nailed it. I thought it was simple and intuitive. Everyone understand the diagrams I came up with. I shared the LeanUX conference graphic recordings with my colleagues, and I realized, that a narration was also important. It was easier for me and my team to understand these diagrams because we have a great context around it.

So to solve that issue, what I did was come up with a story line – one liners (and explanation when I had to explain a concept) with bit sized graphics. This was perfect it explained the workflow bit by bit and then zoomed out to show the big picture. Something like what Prezi does and thats exactly what I did. 

If you have the patience to draw and scan, Prezi has been an excellent tool.

Moment Lens – The saga behind buying one.

I have been toying around the idea of getting one of those snap on lenses for my iPhone for a while now. I use my phone for photography a lot and you can see my snaps on Instagram and some of them on Flickr. 

One of the things I have always missed while clicking on iPhone is that extra bit of zoom. The digital zoom absolutely destroys the picture and you don’t not want to use that. I did some research and came across a few snap on zoom lenses for the iPhone, of which Moment Lens and Olloclip. Both of these are great products. While Olloclip is endorsed by a few photographers I know; Austin Mann is one of them.  

So, before I put any money in them, I wanted to see if I could try these out. A friend lend me his Olloclip lens and the performance was good.

The Olloclip is a 4-in-1 system that has 4 lenses – a fisheye, wide angle, 10x macro and a 15x macro. Olloclip is like a snap on lens that you clip it on your iPhone and remove it when you don’t want them. The two lenses that are fish eye and wide angle; you flip them and they become macro lenses. The same way you would reverse a lens on any DSLR camera to make it a macro lens. These are great lenses, however I’m not a big fan of the fish eye, and the iPhones current lens is wide enough to take great pictures (there is always panorama mode). I was intrigued with macro, but somehow I wasn’t impressed with what I clicked.

I tried the Moment lens as well and I was impressed with its performance.  With moment lens it’s a different story. To use these lenses you have to glue its sense holder on to your phone around the camera (they are well designed and don’t look ugly) which allows the moment lens to snap on, much like those DSLR cameras and that’s where the quality and sharpness is amazing. So if you are not serious about these lenses, or you like the aesthetics of your phone; you probably should not be investing in moment lenses. 

Both these products are really great, however the Moment Lens impressed me the most. It takes a while for you to get used to attaching that lens to your phone but once you get the knack of it its easy. Every product has a learning curve, this one its not that long.

No doubt the product is great. But you need to have the same experience when you are selling one. 

I was going on a vacation in about 5 days time and I wanted to make sure I got the lens before Friday evening. For the time being the express shipping option was disabled on their site since they were working with the shipping guys to make sure everything is in place.  

I sent a mail to the team at Moment Lens in Seattle and I got a reply in about 20 minutes with a solution. The team at Moment Lens came back to me saying I could place my order and then call them on a number with my order number and they would ship it to me using FedEx and they would charge me the shipping cost. Not a problem. I was all set to place my order, however my gut feeling was no. So, I borrow my friends lens for my upcoming vacation and place the order once I’m back. 

I place my order for my lens on April 10. Immediately I get a confirmation mail with my order number and an invoice. Since I wasn’t in a hurry now I was ok with their 10 day shipping option. Three days later I get an email that my order has been shipped and something in that email confirmation caught my eye. 

Your Order has been shipped via HongKong POST.
Tracking #XXXXXXXXXXXXX
Click HERE to track your shipment.

Why is my lens being shipped by HongKong POST and where the heck is this coming from? Not that it surprised me that the lens was manufactured and assembled in China (of course), but what surprised me was it was also being shipped from there and not from Seattle. In any case as long as it gets shipped and delivered to me in 10 days I was ok.

When I tried to track my shipment, all it said was “Destination – United States of America”. I waited for a week and mailed the team at Moment Lens and sure enough within a few hours I got an email apologizing for the delay and finally the status on shipment had changed. Now it said:

Destination – United States of America
The item (XXXXXXXXXXXX) left Hong Kong for its destination on 20-Apr-2015

That was great, finally it was shipped after 10 days of me placing this order. I wait.  I wait for another week and yet again Is end another email to the team at Moment Lens on April 27 talking to them about my frustration and the fact that it was supposed to be shipped in 10 days. And there it was in a hours time I had a response with an apology and this time with a link to USPS where I could track the progress of my shipment now that it was shipped to the United States.

I’m not sure if I should consider this to be helpful or not. However this was the status on April 27 and it remains to be the same status on May 1. If you have a great product, make sure you give a great service. At this point in time I’m looking for options on Moment Lens website to see how do I go about canceling my order. 

And the worst; after talking to Moment Lens about my frustration I get an email form them:

There is a certain threshold when even the most patient person would loose it. When this post makes it way to twitter and other social network sites; I won’t be surprised to receive an explanation on the delay or the fact that it does take such a looooooong time to ship something out. It doesn’t matter; my experience buying this product wasn’t great and it does not motivate me at all to go ahead and use it and enjoy my post buying experience.

Outlook for iOS – job well done!

Acompli released an Outlook like app last year and Microsoft did not waste much of a time in snapping up this company. The result, Microsoft official Outlook for iOS app and in quick time.

Microsoft launched Office for iOS and Android sometime last year.  The lack of Outlook as an app was one of the issue that the company face and turns out, with Acompli, they managed to fill that annoying gap. 

After installing the app, it just feels like I’m using the Acompli app. For now it feels that Microsoft has just rebranded this app to Outlook, made a few updates and launched it. Most of the updates are integrations with Microsoft’s own offerings (OneDrive is now available as an integration). Hopefully Microsoft continues to support Dropbox and Google Drive or other external cloud storage services in the future.

Microsoft’s general manage of Office, told the Verge, “We have been and we’ll continue to update the app weekly”.

Some time back I wrote about the Acompli app while I was on the look out for a decent Calendar app. My feedback still stands the same for the Microsoft Outlook app, however after the rebranding, my perspective for the app changed. I’m looking at this app more from an email client perspective and less from a calendar app perspective. And so far as an email client, it does a great job and at the moment I can comfortably say its one of the best email clients for the iOS – yup, time to replace that slow and weird Gmail app on your phones.

I still continue to use Mailbox simply because I use this app on all my drives – iPhone, iPad, MacBook. With Microsoft Outlook available for all these platform as well, I’m still not sure about their Desktop app. I’m keeping my options open. 

With the launch of Microsoft Outlook, Microsoft has been pushing its Office productivity software to iOS. There is a “preview” version for Android available for now and this only confirms that “iOS first” still holds true.

How much (Prototype) Fidelity?

Following up on my article I wrote some time back, “Wireframing is NOT Prototyping” – a common question that got asked was, well if its not prototyping, what is it and what level of fidelity one should expect?

I have read books and blogs and a lot of them and everyone has one theory which has worked for them.  And the more I read the more I realize fidelity of prototype completely depends on your audience. 

If your company follows an agile model or does not, one of the most common ways to track deliverables is to create an MVP (minimal viable product).  And one of the best ways to create this MVP is by prototyping this experience.  This brings back to our question again – What exactly is prototyping?  I ran a Google search and this is the definition that shows up:

pro·to·type
ˈprōtəˌtīp/

noun
1.   a first, typical or preliminary model of something, especially a machine, from which other forms are developed or copied.

verb
1.  make a prototype of (a product).

So in software terms, prototype is a rough/comparative/almost/close/near/relative something of an experience that allows you to simulate what it is like to use the product or service in question.  This something is the answer to my next question – how much fidelity one should expect?  Similar to wireframes, prototypes should be cheap and one should spend as little effort as possible which is one way to decide on how much fidelity you need.

One of the most important aspects of creating a prototype is to answer some basic questions:

  1. What is it that you want to know/learn from this prototype?
  2. How much time do you have at your hand (let me guess – extremely short)?
  3. And one of the most important – Who is the audience interacting with the prototype?

Why is your audience important here?  Knowing your audience will allow you to create the smallest possible prototype that will yield you maximum feedback.  So if you are tasked to create a prototype to communicate to a group of developers, chances are you are good with just paper and pencil, since they have the ability to focus on the task you are trying to get feedback on and ignore the other parts of the products that remain unaffected.  For example, it wouldn’t bother them if you don’t show a detailed global navigation if you are trying to demonstrate shopping cart interactions. 

When the stakes are high, you get in to extreme details.

I was listening to John Gruber’s “The Talk Show” after the iPhone 6 launch and he mentioned that when Apple decided to make two big screen phones, they made prototype for every 1/10 inch from 4 inches to 6 inches.  The result, 10 million iPhone 6 and 6+ sales in 3 days

Technology is changing us (for the good I think)

In the last ~ten years I have changed my mobile phone a number of times, from Nokia 5110 to Palm Treo to Blackberry Curve to Android Droid X and finally settling down with an iPhone. Its amazing how technology has evolved from large mobile phones to small tiny Nokia phones and back to massivesmartphones phones.

Designing for mobile is different and not just with regards to the shape and size. Because mobile devices are lighter and more portable (in some cases), we find it more convenient to use them. And because we use them so often, we feel a unique, emotional connection to them.

One more thing I realized in the past few week is my transition from being a true Microsoft user to an everything Apple user in the past five or so years. I realize I have every single Apple product and everything is connected to the cloud. I am not talking about the wonderful (pun intended) ecosystem that Apple provides, but my motivation to move everything to Apple. And this does not end with just hardware; of course the transition to Mac OS X was smooth, I missed MS Office (IE was replaced with Chrome a while back). But in the past year, I have seen myself transitioned to iWork and when I think about this transition, I questioned myself why? Why did I move away from a software that I used for almost a decade.

Microsoft Word

Microsoft Word

“Clunky!”

It struck me when I heard this from my customers complaining about a system that they have used for years. It baffled me that the same users who have used this system for so many years are now finding this system clunky. Why?

Apple Pages

Tracing back to my own transition, I realized how simple Gtalk, Gmail and Chrome browser were to start with. After getting my hands on my first tablet in 2010, I slowly transitioned to Apple mail and it didn’t take me a while to move to iWork when I used their 30 day trial version. The fact that I was not looking at too many things in my face made me feel better. Just like my iPhone (in my case) I could concentrate on a task that I was currently doing rather than find something in that massive ribbon on the top with icons that I found it difficult to understand at times.

We have different attitude, behavior and priorities while using our gadgets. They come with us on the bus, walking down the street or watching TV. Users expect more contextual based actions then an al-a-carte menu system where they are expected to find an action they want to take. Because mobile devices have changed user expectations, it is extremely important to consider them is user studies since their influence is much larger then we can think of.

Wireframing is not Prototyping

With the rise of UX role in the industry, wireframes have played increasingly leading role in the modern world. Its a simple way to validating user interface and layout and are cheaper and faster to produce than a final visual comp.

Wait a minute did I say cheaper and faster? Really?

Over the last couple of years, the number of wire framing tools that have come up in the market is alarming. From a world of Visio, Omnigraffle and to a certain extent Rational Rose in the past, today you have options for any platform. You could do a google search today and you would be surprised to see the number of tools available today and with links to tell you the top 5, 10 & 20 tools for wireframing. With more options today, we run into more complexity.

Paper & Pencil have been probably the cheaper and faster way of evaluating the interface and layout, however I see very little of those today.

Today, there are applications that allow you to create wireframes that look hand drawn.

The last few years the wireframes have looked more and more different and detailed. Images, actual look and feel, every single mouse movement or tap or gesture and what happens next, etc. That definitely throws cheaper and faster out of the window.

Lets look at a classic definition of wireframe

wire·frame
ˈwīrˌfrām/

noun: wireframe; plural noun: wireframes; noun: wire-frame; plural noun: wire-frames
1. 
a skeletal three-dimensional model in which only lines and vertices are represented.

Exactly, a wireframe is a three-dimensional illustration of a page’s interface that specifically focuses on space allocation, prioritization of content, functionalities available, and intended behaviors. For these reasons, wireframes typically DO NOT include any styling, color, or graphics.

However, with the next generation of devices already here, and with users employing more touch-based system, a few changes should be made in the way we do classic wireframes. In spite of these progressions, though, creating wireframes should remain cheaper & faster.

Today we have taken to wire-framing to actually deliver a full blown spec. Do you think a developer is going to make sense of a step-by-step wireframe that captures every single gesture? (most of the developers/QA know what happens when you click a drop down or on tapping the button it turns blue from grey). These are not High-Fidelity wireframes (if that is your arguing point) but a spoon feeding document which runs into 100’s of pages.

A High-fidelity wireframe has increased level of details which should simply point out details like dimensions, behavior and/or actions related to any interactive element.

There have been some rules that designers need to consider while creating wireframe. Lets see how or what we can change so that wireframes are better suited for today’s interaction. It’s important to keep in mind to use wireframes as guides and not deliver a spec.

Some old school rules:

Do not use colors — If you want feedback on your functionality, do not use colors, however always use a different color to show highlights or selection. Stakeholders always get confused when they don’t see a selection color; in other cases avoid colors.

Do not use images — Images distract from the task at hand. Do not use an image unless it is part of your navigation and you cannot show any interaction with that image. Else just show a placeholder.

Typography — Use one font, but vary their sizes to differentiate.

Keep them short and to the point — Don’t spoon feed. Use annotations and try to capture your use cases.

One of the things old school wireframes always said was to show what things go where irrespective of shape and size since it was important to give the users an idea as to what content goes where. Later on it became important to do wireframes that would show details of content before the web page fold.

Today, users use more touch devices compared to desktops/laptops. Screen sizes have become more important and users don’t have to worry about the web page fold anymore. Every single pixel has become important. Thus making it even more important to deliver pixel perfect wirefames.

One of the biggest down side of delivering wireframes as a spec is that at times you do not know from where to start. Should I do the dashboard now? Oh but making an appointment is more important then looking at summary. At the end, you are scampering to get things done, with 100’s of wireframe slides and still no starting point.

A good technique that I have relied in the past is to write down high-level scenarios for your personas that you create. Once you have these written down; prioritize them — there you have your starting point.

Now take a single scenario and try to come up with uses cases, or business rules whatever you are comfortable with. Start with a single positive use case, document all the business rules. Do your wireframe, as minimal as possible and annotate them if required.

Create a summary page at the end of this, and capture all the negative use cases and error cases. Typically you wouldn’t need wireframes to show these unless you need a different interaction all together.

Keep your wireframes short, simple and annotated and remember to keep them cheaper and faster.