UX Design in 2016 (or how to make sure your product doesn’t die)

Last year we saw 70 projects come through our doors that needed help. I was fortunate to have the chance to connect with companies ranging from e-commerce to non-profit industries who came in as community partners with projects and problems for our students to solve. I learned the various struggles businesses experience and helped them discover their strengths and achieve set goals. Employing best UX practices, our students worked relentlessly to identify ways to innovate and improve user experiences. You can read about some of those projects here, here, and here.

As we enter the new year, we are coming into a new era in design. User-centered design is here to stay and ignoring it will inevitably lead to a slow (and painful) product death and, subsequently, the company behind it.

Emotions

User experience is a very wide umbrella that essentially means happiness of your user. This umbrella extends beyond an interface or functionality. Every single touch point your user might directly or indirectly have with your company adds to the overall experience of your users. Every time they hear from a friend about your new app. Whenever they get off the phone with your Customer Service representative. When they read a comment on your Facebook page. The moment they walk into the lobby of your office. I can go on, but the point is”Š”””Šgood user experience starts with the very first touch-point of your company.

There is a great tool that can help you get started”Š”””Šsomething called a customer journey map or experience map. It allows you to pin down all the possible interaction points that your product has and starts looking at the emotional journey that your users go through. Understanding the gaps and negative dips are opportunities that can be turned into competitive advantages. There are tons of posts out there that describe the CJM in more thorough details.

Free template of an experience map kindly provided by Niall O'Connor

Free template of an experience map kindly provided by Niall O’Connor

Mobile-first

” Duh!” you’ll say. I know that we are in 2016 and this premise has been around since the first iPhone came out. What’s happening now is the new era of mobile experiences. It’s no longer enough to have your website ” responsive”. Sure, it re-sizes with browser and elements stack up on top of each other. But is that enough?

There is a notion that’s called progressive enhancement vs graceful degradation. Do you feel the difference? Let me explain.

Progressive enhancement vs graceful degradation

Let’s say you are working on an online shoe store. You have figured out your user needs, user flows, technical requirements, etc. You move on to the wire frame stage and start sketching out the interface. Starting with a mobile-first approach means that:

  • You have a limited screen space. Now you are forced into prioritizing content and functionality. Because you are a sensible designer, you will ask yourself about your primary users, what’s important to them, how they make decisions. You will highlight content that matters to them and hide options that don’t. Eventually you will find a happy marriage between business needs (to sell shoes and have a returning customer) and your user needs (to buy shoes and enjoy the process).
  • Mobile patterns are different from desktop ones. How many times have you been on your phone and didn’t even notice that you are scrolling the page? How about closing a tab because it’s loading for longer than 5 seconds? Or wanting to scroll to another image and getting a new page opened? The point is”Š”””Šwe use every device differently. We have developed behavioral patterns, and they determine our expectations. Meeting those expectations is how you avoid your users getting frustrated.
  • Progressive enhancement. Starting small and going bigger means great experience that can only be made better. You get more screen real estate, so you can start highlighting additional content and functionality. Data limitations are bigger, so you can add other media channels, like videos. You can bring in contextual actions that will keep the user in place and really start utilizing the desktop space.
Steep & Jar

Steep & Jar”Š”””Šgreat example of mobile experience that offers focused options for the user to click on.

Great example of how you can take advantage of mobile patterns, like natural scroll, and adjust content accordingly.

Great example of how you can take advantage of mobile patterns, like natural scroll, and adjust content accordingly.

Notice how content is prioritized on mobile vs desktop version (IBM Green Horizons)

Notice how content is prioritized on mobile vs desktop version (IBM Green Horizons)

Rapid prototyping and usability testing

I’m sure you’ve heard ” fail fast and often”. While this mantra is arguable when it comes to business strategy, in the field of UX design this means that you have to test your prototypes and test frequently. No matter how many great minds and “˜A’ players you have on your team, nothing can replace usability testing.

Before you say it’s a waste of time or money, take a look at this case study by Nielsen Norman Group. Working with Mozilla Corporation, they were tasked with improving their help page. The Firefox “˜Help’ landing page contained a lot of useful information, but users still ended up asking questions in the forum. Over 30 articles were available right on the homepage, however searching was the only way to find a solution to a problem not listed.

Firefox-iterations

Some of iterations that were tested with users, all of them were paper prototypes.

NNG went through 7 iterations over 2 weeks and ended up with incredible results of 233% improvement out of a redesign for usability (you can read up on ROI in details here).

Final design of Mozilla support page that was 3 times better than the original.

Final design of Mozilla support page that was 3 times better than the original.

The point is that usability testing can be done fast and dirty and can save enormous amount of money on development.

Micro interactions

The rise of CSS3 and new JavaScript libraries is bringing us more and more opportunities to make our users happy. Devil is in the details and so is delightful experience. For example, providing your users with contextual feedback: when they upload a file”Š”””Štell them it’s done right there on the button.

Upload example by Colin Garven

Upload example by Colin Garven

Keep them informed of what’s happening in the background. There is nothing worse than sitting there watching the loading icon spin and wondering if the whole thing just froze.

Great example by Hanna Jung of pairing loading gif with a label of what the system is doing in the background.

Great example by Hanna Jung of pairing loading GIF with a label of what the system is doing in the background.

Simplify your forms and make them nice to use. Keep the user unformed of what field they are filling out, give them input validation right away and disclose actions progressively.

Twitter's form is a great example of keeping the user informed and not overwhelmed.

Twitter’s form is a great example of keeping the user informed and not overwhelmed.

More focus on usability and less focus on pixels

The days of reinventing button styles are over. There are hundreds of User Interface kits, icon libraries, color palettes and branding kits. I’m not saying you should only be using those, but it’s easy to design a beautiful interface these days. What isn’t easy is creating product logic that solves users’ problems in a seamless way. We hire products to get the job done and we retire them as soon as another product can get it done more efficiently. There is a lot to be said about AI that directly relates to this trend, but I’ll save it for another post.


We are only beginning to scratch the surface of user experiences and how to design meaningful interactions. The tech world is constantly evolving and so are our expectations and behavioral patterns. The best thing you can do is foster curiosity in your business, keep talking to your users, and try to leave your own bias (and ego) out of the product development.

And if you are in Vancouver or Toronto, come talk to us and see how our team here at RED Academy can improve your business.

Lead Ux instructor Karina eating red sweeties
Author
Karina Daukaeva

Karina is an experienced UX and graphic designer with a primary focus on interaction design and product development. Having graduated with a Bachelor of Science in Cognitive Psychology, she originally started as a digital illustrator and gradually moved to web development and branding. Her biggest passion is working with startups and custom-built products, as it gives her a chance to work with different stages of the product, from visual identity, design, and branding to front-end development, market research and testing. She currently leads UX Professional and Foundation Programs.

Interested in finding out more?

Fill out the form and we'll walk you through the rest.

Vancouver 778 379 7175

Toronto 647 793 2333

Vancouver 778 379 7175

Toronto 647 793 2333

submitting...

aaand it's done!
thank you.