First, let’s get the basics out of the way. UX stands for “user experience”, while UI stands for “user interface”.

These two concepts might seem indistinguishable. They also might seem like fancy words that describe not a whole lot. The truth, however, is that they are independent practices serving very different — and important — end user needs.

I like to think of UX as the map of the user’s journey and UI as the actual road the user walks on. Let me explain…

UX is a high-level understanding of who the user is and what they need. We perform exercises such as building user personas to get a clearer understanding of the user’s demographics, goals, physical environment, and pain points. Based on these findings, we construct the overall architecture of the digital solution we’re building. This includes asking questions such as: What is the problem the application is helping to solve? How is the user finding the application? Is the user more prone to a mobile device or a desktop computer? Does the user want to use the application, or do they need to use the application?

Let’s say we establish that the users are employees at a large corporate enterprise being tasked with using our application by their boss. Their interaction with our app is something they have to do (most likely while sitting at their desk in their gray cubicles), or they run the risk of not meeting compliance. This information tells us that the users’ experience needs to be as enjoyable and painless as possible. Some examples of how this can be accomplished:

  • The onboarding portion should be welcoming, but not overly cute or saccharine. Language or graphics that are twee wouldn’t be age-appropriate and might be off-putting for someone who isn’t willingly there in the first place
  • Highlighting the users’ progress through the application will maintain momentum and give them an on-going sense of “I’m almost done”
  • Providing subtle encouragements and directional next steps supports the users through the application, hopefully minimizing frustration with work they’re not choosing to do themselves

Another key concept we all need to remember is that good UX is completely invisible to the end user. If we’ve planned the user experience well, there is no moment of confusion…which leads me to UI.

UI refers to the actual building blocks of the application. Meaning, how does each view of the application look and function? Once we’ve figured out where the user needs to go and how they should get there (the UX “map”), we then need to figure out the rules of the UI road. How big does the road need to be? What colors make sense on the road? How many steps on the road before the user has completed task X? You get the idea.

Going back to our example end users who are being tasked to use the application by their boss, here are some UI elements we can use to help reinforce the overall experience already sketched out for them:

  • Personalization: If we implement a user profile, we can leverage first names and avatars throughout the application — allowing for specific messaging and a subtle sense of ownership
  • Typography: you’d be surprised the impact the right typeface and font have on the overall application. If your user needs to move through the application quickly, consider using a clean, large font that allows for a easy to see calls-to-action and navigation
  • Color: Knowing that the users are not voluntarily using the application, what color scheme makes sense to show failure, success and so on? A bright red signifying a wrong answer is probably too off-putting for the user. A more pastel palette might better serve the user — and the application
  • Hierarchy: How you lay the information out on the page should always honor the most important tasks and information for the user. Remember, keeping the user’s experience as frictionless as possible is key to an application’s success
  • Simplicity: Don’t make the user struggle to figure out where things live or what’s next. Obvious touches like clearly labeled elements or universal icons may seem like boring design decisions, but it’s wise to err on the side of “understandable” — as opposed to the “cool”.

When we are in the process of sketching or designing out an application — essentially planning out the UI of the application — it’s always best to go back to the UX you’ve established. Considering what the user will appreciate when determining the placement or title of a button may seem silly to some, but it’s these subtle touches that can help your application rise above the competition.

There is so much more to both of these concepts, but I hope I’ve at least helped you understand the basic differences between UX and UI.

We’re living in a digital gold rush and everybody feels like a prospector. With fantasies of great fortune being born from a great idea, there is an overwhelming push to get something to market as quickly as possible… before somebody else beats you to it. This breakneck speed leads to poor business decisions, far too many assumptions and a marketplace riddled with products have no discernible usability.

Planning

Here at Centresource, we start any product build by guiding our clients through a variety of exercises to help us to identify the product’s viability and essential feature set.

Ideal Customer Profile: Never assume that your product idea is so wonderful it will appeal everyone. If you do not focus your product towards a particular audience group, you will serve no one. Our ideal customer profile exercise helps you identify not only your most important primary audience member, but also your earliest adopters, and those who will be the most positive advocates for your product. Any product has the chance to grow into a universally appealing item, but we urge everyone to start specific, selective and smart.

