Process

Examples of the process used to design and develop applications.

Clariture Health Sketchnotes

Sketchnoting has become a regular part of my discovery and ideation phases. The act of physically writing onto paper stimulates both sides of the brain which helps burn in the ideas being tossed around. They are part brainstorming, part note taking, and a lot of collaboration with stake holders who I encourage to jump in and start sketching themselves.

One use of these is to get key concepts down as a reference while I’m pushing pixels. As I’m listening to the brief or doing research I’ll doodle when coming across something important. Nothing too specific needs to be on the note. Just key words or visual representations of thoughts. The second and possibly most beneficial aspect of sketch noting is that it seems to get the creative juices flowing without being committed to a single idea. I’m far more likely to explore a left field idea on paper than I am to spend the time in Sketch making it “look real”. It’s faster and cheaper to use a pen and paper in the beginning.

The following are real world notes made during my most recent project at Clariture Health.

Advertisements

CloudForge Info Architecture

In iterating my blog/portfolio I realized that I was missing a basic Information Architecture example. One of the very first tasks when redesigning the CloudForge application was redesigning the main navigation. This was more than just layout. This was the task of really figuring out a better way to group, extend, and display the major functions of the service.

Remember, the assignment was not to create a new product from scratch. We had to design a new UX while carrying thousands of existing users over to the new application experience. This meant implementing new ideas without leaving our current user base at a loss for familiar UI/UX.

Original Navigation Scheme

cvs-dude-project2 The CloudForge came from a product called Codesion… same service, different platform. The original navigational scheme was based on tabs grouped into primary buckets; Dashboard, Projects, People, Publisher, Services, and System. At first glance this seems to be pretty sensible and it worked for years. The problem is that when you decide to go after new users in a more savvy market the paradigms break down.

  • Dashboard: Makes sense.
  • Projects: The heart and soul of the application. People tend to think in terms of Projects so let’s keep this.
  • People: Hummm… A bit vague. Are these users, admins, managers, customers? Who knows? We have to click and investigate in order to find out. This breaks some of the basic UI rules of being predictable and perceivable.
  • Publisher: This is actually a service that pushes code to various outlets.
  • Services: Wait… Isn’t publisher a service? Are they different in some way?
  • System: Again, the title is a bit vague. You mean system settings? You mean the whole CF system or one of the service systems?
  • There seems to be two levels of navigation without a clear demarkation of the difference. “My Settings”? Aren’t all the settings I’m making “My Settings”?
  • Aside from the actual architectural schema, the aesthetic looks like it could use a major upgrade from the tabs metaphor.

Imagining a New Organization

Main Nav
My first step was to take stock of what items are really important to a given user. The original seemed to look at the navigation from the perspective of the engineer building it. I wanted to approach it by asking “What do our users do now? What do they want to do? How can I get them there faster? How can I introduce them to other features without creating confusion?”

The answer was to create sub-buckets within larger buckets. For instance, instead of “People” we have an “Admin” bucket with the first sub-bucket being management of users, groups, etc. It’s like putting the people tab inside of a parent. How do we implement this?

From here I can run it by product and see make sure that it’s meeting all of the business goals. In this case the “Services” section drives folks to any new services, paid or free, that would complement their needs.

Implementing a New Navigation

menu
Finally, Bootstrap gave us a modern drop down menu scheme which is more aesthetically pleasing and WAY more extensible. We can simply fit more options in the drop downs than the strictly horizontal tab device.

Initially I’d considered icons for each menu item but I quickly realized that we’d be up to our necks in icons. Now if we ever want to set an item apart from others we can use color/icons (make “Billing” red when over due for instance).

In the end we have an architecture that’s simpler to read, faster to navigate, and way more extensible. This makes happier users, engineers, and product owners.

CloudForge New User Experience Map

experience map

An example Experience Map done in the traditional group setting.

