Thoughts on Design

Process for answering critical business questions through design, prototyping, and testing ideas with users – Google Ventures

In this article I provide an overview of my thoughts on the processes that create great designs. I learned a lot of these ideas from trial and error as well as reading articles and stories online and in books.

I’m particularly fond of GV’s article, Product Design Sprint, and ideas from, User Story Mapping: Discover the Whole Story, Build the Right Product

Step 1

Understand Objectives & Learn About Your Users

The first thing to understand is what we are being asked to solve. What is the problem? Below are just a few of the methods you should be using to understand objectives and learn about users.

  • Stakeholder Interviews
  • Competitor Analysis
  • Market Research
  • Data Analytics
  • User Interviews/Observations
  • Define Business Success Criteria, high level requirements

As an interaction designer, I like to be close to the research team during the learning phase. Learning about the user in the field provides me with more insight into who the users are, how they think and what needs to be done to solve the problem.

Step 2

Build a Shared Understanding

After collecting and analyzing all of the information start to design a concept and build a shared understanding with the team.

  • Map the user journey
  • Create a high level conceptual flow
  • Storyboarding a conversation or interaction

Use your UX “War” Room (if you don’t have one, get one) to share concepts with other designers and get feedback. Share the idea with stakeholders, development leads, and other team members so that as the conversation grows you are all reviewing the same story. Use your War Room’s wall to post the storyboards or flows and concepts and get plenty of feedback. During the reviews use the wall to capture notes, vote on certain aspects of the design and tie in the technical aspects of the project.

Step 3

Information Architecture, Layout, Interactions

Once the flow is mapped out and you feel good about where you are, start to create structure. Begin to tie together the information architecture and layout as well as start to define interactions. I always start with paper and pencil and then later take it to either mockups or omnigraffle to share with the larger audience.

Step 4

Critique and Do it Again!

Once you feel comfortable with the concept, flows, and early design, pull the team together (stakeholders, product owners, development leads, designers, etc) and get feedback to ensure you are not missing any critical functionality. You want to ensure you are on the right path and that you are aligned to the business as well as supported by your technology partners. Stay lo-fidelity (whiteboard or pencil and paper) as long as you can and iterate as long as you can without putting the timeline in jeopardy, but to ensure you’re  and then take the design to a higher fidelity when everyone is in 100% agreement.

Don’t forget to review with actual users! If you can get in front of user representatives, that’s great, but try to get in front of at least 5 or 10 actual users to get feedback. This early review with users doesn’t need to be a full fledged usability study, but simply an interview with users to get early feedback.

Step 5

Define the Visual Language

Whether you are the one creating the visual language or not, now’s the time to start thinking about it. Unless your tests failed with the stakeholders or the users and you need to start from scratch, your design is probably well defined now and you can start to think about the visual language.

Step 6

Build a Prototype and Test with Users!

During the iterate phase, just before I start to work with the artists, I also begin to pull in our front end team to do rapid prototyping. I will typically pull them in once the layout and information architecture are both solid so they can get a head start on building out the structure of the app while the artists are defining the visual language. I’ll also start to help the researcher or research team begin to define scenarios and scripts for usability testing.

Email Interaction That Drives Me Crazy

I’ve been using the same email web application for several years. It’s not Gmail or Yahoo, but an app that GoDaddy provides to it’s users. In this article, I pick apart a certain interaction in the email app.

Existing Interaction

Let’s  first look at the interaction of selecting emails.

Did anything seem to be out of the ordinary? If you’re like me you probably watched the red dot move around the page and not the page itself! Look again. You probably won’t notice without actually using the application, but maybe you will.

Overall it’s a really nice and easy to use email web app. It doesn’t provide me with adds like some email apps and is really basic, which I like. However, the way they designed the tool bar makes me second guess myself a lot. I find myself questioning where the toolbar will show based on my selection of a particular email, as well as how I select the email.

If you noticed, the toolbar moves around based on your selection. For instance, I first select the checkbox for the first email and the toolbar appears above the list of emails.