Product or Service Profile: It’s important to know what your product does, but it’s just as important to remember what your product does not do. Keeping focused on the most essential function or service your product provides allows you to move to market as safely and smartly as possible. Again, you will always have the opportunity to scale and pivot as user needs dictate.

Positioning: This exercise asks the simple question: Why should your ideal customer care about your product? The process of answering this question helps you unlock the emotional angle of your product, as well as uncovering an end user’s potential objections to buying or converting. Figuring out how to help your end users overcome these objections — whether it’s through marketing, pricing, or functionality — gets you much closer to the key messaging around your product.

We consider these three exercises to be integral in the starting ideation and identification of your product. They help identify what your potential market share may be, as well as your projected financial gains and losses once you move into being a full-time product owner.

Prototyping

An incredibly powerful mid step for any product building is prototyping. If you are a lean startup, chances are you are going to need capital investment to really get your product off the ground and into production. An illustrative and impactful way to prove potential market share is through a fully designed prototype. A prototype not only allows you to demonstrate the potential points of sale within the product, but also identifies how an investor can make their money back with your product.

Building a prototype also offers a great opportunity to start unpacking feature sets and functionality the product could potentially have without writing any code. By addressing overarching design and user workflows in such an immersive way, we’re able to fully flesh out a concept for a product and help you understand how much it will potentially cost to build – which is essential as you go out and try to raise capital.

Prototypes also offer an incredible tool for user testing, allowing us to send your product out to an anonymous, objective, and qualified group of users. These users help us understand what assumptions we’re making about the behavioral usage as well as the actual need for this product.

Production

By this point, you’ve gone through product identification, including market share potential, conversion rate, and financial modeling. You’ve built and demoed your prototype for proof of concept and to gain investment, and you’ve sent it through user testing to test assumptions and gain objective feedback. The last step is to start the build, and it can feel like the biggest, scariest step in the world.

Keep in mind, however, that the collective purpose of the preceding steps is to refine and distill your product to be as successful as possible. Remember, we recommend you start with a specific, selective and smart product. With that in mind, we like to orient our development around the individual features of your product — this allows you to see and understand the life cycle of your product in an iterative way. Phase I of your product will not have every bell and whistle you imagined, but it will have be enough for you to go to market as wisely as you can.

Last week, the Centresource Strategy team went to Braintrust’s CSPO (Certified Scrum Product Owner) Training. Braintrust describes Scrum as a “way to get work done” and most simply put, this is exactly what we went to learn. For two days, we froze under A/C vents in a conference room carefully reviewing what it takes to be a successful Product Owner.

Building software is never simple, but by using simple methods to manage the workflow and prioritization of work, one can greatly impact the quality of the final product. Additionally, embracing the values (commitment, focus, openness, respect and courage) internally and with our clients means better products and happier teams.

To most easily illustrate how Scrum works, I’ll share a story about an exercise we went through that hit me pretty clearly over the head.

The Fruit Salad Experiment

During the training, we were grouped into teams and asked to make fruit salad. Yes, this is a real thing that happened. We were given a table full of fruit and asked to plan, develop and launch a salad, together as a team. Metaphors to software development were more apparent than you might think.

As a group we assigned roles, tasks and responsibilities. Our first cause for discussion was that we noticed, among the strawberries, blueberries and kiwis, sat a raw potato and garlic. What role can these two items play in a fruit salad? We quickly came to the consensus that they were, indeed, not necessary. The imaginary lightbulbs flashed over our heads – these represented unnecessary product features. We set them to the side.

We only had two knives, one cutting board and a whole table full of fruit, so we had to plan what we could accomplish with the items available to us. Again, noting the similarities to software development, as resources and tools can be limited.

Knowing we had three sprint cycles of development to work with, we planned our time against the first, and began washing, preparing and slicing our fruit. After, our instructor (the decision maker) stopped by, provided feedback on the progress, and sent us off to our second sprint.