This is a visual map of an exercise that we did early on. The idea is to gather the over all user story into a narrative journey that highlights obvious pain points along the way. People doing user research can use this as a model while product managers/engineers use this when forming plans. I actually find this circular representation far easier to digest than the traditional linear model.

You can see from the map that we’ve assumed pain points in five areas. Those are the areas that we would then try to focus on coming up with solutions for as those are possible points of losing a customer forever.

Personally, I’m not a fan of always getting the whole team into a room to make decisions. In the real world it’s not always efficient to put work on hold for even an hour. However, this particular exercise is staggeringly important as it sets the tone for most of the user centered decisions you’ll be making for the life of the product. So for this exercise I’d pretty much insist that EVERYONE be there, not just the stakeholders.

Examining the Xoom.com Home Page

SafariScreenSnapz004Xoom is a great service that allows you to send money overseas easily, quickly, and securely. The site definitely has a low-fi aesthetic but I suspect that it works well on an international level. There’s likely millions of users who value simplicity over sophistication and the site design reflects that. All in all, they’ve done a good job on the UX/UI but there are a few things that just drove me nuts because… well… I’m obsessive.

Make buttons easy to press.
The “Get Started” button is clearly marked and conspicuously green. Awesome! Until I went to press it and could not get passed the country pulldown. It was like a trick or a game to use the big button that the service clearly wanted me to press… or did they? Perhaps this behavior is purposeful and meant to drive users to a particular country instead of hitting the button but then why have the button? The answer to this issue would be to just make the arrow on the drop down area activate the list instead the entire thing. That would allow me to not have to go around the item that is 10 pixels away from the button. Click the video below and you’ll see what I mean.

menu

I get a cursor telling me to click but nothing happens when I do.

Make sure an icon has purpose and retains that purpose.
There is a clear and convenient top navigation. Again, awesome! It seems to be a little off on some pretty standard UI rules, though. The arrow icons indicate that there are sub-menu items that reveal themselves on hover. Makes sense. There’s even an animation that turns the arrow upward to communicate that the menu is open and can be closed. The thing is that this has little meaning and is somewhat confusing. Most users know that the menu is now open, they are looking at it. Do they really need an indicator to explain that the menu is open? When you animate the arrow, you call attention to that visual device which makes me think it’s clickable, especially when there’s a click cursor on it. That up arrow is not clickable and neither is the “Go To”  text but they both have click cursors on hover. Seems like a source of cognitive dissonance IMHO.

menu-new

Show a disabled item instead of a highlighted one.

Use universally accepted UI standards.
In the original menu the “Home Page” item background is grey with black text. I’m going to assume that this is meant to be an indicator that you’re on that page currently. Perhaps this could be better communicated in a more universally accepted representation within the pulldown context. Grey out the text, put a carat indicator, and make it non-clickable. This would better discourage the user from looking at the menu item in the first place. When you invert colors on a menu item you’re calling more attention to it and people assume that you want them to click on that item. At the moment I can click on that link and arrive… right back where I am. Don’t send users in circles.

I’m not saying that we should NEVER not use a standard. I am saying that unless we’re pushing the standard further, we should use the standard.

mobileapp_GHbanner_960x135_en

This promo should be a CSS layout instead of a single image.

Move away from images for promos.
Perhaps there’s some sort of legacy browser issue that drove the design toward using large images for these promo features but most of the web has moved away from this practice. It makes it harder to update, increases data transfer, and usually interferes with accessibility readers for the disabled. I’d suggest taking a short amount of time to convert these to CSS based “banners” which is now a best practice.

How I gather user data with short surveys

I sent out a simple survey to gather initial data for a psychology related app.

I sent out a simple survey to gather initial data for a psychology related app.

Recently a friend asked me to help him gather some customer input for a new store that he’s building. I suggested that he put together a short (10 question) survey to find out how his target demographic reacts to some of the branding ideas that he’s thrown around. I’ve used this tool successfully with larger corporate projects but the results are useful regardless of the size of the business. After taking a look at his initial question set I thought that I’d write up a quick case study that could act as a “how to” based on my experience and general knowledge of behavior in UX.