Screen Shot 2015-09-08 at 9.37.46 PM

Next, I select the same email, but by clicking on the email list item. The toolbar relocates above the email in the content section.

Screen Shot 2015-09-08 at 9.39.28 PM

And again, the toolbar moves back to the original position, above the email list, when I select another email’s checkbox in the list of emails.

Screen Shot 2015-09-08 at 9.42.04 PM

And so on…

Ok, so you are asking yourself why this matters. And yes, this might not be a huge deal, but I’ve been using this application for at least 2 years and still struggle with finding the toolbar options. I’m always guessing where the toolbar will show based on how an email has been selected. After a long day of work, my cognitive abilities are weak and I need to use simple tools that don’t make me think! And for some reason, this interaction keeps me guessing. Maybe it’s me, but I think it could be better just by making a slight tweak to the placement of the toolbar.

Maybe the proximity of the toolbar to the email list or email content area is important enough to move the toolbar around, but after using the application and thinking about it, I’d argue that it should remain in one location.

I don’t know if it matters which location, just keep it constant!

Who owns UX: A UX Strategy


In this article I provide my thoughts on where UX should fit within an organization. I also provide my understanding of what UX really means and who makes up a UX team.

Where does UX fit within an organization?

There are many solutions to this question, but which one is the best? Is there a single solution or are there multiple solutions based on an organizations size and complexity? Before I can answer this complex question, let’s take a look at defining UX first.

what is UX?

I learned about UX at work and by earning a master’s in Human Computer Interaction from DePaul University. There are several programs available that teach User Centered Design, but I like to reference Human Computer Interaction (HCI) as the methods and processes designers and UX teams use to create great user and customer experiences.

UX is an end product, not a process or a group. User Experience is the end game, if you will. It’s what the team produces and what the user finally experiences. It starts with the user’s first impression of the product or site and extends to when they leave your store or sign off your website.

UX is the outcome or end result of the team’s use of design processes and methodologies during a particular project which get them to a final solution. A final user experience.

Who is UX?

A great UX team is more than just the designers, researchers and artists. UX can come from anyone at the organization or from the organizations customers or users. The user that calls or writes the company to complain about a key piece of the experience or suggest a new experience or the business analyst who takes the extra time to call back the user to better understand the problem are both taking steps in defining a new or better user experience. Even though they may not be on the “UX team” they still have the ability to effect the end result, the final product or the user experience.

It’s also the executive who understands that it’s not enough to allow for a single usability test at the very end of the project, but is willing to pay for an iterative testing phase to be included in the project so the team can come to the best design. It is also the product and project managers who are able to build a UX strategy and execute a plan to allow for time to utilize all of what HCI and its methods have to offer.

UX is also in the hands of the interaction designers and artists who will bring a concept to life and apply the final look and feel. It is also the developers and technology teams that push back on crazy, idealistic dreams that the designers conceptualized during their first iteration.

It’s the person who says we need to step back and look at this again.

It’s the other person who says we are missing something, but doesn’t know what, and is willing to be late for the deadline to get it right.

Where is UX?

So, where does the UX team fit in the organization? How about everywhere!

It’s not where UX fits. It’s how the organization adopts the methods and processes that the typical UX designer knows and understands. What they use in their day to day. It’s the Product Owner knowing that he or she needs to focus their product on a particular user group first and building the design around the most viable option first before adding more functionality.

What I’m trying to say is, UX needs not be a team, but a way of life in the organization. Take the principles of HCI (Human Computer Interaction) apply them throughout the entire process and you’ll have a great UX design.

It’s not that UX should belong under the IT organization or that the business should own UX. The pieces and parts of HCI should be split out among the organization. An organization should be design focused and UX (HCI methods and principles) should be applied throughout the organization, not just by the UX team, but by everyone. The organization’s culture will thrive when UX is planted throughout the teams, both IT and Business, and will help the organization create better, easier to use, and overall great products.

Starbucks iPhone 6 App Redesign