About halfway through the second sprint, we got our next curveball – a pineapple. Our decision maker tossed the new fruit on our table and exclaimed “get this into your fruit salad now!” We all knew what this metaphor was – a new feature we had to process that we hadn’t planned for. We set it aside for later discussion and eventually built it into our third sprint.

We wrapped by focusing on the new feature (pineapple) and ended up with a fruit salad that was beautiful, functional, delicious and free of unnecessary ingredients. In this 20 minute exercise, we had figured out the Scrum process: Plan the what & the how, do the work, review the progress, rinse and repeat until done.

The metaphors may have hit us over the head a little bit but I walked away from this exercise knowing that each step of the process was equally as important, and remaining true to your planning and trusting your group are keys for success.

Now that we’re officially certified (along with several other Centresource team members that were Scrum Master certified last year) we’ll be continuing to exercise these methods in order to develop the strongest and most viable products for our clients.

There’s a lot of information on the web, and a lot of great resources for developers, designers, do-it-yourselfers and basically anyone willing to learn. We read a lot of blogs which follow development and design trends for the web. I’ve put together the ultimate list of UX blogs here for you. Pop open your bookmark manager, or fire up your feedly app, because you’re going to want to save these links.

Smashing Magazinehttp://www.smashingmagazine.com/

Smashing is the motherload of resources. They have sections on Coding, Design, Mobile, Graphics, UX and WordPress. These articles are highly curated, up to date and well written. If you had to be stranded on a deserted island for the rest of your life with only one UX blog, Smashing Magazine would be it.

Material Up http://www.materialup.com/

Google unveiled a new design language called Material Design about a year ago, and it’s changing UX across the web. Material Up is a blog which showcases design concepts, prototypes and live products that are utilizing this new design aesthetic.

Hover Stateshttp://hoverstat.es/posts

Hover States is a gallery showcase of highly curated, outstanding interaction design and frontend development. If you’re looking for ideas on what your next super hot site should look like, this is your spot.

UX Boothhttp://www.uxbooth.com/

This is a curated list of articles which discuss UX decisions, resources, information architecture, and other relevant topics which aim to make the web a better place. These articles are pretty wordy, so if you’re looking for pretty pictures and minimal words to actually read, this might not be the blog for you. If you like thoughtful insights and great discussion, bookmark UX Booth.

CSS Trickshttps://css-tricks.com/

Chris Coyier has established himself as a front end guru. He knows CSS with a level of intimacy that is honestly a bit frightening. This blog is more geared toward a developer, but the insights and guest posts provided here are amazing. There have been countless times where I am searching for a solution to a front-end dev problem, and I end up finding the solution on CSS Tricks.

Site Inspirehttp://www.siteinspire.com/

Another great visual gallery with lots of eye candy. Site Inspire is another place for great inspiration when planning a site build. Also highly curated, this blog has really great examples of outstanding sites with solid UX.

Mashable – UXhttp://mashable.com/category/user-experience/

Mashable has a lot of resources on a lot of subjects. Their UX section is a good read though. Easy to read, quick to the point. This is a daily spot for us to quickly digest some UX news, tips, and tricks.

So there you have it. The Ultimate UX Blog List. Blogs are a crucial part of our day to day life at Centresource. I hope you find some good info, or inspiration from these lists. The web has given us some really amazing opportunities to build communities and share things we have learned. Spread the love people!

As a full-time developer, I’ve had the pleasure of working with some really awesome clients but sometimes communication can get a little foggy due to the number of technical terms that developers, strategists, and project managers tend to throw around during meetings and phone calls.

In an effort to help bridge the communication gap, we’ve put together a fairly extensive list of terms you might across when having your site built.

This article assumes you already have a general understanding of the web and how websites and apps work. Bookmark and refer back to this list as often as you need. We’ll kick off part 1 with the least technical terms, so let’s dig in!

Common Web Design Terms

Animation – Otherwise known as web animation, these include any element, text, images and graphics that change property over time. Some changes may be automatic or set to happen after a specific trigger event. Web animation can be done through CSS effects, GIFs, Javascript/jQuery, or Flash. Yes, some people still use Flash.

