Month: January 2016

One thing that is fun about User Experience is the large variety of tools that are available. Start-Ups having focused on Prototyping and Wireframes tools but there’s so much more.

I’ve decided to do a series where I focus on some of my favourite tools. Today I wanted to look at a couple analytic tools that I use in my day to day work process.

Analytics

Google Analytics

One of the first tools I like to use when doing User Research is Google Analytics. There’s a ton of information that to leverage. I am able to pull anything from demographics to user flows. Whenever I am working on a project that requires updates, I love to see what people are doing on the site.

Lucky Orange

I first learned about Lucky Orange when I was watching a podcast that focused on digital strategy. I didn’t expect to learn about any new tools so I always felt like I stumbled into gold.

Lucky Orange is great for the following reasons:

• Captures further user data for analysis
• Allows for conversation with site users
• Heat maps
• Form Reporting
• Captures video of users interacting with the site

The best aspect of Lucky Orange is reviewing video of users interacting with the website. I’ve been able to tell what areas of a site are failing and start figuring out how to improve the experience.

Crazy Egg

I’ve been a fan of Crazy Egg for a long time. They provide detailed heat maps which look at how people interact with the site. I’ve used Crazy Egg to determine which images lack information to why CTA’s don’t work.

It’s a powerful tool which is why I am such a fan. Using Crazy Egg, you get some of the following analysis:

• Click Heat Maps –  Get a solid visual of where people are clicking and how frequently.
• Scroll Heat Maps – I love this feature. Figure how far people are willing to scroll on your site. We learned that important information couldn’t get found by users. Using the Scroll Heat Maps, we discovered the information sat outside common scroll patterns. By running an A/B test, we were able to verify this was the problem and correct it.
• Confetti Click Maps – Users will visit your site from different locations. The Confetti Click Maps break down clicks to a variety of different filters. You can track what Facebook referrals interactive compared to Google or Direct traffic. Filtering ranges from traffic, to hardware and software, to location.
• Click Maps – Slightly different than Click Heat Maps. The Click Maps break down the interactions with specific numbers. Using this tool that we realized a single image was experiencing 5x the interactions than other elements on the page. This had us look at the problem. We determined the image lacked crucial information and users were clicking for more details.

Crazy Egg is on my favourite tools because they don’t try to provide too much. They know what they’re good at and they excel at it.

My only complaint about Crazy Egg is that they bill annually. Annual Billing isn’t a problem for organizations but for contractors it can be frustrating.

Wrapping Up

Although I’ve played around with other analytics tools, these three are my clear favourites. I use them at every opportunity and recommend them whenever I get the chance.

If you have any tools that you love, feel free to include them in the comments.

I learned a valuable lesson a few weeks ago. I’ve never given workshops much time during my education into user experience. I looked at workshops as one extra step that’s unneeded and complicates a project.

As a web developer, I was always taught to avoid large groups of people. I wanted to work with one primary point of contact rather than having the site designed by committee. Avoiding large groups was lesson 1 of freelancing. I had seen projects go off the rails by including too many people at one time.

Workshops looked to be the complete opposite. You want to include as many people with knowledge and insight into the business as possible. These meetings could last days and it one of the exercises was designing by committee.

It just didn’t make any sense to me on why this would be a good idea. It was clear that the experts who had been doing UX for over a decade knew what they were talking about. I just didn’t see the value as it went against everything I learned as a freelancer.

Not seeing the value of workshops changed in December of 2015. I was on site doing some client training on the content management solution I had built for them. I expected two people for training, as discussed, but when I arrived five people were waiting for me. I shrugged it off and didn’t think much of it.

This project had its share of complications, but one thing that I enjoyed was a single point of contact. The company and I had agreed,  to speed up the process, which I would only communicate with one person. Thrilled, we move forward as I knew that designing by committee was off the table.

The Meeting

I didn’t give much thought to the extra people in the meeting. I assumed that they were excited about the new site; they wanted to learn how to use it too. It didn’t take long to watch the training session go off the rails. As I showed the first piece of functionality, the questions started to come in.

“How come this page doesn’t have testimonials?” asked the owner. My Primary Contact looked at her boss and responded, “That’s a good idea! I never thought to have it on every page.” The group was quick to agree, and I had to add it to my list.

The training session continued to move forward in similar fashion. Every time I’d start training on a new area of the site, the exact conversation would occur. The real kicker was the home page; this was a page that had already seen many revisions. My Primary Contact and I had gone back on forth on a few different iterations as we tried to find the perfect fit.

Most of the sections got questioned and pulled apart. The order of content got debated, and concerns got raised. At one point, the Owner looked at me and said with concern “How would I send out messages to the users? How would I push holiday hours or important upcoming events.”

All I could do was stare back at him a blank look. In the many revisions that I had worked on, the ability to have custom messages never got requested. As the owner explained his reasoning the group and I all agreed this was an important feature. I added it to my growing list of changes.

What Went Wrong?

When the meeting was over, I left feeling a little shell shocked. “What the hell just happened?” I asked myself. Frustrated, I drove away asking questions. The meeting wasn’t a case of a client changing their mind after something had gotten done. In this case, it was clear that the group had more insights when working together. They were feeding off one another, pushing ideas further and making them stronger.