In this article I critique the Starbucks iPhone 6 app and provide a design tweak specifically for adding a gift card.

iPhone 6 App Review

Overall I like the app. It has a nice, clean visual language and is easy to use. However, I found that adding a gift card was particularly hard to do. In fact, it was impossible to figure out, based on my coworkers experience. He literally couldn’t figure it out! He swore there was no way to add more than one card to the app. He argued that you could only add a second card on their website. My wife also struggled with adding a card for the longest time (tried multiple times) and I was in total agreement! It wasn’t possible!

However, After a few attempts and an argument or two with my coworker and wife, I was able to figure out how to add multiple cards.

Hypothesis: Users do not understand and have a hard time figuring out how to add multiple gift cards to the app.



The landing page is nice and clean. It’s easy to use and I don’t have any problems with the page in terms of layout or interaction.

The only problem I have with the screen is the lack of clarity on which option will allow me to add a gift card. Which option do you think you’d use to add another card? Maybe Gift since I have a gift card, that makes sense, right?


Nope, I quickly realized this isn’t the place to add a card, but rather where I’d buy a new card. I also tried Stores, but that didn’t get me to where I needed to be either. I also tried Menu, thinking this was a typical app menu, but its actually their food and drink menu, so that didn’t work. Ok, I’m stumped. I guess my only other option is Pay.


Since you’re looking at a static screen the option might jump out at you, but it didn’t jump out at me at all. It also didn’t jump out to the people I talked to. I see 3 main calls to action. Pay, Reload, Manage, as well as the ability to see the balance of my card, but nothing that let’s me add a card.

Again, I tried every option. Pay took me to a screen where I could obviously use the card to pay for an item. That didn’t work. So, maybe I could Reload the card with the physical card I was holding in my hand? That didn’t seem to work either. I also tried to Manage my cards, but that didn’t work either.

So, how would you add another card?

Did you notice the tiny plus sign under the card?


Yep, that’s it. That’s your indication that another card can be added. Quite subtle, no? A little too subtle, YES! You can also swipe the card to the right to add a gift card (which is actually how I figured it out). I’m all for gestural based interactions, but when you know people who failed repeatedly, and you too have failed at a task, it’s time to find a better solution.


Here are a couple small changes that would make this a better design, more intuitive and an overall better interaction.

Add a Card - Version 1
Add a Card – Version 1
Add a Card - Version 2
Add a Card – Version 2

Like I said, it isn’t much of a change, but I bet it would make a world of difference. The user now has a visible cue on how to add the gift card. I’d also argue to keep the swipe feature enabled. Don’t take that away from the user, but do give the user a little more of a hint that they can take a particular action to add a gift card.

It’s subtle, but I’m sure it would work wonders for the app!

USAA Mobile Deposit Redesign: Part 2

In my last article I posted an overview of the existing (August, 2015) iPhone 6 app for USAA mobile check deposit. In this article I’ll show you some preliminary sketches for a redesign.

I always start my user flows and designs on whiteboard or pencil and paper. This is true for anything new I’m creating or for a redesign like the USAA mobile check deposit flow.

Here are some initial sketches for my redesign.

Landing page
Landing page & Image Capture
Image Capture
Landing page & Image Capture
Image Capture
Account and Amount
Account & Amount Selection
Account and Amount
Account & Amount Selection
Landing Page after Capturing a Check Image
Landing Page after Capturing Multiple Check Images

I will typically iterate on the design and come up with alternate versions of each possible scenario and page. In these early sketches I’m trying to find the best layout as well as minimize pages and actions.

I first sketch out everything by memory and add as many options and versions as I can think of. Once I’ve expanded the design I will then start to narrow down the options and come up with a final first draft of all the best designs.

First Draft
First Draft

At this early stage of the process I’m really just looking to make sure I’ve included everything and that the entire flow has been considered. I want to make sure the design provides the user with full functionality, but also provides the user with the easiest to use and intuitive design.

In my next article I’ll take these sketches and apply a new visual language to give the app an updated and fresh look.

USAA Mobile Deposit Redesign: Part 1