Blog – The shortened term of web log. Similar to sites run by Content Management Systems, blogs are sites that are updated with content regularly. Some blogs are akin to online diaries, detailing the perspectives and opinions of the blog owner. Blogs can also focus on a specific topic. A majority of blogs are hosted via the WordPress platform.

Browser – This refers to the software used to interact, navigate and view websites on the Internet. Popular web browsers include Google Chrome, Firefox, Safari, Internet Explorer, and Opera. New to the scene is Vivaldi Browser.

Carousel – The term used to refer to an image slideshow. Some image carousels are displayed with links and text descriptions. Carousels often load automatically when entering a new page. Most website owners use them to direct their visitors’ attention towards important parts of the site. They can also be used for advertising and promotion.

Code – Code is a term used when referring to symbols, words, and letters (as a whole) that are used by various programming languages to either instruct a computer to perform a function or output visual elements on a screen. A few coding languages include PHP, C, Ruby, Java, Objective-C, Javascript, HTML, CSS and the list goes on (in no particular order).

Content Management System – Content Management Systems allow website owners to edit, update and manage their web pages even without coding know-how. Most website owners who want to manage and oversee their websites themselves can use a CMS. Popular CMS applications include WordPress, Drupal, and Joomla.

DNS – DNS stands for Domain Name System. This refers to the process where a website’s URL is translated into an IP address. This process is what allows users to easily access a website, without having to remember its IP address, after they enter the website’s URL into the address bar.

Drop-Down Menu – This is a hidden list of sub-links which become visible only when the mouse pointer is hovered over (or clicked on) a button link, typically represented by an arrow pointing downward. Drop-down menus are handy if your website has a lot of sub-pages for every main (or parent) page. If the website has a lot of pages, drop-down menus can help make it more organized, and since it is hidden, it reduces the clutter in the main page as well.

Embeds – These are third-party code that can be embedded into your web page. These are often used to display images, videos and other elements that are hosted on other sites. For example, using the embed code from YouTube easily allows you to put a video on your webpage. Through embeds, visitors can view the elements directly on the page without needing to leave the website.

Header – The website header is located at the top part of a website and is usually fixed in terms of position and content. Most headers contain the company logo, short descriptive text, contact information and buttons with links to pages within the website.

Hosting – Web hosting is responsible for the storage and sharing of all website content such as files, images, elements, text, video and other information. Web hosting makes it possible for all page elements to load and appear when users open a specific page.

Image Optimization – This is the process by which images are resized, adjusted or cropped so they load faster. Web designers often change the size and resolution of images so that users are able to download them easily, making the website more user-friendly.

jQuery – jQuery is one of the many coding libraries used in building websites. This language is often used in creating animation effects or timing events.

Keywords – These words, and sometimes even phrases, are chosen specifically by people in-charge of the website to improve its ranking in search engines. Targeting keywords effectively can make a website more visible and accessible to its target market.

Links – Links are text used as navigation links to connect and transfer from one page to another. Most websites use links to map out the different areas on their website, either on a side panel or header menu, or within the site copy. Common link titles include: “About”, “Contact Us”, “Home”, “Gallery” and “Services”.

META Data – This is a section of code that is not visible, but is integral to a website’s SEO standing. META data often includes the website’s chosen keywords, as well as the general description of the website. This data is used by Google and other search engines to determine the relevance of a website to its chosen keywords.

Navigation Bar – This bar contains links that connect users to other pages on a website. Typically, navigation bars are placed at the header, on a sidebar, or even at the footer.

Search Engine – An online resource that gathers relevant results according to search terms given by the user. Through search engines, you can search for a specific website, images, videos, blogs and even books. Search results are sorted through an algorithm that focuses on relevance and website integrity. Three of the most popular search engines are Google, Bing, and Yahoo.

Search Engine Optimization – SEO, for short, refers to methods and techniques used by websites or online marketers to increase their ranking on search engines. By understanding a search engine’s algorithm, companies and private individuals can alter elements in their website such as Meta data, keywords and content to boost site relevance, which in turn, will help boost the website to the top of search results for the site’s chosen keywords.

