No-Cost Tools for the UX Pro (Who Wants to Save a Buck)

Man with headphones on using computer inside at standing deskOur user experience (UX) team has weekly meetings, and each of us takes a turn sharing something useful. Since I came from a freelancing background, and because some of our clients like to get more involved in their websites, I thought I’d share some free resources that are hanging around on the internet.

Typography

Don’t know how to choose fonts? Do all those fonts start looking the same after while? Finding the right font can be a hassle. Why scroll through a long list of fonts when you can use any of these three sites to help find the right font for you?

  • Wordmark takes the fonts on your device and displays them all in a word of your choosing, allowing you to preview fonts quickly and easily.
  • Finding one font is hard enough; with Typegenius, you can find the right accompaniment to your current font in just seconds.
  • Don’t know jack about typographic hierarchy? Use Type Scale to make you look the part without missing a beat.

Mockups

Maybe you have a client or a stakeholder (hi, Board of Directors!) who need to see how the website will look on their giant monitor or their phone but the site isn’t fully built. Use these professional-grade photos to make your site comp pop. With more than 100 free mockups (smartmockups), you can’t go wrong.

Image editing

  • These are for the light Photoshop user who doesn’t want to pay a subscription to crop some photos or edit some vector graphics every now and then. These apps will cover most of what you need.
  • Have you tried your hand at using the pen tool in Photoshop or Illustrator and made a mess? Learn how to use the pen tool like a pro while having fun! With the Bezier Game, feel the hours melt away as you master the pen tool in this thrill ride of a game.

Sounds

Is dead silence driving you bonkers? Is your playlist distracting you from achieving an optimal productivity level? Use Noisili to get you in the zone.

Images

Many times stock photos look like a bunch of actors smiling at something off camera, here’s a list of free, high quality photos to avoid that.

What are some free or low-cost tools you use? If we haven’t heard of it before, we’d love to give it a shot!

Leah Monica

Director of Marketing

Using UTM Codes for Better Google Analytics Reporting

URL-smIt’s no secret that we’ve been seriously geeking out about everything Google Analytics here at Matrix Group. We’ve been endlessly exploring, experimenting and testing and have been blown away by the amount of invaluable data we’ve been able to collect for our clients, down to the granular who/what/when/where/how/why. We’ve said it before, and we’ll keeping saying it until we’re blue in the face: you simply can’t afford to ignore your analytics reporting!

Want to start digging deeper but not sure where to start? You’re not alone! Our clients frequently ask us for one or two simple things they can do to get started, and our No. 1 answer is: start with UTM codes.

UTM codes are code snippets that you can attach to custom URLs that track a source, medium, and campaign name. This information gets passed to Google Analytics and identifies where your traffic is coming from and what campaigns are driving the traffic. Invaluable data!

Here are a few of our top tips for using UTM codes:

    • Create a spreadsheet to track codes and campaigns. Having everything planned out and stored in one place will not only help you visualize your whole campaign, but it will also ensure more accurate reporting, especially if you have multiple staff members working on one campaign.
    • Keep your tags consistent. UTM codes are case sensitive, so make sure you stick to the same permutations of upper and lower case!
    • Use dashes, not spaces, to separate words. While a UTM URL builder will allow you to use spaces, it makes the URL look a lot less clean. Example: “CEO blog post” will become CEO%20blog%20post. Instead, try CEO-blog-post. Doesn’t that look better?
    • Use a URL Builder to create links. These tools are very easy to use and will save you time and heartburn over building the URLs yourself.
    • Use a URL shortener, where appropriate. When you use UTM codes, the URLs can get quite lengthy and ugly. Use URL shorteners to make the links more visually appealing. There are tons of easy-to-use URL shortener tools out there (we like goo.gl), so make use of them!
    • Never send out a link to your site without a UTM code in place!

Looking for other Google Analytics tips and tricks? Check out CEO Joanna Pineda’s recent blog posts on Google Analytics. There’s some great info there! If you want a little more hands-on guidance and assistance, don’t hesitate to give us a call. We’d love to help you in any way we can.

Have any other tips for getting started with Google Analytics? What are your favorite reports and hacks?

Web Accessibility and Keeping Others in Mind

Refreshable_Braille_displayWebsite accessibility has been on my mind recently. A few years back, one of the biggest trends on the web was subtlety. Medium gray text on light gray backgrounds, super-thin fonts, etc. all looked quite elegant to designers, but in hindsight they were pretty unfair to the average user. At Matrix Group, we try to be as inclusive as possible, and that means paying attention to accessibility and designing our sites to be as usable by the widest range of people as humanly possible.

Our CEO, Joanna, sits in on site reviews, and she sometimes sends us back with edits because the contrast is way too low. She freely admits that her vision’s getting less sharp as the years go by, and if she’s got problems with contrast, other people will, too.

The biggest eye-opening moment for me was when another Matrix employee, Sarah, and I were quibbling over a design element that was misaligned on a site we were building. As a designer, I could see it clear as day, but as a front-end developer with some visual impairments, she simply could not see what I was talking about. She then flapped her hands – her go-to “stop stop stop!” gesture – and told me to put her glasses on to see what the world looked like with her eyes. And WOW did that change my perspective on things! It got me thinking, if Sarah couldn’t see that, what else can’t other people see on the sites I’m designing?