I had built wireframes that required sign-off before the design stage could happen. The content structure and order shouldn’t have been a surprise to anyone. That was the point of having a primary point of contact. She was to be the gatekeeper and make the decisions on behalf of the organization.

As I was driving a little light bulb went off in my head. A workshop would have resolved all the confusion. It was that moment the value of a workshop became clear. I understood why the experts pushed them at every opportunity.

My Primary Contact had a great understanding of the business. The group had a higher knowledge of the company. Each person brought a different perspective based on their skills and background. They bounced ideas off each other, leveraging each others skill-sets. Each person wanted certain functionality based on their unique offerings to the company.

A Workshop provides the opportunity to see how the product will get used in the organization. A workshop provides different dynamics and provides unique insights. I don’t believe you can get the same information from a single person.

The meeting changed my outlook, and now I try to run workshops for every project. When starting out on a project, I try to include representatives from everyone in the office. I realize now that there’s value in it.

I am currently working with a client who does not have a large budget for User Experience. This isn’t a new situation as organizations are still learning about the value of UX. I am hopeful this will be one day change.

So how do a smaller budget affect what we are capable of doing? It doesn’t. It just changes how we look at the problems and how much time we have to focus on potential problems. User Research, for example, still happened but in a shorter period of time. Could we gather more information? Of course but we were able to get enough data to get the ball rolling.

The biggest challenge we had to address was with the sitemap and wireframes. My typical workflow involves using tools such as UXPin, Invision or Sketch to build out what we need. With certain clients and, in particular, situations, these tools are great. It allows us to get a working prototype in front of our customers so that they can visualize how it will work.

The downside to this approach? It takes time and with each review changes get made. Recently we had a project that got delayed due to all the revisions. While delayed projects usually result in frustration, in this particular situation, it was good. The delays and changes allowed our team to figure out some logistical concerns. The concerns would have resulted in bigger delays and blown budgets during development.

For our current client, who didn’t have a big budget, this approach wouldn’t work. We needed to find a way to mimic a similar outcome without the traditional tools. How could we wireframe, sitemap and test without a working prototype?

Enter Post-It Notes

I’ve been reading “Undercover User Experience Design” written by  Cennydd Bowles and James Box.  This book, filled with excellent information, provided my first insight. During workshops, the smart idea is to get clients to organize their own sitemap.

Each page would get represented on a Post-It note. The client would then place the Post-It notes based on where they feel the pages belong. I loved this idea and got to work.

The client’s site had a navigational structure that was all over the map. I had a difficult time finding content and so I made this my first test. I took Post-It notes and wrote out every single page. Once done, I proceeded to approach people around the office to try out the post-it note approach.

I had each coworker structure the pages based on where they felt information belonged. It didn’t take long to see certain patterns emerge. By the time 10 people had finished the test, there was a clear picture on how to group the content.

The total time it took to set up, run and review? Less than an hour.

Cue cards are my new best friend

The next challenge I had to deal with was wireframes. How could I design a layout without actually using the design tools I am familiar with? Once again I turned to pen and paper.

I had two directions I could go in. I could either use Post-It notes again or find another something else. My first instinct was to go with Post-It notes. I had enjoyed how the first test had gone but there was one thing that kept bothering me. Since I didn’t have much wall space, everything was getting done on tables. I watched as people tried to slide the Post-It notes around on the table to limited success.

I decided since the wireframe would have content shifting, to use cue cards instead. The cue cards could be easy to move for people during tests and also had more room to write on.

I proceeded to write out each section of the site as required. Each card would include the title of the section (i.e. Header) and include a description of what would sit inside the section.

To determine the sections I used a combination of:

• User research
• Client requests
• Results from the previous sitemap test

I laid out the sections so that I felt they made the most sense. I then proceeded to test it. It was important to know that the content structure made sense and was easy to use.

Testing went well; testers tweaked the layout, added extra notes and removed sections. It gave signs of what was working and what wasn’t.

The total time to set up, test and review? It was about an hour.

Presenting to the Team

The next step was to present the findings and content to the accounts team. They represented the client and had the client’s best interests in mind. This was the next big test. The accounts team usually receives wireframes and sitemaps in the forms of PDF or live HTML.

As I laid out the cue cards, puzzled looks came over their faces. They thought they were getting traditional wireframes and were unsure of the cue cards. The confusion left the room as we got started. The cue cards were clear and concise. As with the earlier tests, extra notes got added and content got shifted.

The meeting ended earlier than expected.  With the wires and sitemap laid out in front of us, there was a clear picture of what required.

The whole process had been so smooth, we decided that the next step would be to present to the client. We felt that the client would appreciate the work done and have a stronger idea of what should be priorities.

All in all, the entire sitemap and wireframe process took less than two hours to complete. It was so useful that I plan on using Cue Cards and Post-It notes moving forward. Each project will have it’s own requires and this process won’t ever be the norm. I do believe that a combination of Pen and Paper are just as important to my process as the tools I’ve relied on in the past.

For this client, using pen and paper was crucial to generating valid results.