Splash Page – Splash pages act as gateways to the actual website. While this is not considered the homepage, splash pages can contain a greeting to the site visitor as well as a short description of what the site is about. For sensitive websites, some splash pages contain a confirmation of the user’s age and consent. Splash pages may also give viewing options such as default language, currency, and other variables.

The Iron Triangle is the scope, budget, and timeline of your project. From these three strong components, who is your master? That is the most valuable question you will be asked in the lifetime of your website or web application engagement. Your answer guides the team through all stages of strategy, planning, development, and project management. There is no point throughout the process that the master is out of view. Around your master, we shape nearly all of the decisions we make for your website or application. Its importance cannot be stressed enough. So, how do you choose?

iron triangle

Taking a closer look at each point of the Iron Triangle will help you make the best decision for your business.

SCOPE:

Scope is any feature you want to include on your site or application. Clearly defining scope sets boundaries for both your team and ours. Is it extremely important that we use a certain software, include a video component on your site, or a “find the location nearest to me” function? Each of these are examples of scope that help guide our discovery. If there are features that are non-negotiable for you, scope is your master.

The sky is the limit when it comes to dreaming up features for your website or application. We can create pretty much anything our clients need… with the right amount of time and budget. Which leads us to the next point.

TIMELINE:

Do you have a definitive date that the work must be completed? Perhaps your company has a conference, sales meeting, or marketing push that it needs the site or application to be finished by. If the site not being live by that time would cause serious problems for you or the company, your master is timeline. We will shape what we create for you with the timeline as the guiding factor.

BUDGET:

Truth be told, this is almost every business’s master whether they realize it at first glance or not. As I mentioned above, there’s almost nothing Centresource is not capable of planning and building — and if you let us, we’ll do it for you! However, most businesses have a certain cap on their funding. In that case, that budget cap is your master. We will make strategy and development choices that align with the budget you have to work with. We don’t create anything without baking in quality, so no matter if your budget is $15,000 or $500,000, your product will be worthy of praise and pride for you.

When choosing your master, ask yourself what is most important to your business: Scope, Budget, or Timeline? All three items of the Iron Triangle are of paramount importance. But which one will be your guide?

 

Trying to determine if your website is lacking good user experience can be tricky. You have to be both subjective and objective… and willing to let your audience (not you) drive the layout, structure and tone of your site.

Ask Yourself

How old is your site?
User experience, or UX, is a relatively new practice when it comes to site and product planning. We’ve been doing it in bits and pieces as an industry for a while, but it only became a widely recognized and cohesive discipline in the last five or so years. If your site’s design and structure hasn’t been critically thought through in over two to three years, chances are high that it doesn’t have optimal UX.

Does your site visually represent your business?
Take a look at your homepage, is your explanation of services or value proposition easily seen and understood? Imagine a stranger landing on the site, would they be able to understand what service you provide within five seconds?

Is every click valuable?
Considering the average attention span, visitors need to be rewarded with every click they make. They need to be served an obvious and relevant path through your site that leads them to either the information they seek or the action you want them to take. Look at your homepage and interior pages, do you see the prompts for this path clearly and attractively laid out?

Are visitors taking action on your site?
This is a simple, but crucial, thing to measure — and ideally one you can ask yourself without diving too deeply into analytics (we’ll get to that). Are your visitors signing up for a free trial or your newsletter? How many site inquiry submissions do you get a day? If the main points of conversion on your site aren’t converting, then you’re likely suffering from problematic UX.

Now remember, all of these “diagnostics” are still highly subjective. The key to really understanding if your site has a UX problem is to look outside your organization and…

Ask Others

Google Analytics
Google Analytics is an incredibly powerful — and free! — tool that can help you put two and two together about why your site might be a bit of a zero. Setting up Google Analytics is pretty painless. They provide enough tips and documentation on getting started that you can quickly spin up your account.

Google Analytics will help you answer questions like:

  • Are people dropping off as soon as they hit your site?
  • What’s the average length of site visit?
  • Are you getting repeat visitors?
  • How many pages are people clicking through before leaving the site?
  • What pages see the highest bounce rate?