And it’s not just visual barriers we need to keep in mind, though those are the most obvious to a designer. Accessibility also needs to account for a wide range of challenges. These are just some of the main things we think about on the long list of W3C’s Accessibility guidelines:

  • Those who can’t use a mouse with precision due to conditions such as Parkinson’s Disease, stroke, cerebral palsy or even a temporary condition like a broken arm, require sites that have much larger click targets.
  • Transcripts for podcasts or videos will be needed for people with auditory conditions.
  • People who suffer from photosensitivity-triggered epileptic seizures have problems with flashing objects and must be so relieved that blinking, spinning, over-animated text is a thing of the past.
  • Buttons should be specifically named instead of simply “click here” to help provide people using refreshable braille displays with more context.
  • Contrast is one of our biggest culprits. So much so that I’ve been running everything through a trusty contrast checker to make sure everything I design is now legible to all.
  • Attention disorders, dyslexia, learning and cognitive disabilities all benefit from visual clues such as icons paired with text, or different font and spacing decisions.
  • We also need to keep the paragraph line length in check for this audience. As desktop sites get wider and wider, this is easily forgotten because there’s so much room! We don’t need to fill the available space. We need to keep this in check at 80 characters, otherwise it becomes very hard to keep your place while reading.

Luckily, all these things also help simply distracted, impatient people. We all know a few of those, right? Which really is kind of the point of all this: making websites more accessible for users with impairments ultimately enhances the user experience for our audience as a whole and simply benefits everyone.

Except for me. These things make my job as a designer substantially more challenging.

It’s a good thing I like challenges.

What’s the biggest accessibility challenge you face, day-to-day?

Kevin Tomko

Project Manager

Everything Is Going Live

periscopeDid you read about it in the newspaper? Already old news.

How about on Twitter? Soon to be old news.

All information, including news, entertainment, sports, concerts, interviews, etc., will eventually be accessible in real time on your mobile devices.

You can already see it happening. We watch live sporting events on phones and get up-to-the-second stats on smartwatches; we are able to get live streams on our phones to see what’s happening in our homes with security cameras.

When I heard about the wildfires in Canada, I thought I’d jump on Periscope to see if anyone was reporting anything. I watched thirty minutes of live coverage from a local news station showing the fire, people evacuating, etc. It was so interesting to see it live. As I was about to hop off, I saw a Scope that had 18,000 viewers, so I checked it out. I then began to watch the AC/DC concert live from Portugal with Axl Rose from the point of view of someone in the very front row. It was so cool.  I immediately Air Dropped it onto my TV and watched the last hour of the show. It was awesome!  Fire!

Needless to say, there are a lot of mundane Periscoping out there. Like high school kids geeking out about how many hearts their scope is getting or John Smith scoping his commute to work.

All of this got me thinking about what we do, what our clients do, and how can we best use this technology.

  • How are you using video now on your site?
  • How are you disseminating news?
  • What about your social media strategy?

Could you replace any of these with something as easy to use as Periscope or Facebook Live Video? Pretty much everyone of us is carrying a camera-equipped mobile device in our pockets – what’s stopping us from taking video right now?

Think about how powerful that could be during an annual conference! You could stream the keynote speech on Livestream. The staff could run their own live “Man (or Woman) on the Street” series between sessions and events. Attendees could share their Scopes with the same hashtag on your Twitter feed, and suddenly your event can have thousands of viewer hours.

Here are just some examples of live streaming outlets:

Can you imagine what else will be possible? I don’t know about you, but I can’t wait to find out.  Hmmm?  Maybe I should have live streamed me typing up this blog about live streaming?  JK, no one wants to see stuff like that!

Are you using live-streaming video now? What platform are you using? Let us know in the comments!

Rethinking the Way We Work

officespaceMatrix Group could be going through big changes in the near future. Our lease is almost up, so we’re up against a major decision: to move or not to move? This decision has gotten us thinking a lot more about how we work and interact with each other throughout the day.

We recently switched over to to Slack, a messaging app for teams that is making us rethink the way we communicate with our colleagues. So far, in my opinion, it has made chatting with people throughout the day a lot easier and way more fun. With animated gifs, emojis, personalized commands, and – more importantly – easy file and screenshot sharing, do we even still need email for internal communication?

The impending potential move also has made us reassess whether or not our physical space is still working for us. Physical environment plays a big part in keeping people happy throughout the day. Do we need more space per person? Less space? More natural light? Private work space for concentration? War rooms to cram on major projects? Flexible meeting space? It’s a lot to think about.

Another thing we’re contemplating is whether or not to switch entirely over to laptops. Currently everyone, with the exception of PMs and directors, has workhorse desktop systems with multiple monitors. This is great for productivity but also completely inhibits moving around to collaborate with each other. Being tied to a desk can get you pretty stuck in a rut at times. It would be great to move to a different part of the office at points throughout the day just to get a change of scenery and shake things up a bit.

A big trend in office design at the moment is the concept of “neighborhoods.” Instead of having large work stations filling the entire floor, you would have smaller pod areas for specific teams. These could either be stationary or modular, enabling you to roll your desk closer to whomever you may be working with on a project at any given time. It’s an interesting concept, though we’re not sure how practical it would be for us.

Either way, at the very least, we’ll be making a few upgrades to our current office space.

What do you like or dislike about the way your company works and communicates with each other? We could use some tips!