Luckily, I had just started doing my own research on an a psychology related app idea. I sent out a survey to gauge interest on wether that idea has an audience and what that audience may expect from the application.

SurveyMonkey is my go to tool for this initial round of data collection. I’m trying to get an idea as to whether this idea is worth investing more effort into so I don’t want to invest much time or money. A free account gives me up to 10 questions and 100 participants per survey. That’s a good amount of feedback and also forces me to break questions into blocks of importance. If the initial 10 questions point to this project being worth moving forward then I can assemble another 10 question set with a higher level of fidelity.

The act of putting the survey together is itself a planning tool. If I can come up with clear questions then the answers to those questions can define clear product goals. If I cannot come up with clear questions then I either need some assistance or perhaps there’s no need for the product beyond my desire to make it. This leads to the first issue that most survey makers have; what constitutes “good survey questions”?

1. Get the basics first

I usually put the basic demographic collection questions right at the front. Age, gender, income, education, etc are all data points that we’ll need sooner rather then later. These also serve as “warm up” questions for people filling out the survey. They build confidence, comfort, and a feeling of investment the further they get into the survey so some “no brainer” questions at the start pulls folks right in.

2. Balance precision and ambiguity

Remember that the purpose of the survey is to collect data that is relevant to a theory, not prove a theory. I don’t want questions to be so specific that they begin to make conclusions for the audience. At the same time I don’t want questions that are so open ended that people have issues answering them accurately within a single sentence or selection.

3. Avoid asking questions that you already know the answer to

Questions like “Do you enjoy having fun?” don’t really do much for me. In fact, they usually make me look silly in the eyes of the participant and can cause people to bail out before finishing the survey. I ask myself if each question can stand on its own.

4. Keep multiple choice selections short and/or entertaining

The faster people understand what they are reading, the more accurately they will answer questions. Say there’s a question with four possible answers listed underneath. If choice one is too long the participant won’t make it to choice two. Some people literally select the first item that causes them fatigue in order to relieve the mental discomfort. I’m better off coming up with concise answer choices but if they have to be long then make I’ll try to them enjoyable by inserting some humor if appropriate.

5. Save the best for last

Ultimately I want to know if this person is interested in my product, idea, etc. Remember that people are not the most logical animals and will often answer a question because they feel a certain way at the moment instead of think it through. My initial questions should warm participants up a bit by making them think about the subject. This gets them into a mindful state before I drop the bomb at the end.

Cafe Usability Testing

20140220-142738.jpg

Coffee shop usability testing is always fun. I’m working on the UX for the Flojuggler app and wanted to see if people would use some side swipes that I just installed. 100% chose clicking instead of swiping. I’ll leave the feature in but will definitely leave the default clicks in place.

It’s always good to see what people do on an interface instead of going on assumptions. This was a low cost feature to install but now I know that I cannot rely on people using it. I’ve seen some designers, devs, and engineers insist that the UX that they installed is the way it “should be” and attempt to drag the user base along with them. That’s just not how I roll. When testing shows that a feature is not connecting with the user base then I suggest pulling it or making sure that it’s not a key part of the UX.

Interaction is about connecting users to software.

Mind Mapping CloudForge’s Role Assignment

Mind Mapping Permission Assignment

Mind mapping is a great way to get ideas out of people’s heads and into visual representations of those ideas. This was an agile project so we’d often get a few people in a room and figure out exactly what we needed before figuring out how to get it. The above chart is the result of one of those sessions. I really like MindNode for these types of exercises. It’s super fast and flexible. Simplicity can keep the team focused on the task instead of spending valuable time figuring out the tool.

At the heart of the CloudForge monetization scheme is the billing section. At the heart of the actual application functionality is the permissions system. Realize that this app provisions some pretty powerful open source tools for individuals in their garages, small teams in startups, and huge organizations with countless outside vendors. The UI/UX must accommodate a company with 3 people AND 10,000 people. That’s a broad spectrum!