Understanding the answers to these questions will help you understand where and how your site is failing your audience. You can start to unpack the actions your audience members aren’t taking.

User Testing
Let someone else tell you what’s broken about their experience on your site! Although user testing is pretty face-palm obvious when it comes to getting actual, actionable feedback from anonymous (or acquainted) users, it will cost you. You can pay for services such as usertesting.com or dedicate your time to scheduling and monitoring the tests – these costs can be hard to justify, but the data is valuable. Remember that user testing is a great opportunity to get truly objective feedback. Even if you’ve planned your site with the best of intentions for your users, chances are you made some pretty sizable assumptions about their needs and behavior.

What are some they ways you’ve identified a UX problem on your site?

Why?

Most great products are born out of recognizing a common problem that has no solution — and providing that solution to a (hopefully paying) customer base. This, however, is really only half the battle of planning out your product or website. There are very few, if any, products out there that can be all things to all people.

The key to any truly successful build is understanding the specific person for whom you are creating the solution. It is one thing to build an application for recent college graduates glued to their mobile device, it is another to build an application for a retired grandfather who is just getting comfortable on a computer.

But those kinds of top-level demographics are not going far enough. You have to unlock the specifics of your assumed customer base. You have to ask yourself a variety of questions to capture their nuances, their oddities, and their humanity. By doing so, you begin to establish a face, a name and even a disposition for your user — all of which shape the distinct touches your solution needs to have.

Most importantly, creating a persona triggers empathy. We have to care about what our users care about in order to truly serve them.

How?

So, how to begin? With simple foundational information: age, gender, occupation, education and their comfort level when it comes to technology.

Next, you want to think about the three most important things that person needs to do, and why. Are they interacting out of need or want? Are they distressed or happy? Keep it simple, but specific.

As you think through the various workflows, use their name as you chart out steps, “Carol enters her email address and password to sign in.” You also want to layer in some appropriate emotional color to the whole picture, such as “Carol is worried about losing her job” or “Carol is a big fan of Instagram and Pinterest.” You’re setting a general mood and understanding the ways your product can play off of that mood.

If you need even more realistic texture, some user experience experts recommend thinking of quotes your user would say, such as “I need to find a job with daycare.”

Finally, an image of your user brings all this “strata data” into a recognizable point of focus. Bounce any feature that comes out of ideation off of your user persona to see if it has value…and run your user persona through the whole product flow to find the omissions and redundancies.

By taking these humanizing preliminary steps, you are immediately making better decisions…and a better product.

 

We work with a lot of companies in varying states of maturity. Some prospective clients come in with workflows, user identities and fully vetted business models — they just need an objective, expert hand to finalize strategy and design. Some folks come in with nothing more than a fantastic idea and a basic blueprint of how to bring that idea to life. For the latter group, it’s key to help them fully flesh out their concept and market viability before we move into any concrete planning or strategy.

One of the best tools for realizing this particular stage of the process is a business model canvas. There are traditional business model canvases out there, but The Lean Canvas created by Ash Maurya (author of Running Lean) is tailored specifically to the entrepreneurial venture and is a great way to help a client unlock some surprising ideas about their product.

Adapting the basic structure of the business model canvas first pioneered by Alex Osterwalder, Maurya is more focused on identifying the problem a product is trying to solve, rather than the ideal solution the product represents. Maurya says:

Once you understand the problem, you are then in the best position to define a possible solution. That said, I purposefully wanted to constrain entrepreneurs (through the use of a small box on the canvas) because the solution is what we are most passionate about. Left unchecked, we often fall in love with our first solution and end up cornering ourselves into legacy. Keeping the solution box small also aligns well with the concept of a “Minimum Viable Product” (MVP).

The Minimally Viable Product is so important, and one that a lot of entrepreneurs aren’t advised to follow. Instead of falling prey to “feature fever,” we’re always advising our clients to start small and to start smart. The MVP forces product owners to distill their product to its most basic structure. What is the key problem that needs to be solved…and what is the essential functionality users need in order to realize the solution to that problem?