This article provides a review of the USAA mobile check deposit design. I’ve included a walkthrough of the existing (July 2015) mobile design experience and a page by page analysis of the app using an iPhone 6.

In my next post, I’ll look at ways to improve the overall layout, organization, and fix some of the interactions of the mobile deposit function for the USAA app.

Existing Deposit Mobile Design

Let’s take a look at the existing mobile deposit experience. Here is a quick walkthrough of the existing USAA Mobile Deposit flow on an iPhone 6.

Let’s look at each page and break down the design. I see a few problems with the Deposit@Mobile initial page (Figure 1). I don’t understand why there are so many options. Also, the call to action isn’t strong enough, for me. The “See my account…” link is distracting and the “Clear” and “Deposit” buttons aren’t necessary until after the user adds a check, so I don’t want to see them until they provide value. The three options at the bottom toolbar (Wallet, Logo, & Help) are also not necessary and should be a part of the “Menu” or not available at all.

Deposit @ Mobile
Figure 1

One thing the “Capture Check 1” (Figure 2) page does well is provide the user with where to position the check for snapping the image. I don’t like how the options button has as much affordance as the camera button and the muted colors of the other options (Cancel, Retake, Done). It’s hard to tell which of these options are available and which are disabled. There are other visual design elements similar to this on the first page that need to be improved.

Figure 2

The Check details page (Figure 3) doesn’t provide a very intuitive flow. The options are mixed together and it’s just plain broken. The options and overall layout are confusing and doesn’t make it easy to complete based on the existing interaction pattern.

Figure 3

Entering the check amount was easy to do and works well. I probably won’t change much on this page. Overall, the interaction and flow works for the function the user is performing.

Figure 4

Now that we’ve added a check we are back to the initial page in the flow. Again, there is too much going on with this page. The overall flow of the page and layout needs to be improved and should provide a smoother and natural page visual conversation.

Figure 5


The overall flow and interactions aren’t great and can be improved with some simple changes. There are too many options and the layout needs to be changed to help the overall flow of the check deposit function.

See my next article on how I’d redesign the mobile deposit flow for the USAA iPhone app!


Great User Experiences

Great user experiences don’t just happen by chance; they happen when you involve your users and review the entire experience from beginning to end.

To be an interaction designer you must understand some basic design principles and rules, but to create great user experiences you must understand your user.

I’ve thought a lot about great user experiences and have always tried to create great experiences in every one of my designs.

Unfortunately, I’ve failed and I’ll be the first to admit it!

Creating great designs every time is impossible. We all like to think we do it, but we don’t. It’s not that we are bad designers. It’s not that we don’t try really hard. It’s not that our team has let us down or that we’ve let them down. It’s not that the stakeholder doesn’t understand what they want or need. And it’s not that we don’t always understand our users.

I won’t try to speak for anyone else, but I’ve failed because I’m not applying UX methods throughout the entire process. I’d like to think it’s the process that’s failing me, the final design, or sadly the user, but can I really blame the process, whether it’s waterfall, agile or wagilefall? No matter which method the team chooses it’s our job to make the process work. It’s the UX teams job to fit every aspect of UX; including research, early concept design, usability testing, and iterations of each, into the process.

Don’t get me wrong. This isn’t an easy task. It will be even harder if you’re a UX team of 1. In fact, it’s probably not possible to hit every aspect of the user centered design process, but try to consider each step and to plan for each step prior to getting to far into the project. One of the greatest points I can make is to quit worrying about dates.

I can’t stress this enough. Dates suck! Dates promote quantity, not quality.

A date is a great way to tell you’re employees that they have just stepped into a room with a bomb and if they are not done before it gets to zero, they are inadequate in more than one way.

Employees rush and try to piece together the conversation without really taking a step back and looking at it in multiple ways. Like I said, a design is typically never correct or optimal the first time, so, we need to iterate and conceptualize multiple approaches and test with users multiple times.

Conceptualizing and testing multiple times is the only way…again, the only way…to get to a great design.