The Lean Canvas also breaks down the potential input and output of a product. What is the known overhead? What are the expected sources of revenue? These are great paths towards understanding if there’s room in your business plan to roll-out a free beta version — making space to find early adopters (who can become product advocates) and collecting real-world user data and feedback.

These last two pieces of information are critical for building out a product’s next phases. Which features are being demanded by the users? Which features are now no longer relevant based on the actual user base? The product owner can now very wisely spend money on an even better, more essential version of their product.

So if you’re still with me, we’ve talked about:

  • Product Ideation
  • User identification
  • User acquisition
  • User verification
  • Conversion testing
  • Surveying

…whew! Now, we’ll go into actual prototyping. You finally get to think about your product again!

Usability

The best kind of study is face-to-face. Asking open ended interview questions allows the user to guide you through their experience and lets you glean information without affecting the results. The quickest way to show a user your idea is via prototyping.

When we prototype, we mostly start with a whiteboard or hand drawn sketch. We use tools like FlintoDA.IOor Prototyping on Paper to reveal our ideas in flat, clickable prototypes. Sometimes these are sketches or actual UI. Starting with sketches or lo-fi wireframes allows us to quickly pivot to satisfy a user’s needs. We do lots of different types of exercises (mostly with notecards: ideation, cart sorting, user workflow pathing) to get a users’ ideas articulated.

Notecards are also sort of shaped like screens. We can draw little diagrams that look like apps and guide a user through an experience on the table in front of us. They’re also cheap, portable and easy to play with. You can tear one up when an idea turns sour; it’s cathartic, final and you haven’t wasted time writing good code for a bad idea. I love notecards.

Once we have something to work with, we quickly move into a build phase. Once we’re building, we seek constant user feedback. For user feedback, a few tools…

  • Silverback is a Mac app that allows me to record a user’s screen as well as the iSight camera (meaning I can monitor their face/voice as they navigate an experience).
  • Userzoom is a similar tool, but allows for remote users (meaning they don’t have to be in the room with me).
  • User Testing is a tool that asks anonymous users (so, not your ideal customer) their thoughts about an app or system.
  • Feedback Army is another anonymous user tool, but it gives me 10 user responses for $20. Cheap.

Taking this user feedback allows us to start making decisions on how we build. This leads us to our MVP.

The Minimally Viable Product

On the Centresource UX team, we constantly work through this process via a variety of prototypes. I mentioned paper prototyping but that’s just the beginning. Often times we use paper prototyping merely as a way to validate an idea or workflow internally. We’ll apply a brand style to our paper or HTML prototypes to create a UI prototype. We refer to this internally as the Minimally Viable Concept, or MVC. This concept is clickable and feels like a real experience (especially on an iOS device with Flinto). It’s perfect for user testing or even to show potential investors or partners.

From there, we can further validate and iterate on an idea until it’s ready to be built. We often start with aproduction prototype. This is a front end only prototype that actually breaks our MVC into workable HTML, CSS and Javascript. We can test our assertions for responsive design, identify any holes in the process and create a solid pattern library for all interaction types.

Once we have this in place we can hand the whole piece over to our development team to create the real product. Now, it’s time to ask the key Minimally Viable Product question:

What is the least amount of effort I can expend on creating the most amount of value for my users?

This is a tough question to answer, and it’s why the previously mentioned tools (ESPECIALLY interviews) are important. The concepts and prototypes we’ve created often show the full product experience. Do you truly need all those elements and features to get your product to market?

You should know exactly what your users find valuable and start with only those bare requirements. Using iterative development methods, we can use our user learning to iterate and grow towards our ultimate vision. And now, a little kung fu wisdom:

“It’s not the daily increase but daily decrease. Hack away at the unessential.” – Bruce Lee

The healthy product is the evolving product. Use your base of committed users to tell you what to do next, and don’t be afraid to pivot when you need to.

All the tools we’ve talked about are important, and they should be returned to frequently. This process is iterative and your target constantly moves. Ultimately, by caring about those you serve and constantly checking up on them, you’ll make a truly valuable product.