Posted on

Talking About Design Feedback at Stir Trek 2016

Last week I had the opportunity to speak again at Stir Trek, a yearly conference held in Columbus at a large multiplex theatre. It’s a one-day event with 6 different ‘tracks’ of speakers. You finish up after the sessions with a showing of the latest Marvel movie (or Star Trek, etc). It’s a great event; organized and run very well, and the cost is very reasonable.

My talk this year was on how to give design feedback. Specifically, how to give useful feedback when you’re not a designer. It was a tough topic to prepare, because I had to research and work through the problem myself; it’s something that’s been troubling me for a number of years.

I took the risk of keeping the presentation short, allowing 20 minutes for a mini-workshop getting actual critiques from attendees. The goal was to ask attendees how they’d respond in example design critiques using the advice from my talk. I also had a 1:00pm time slot and crowd interaction allowed me to fight off post lunch food comas as best as I could.

I can happily report that it went very well. Things ran smoothly, there was plenty of audience participation (and it was ~80% developers!), and I had some nice discussions afterward.

After the conference, I spotted this great review and among the retweets and mentions were these awesome sketch notes:

There’s much more to learn and share around feedback, so I look forward to hopefully giving a similar presentation again and discussing with more people.

My slides are available here. If you’re interested in a live presentation of this talk, please reach out to eric@coffeeandcode.com!

Posted on

Talking Personas and Empathy Mapping with UX Akron

I had the great opportunity last week to give a short presentation at UX Akron, and lead a small workshop on personas and empathy mapping.

A persona is simply a fictional character (or set of them) your team creates to serve as a snapshot of your audience. The idea is to take things like demographics, goals, wants and needs and give them a relatable human presence. It’s much easier for us to be empathetic when we’re discussing ‘someone’ rather than just ‘our users’ or some other more abstract reference.

Empathy mapping is an exercise used to get in the mindset of your users, helping you to think and act like they would. You take one of your target users, and divide up a sheet into quadrants: thinking, feeling, seeing, and doing. You brainstorm different ideas with sticky notes for each section to help build a snapshot of this user at this point in time.

Our goal was to learn a bit about personas, and then look at personas that have been created for the UX Akron group. We used empathy mapping to understand the thoughts and motivations each of those personas was experiencing as they were thinking “I’m considering going to a UX meetup”. We looked at our results and it led to some quick ideas on how the group is missing marketing opportunities, or might structure its messaging to better appeal to certain groups.

Overall it was a great night with a diverse group. I look forward to attending as a regular member, and hopefully speaking again in the future.

If you’re looking to learn more about a current design topic, let us know at info@coffeeandcode.com We’re booking speaking and workshop engagements now for Fall and Winter 2016.

Photos credit UX Akron & WOCinTech

Posted on

Choosing a Prototype and Wireframe Tool in 2016

The past few years have seen an explosion of interest, usage, and growth in using interactive prototypes to build, evaluate, and iterate on design work. Coupled with the rise in style guides and atomic design, the prototype is now often the primary deliverable many designers create.

Thankfully, the tools to create prototypes have kept pace; there are myriad choices available, with something new posted with shocking frequency on design blogs. How do you select a tool for your workflow? What are the pros and cons of different types of software? I’ve prepared some notes to help guide you, and focus your search. I was inspired to do this after a great session prompted by UX Akron.

Before getting much further, I’d like to address wireframes. Though the term has fallen out of favor lately, I think that wireframes are still incredibly relevant and useful. The difference between a rough prototype and a clickable wireframe is just terminology. I don’t believe wireframes need to be static, nor do I think prototypes need a certain level of fidelity. The differences seem largely semantic and based on industry zeitgeist. The level of fidelity should be based on the project and your needs, not a pre-determined bias.

Types of Prototype Tools

There are 3 main categories that modern tools fall into:

  • Screen or page focused
  • State or layer focused
  • Code focused

Some tools are a hybrid of these, but it makes it simpler to divide our choices up and evaluate them that way.

InVision screnshot

Screen or page focused

In a nutshell, these let you create pages and/or import static images and then easily create hotspots to link to other pages. This can sometimes be automated so that whenever your design files are updated so are your prototype screens.

How much interaction you can add, and the level of animation is somewhat limited, but the upside is that these tools are extremely easy to get up and running with. They’re an ideal choice for a scenario where you need higher fidelity than just boxes and text; if you’re adding features to an existing app for instance. Conversely though, tools like Balsamiq are page based with the goal of keeping things lo-fi, so there are options on both ends of the spectrum. I also include Keynote and PowerPoint, which weren’t designed as prototyping tools but have plenty of functionality to work, and work quickly.

Popular page/screen focused tools are Balsamiq, InVision, Flinto, Marvel, Fluid UI, Keynote, and PowerPoint.

OmniGraffle screenshot

State or layer focused

In contrast are tools focused on changing states, or layers. You can have multiple layers on a single page, dynamic states within a single layer, variables/conditionals for elements, and fairly detailed control for time-based animations and interactions.

With all of this, you’re afforded more control than page-based tools including the ability to link between pages/views in more complex ways. But they tend to be more expensive and complex due to an extensive feature list, bringing a larger learning curve.

Some tools I lump into this category are Axure, OmniGraffle, Proto.io, Pixate, and Indigo Studio.

Code focused

The last group are basically libraries that help you when creating prototypes programmatically. This gives you essentially complete control over prototypes.

Creating prototypes this way can help communicate your ideas easily to developers, because the developers can look into the code and possibly translate it into production quality code, or at least understand the intention behind it.

The challenges with this are that it’s highly dependent upon your programming skills. It’s also often more difficult to share and present with other members of your team, since there aren’t typically built in web viewers or presentation wrappers.

Quartz Composer with Origami and Framer JS are two examples of tools that fall into this category.

So what’s the best tool?

The short answer is obviously that it depends… Each project will have different needs, and you or your team (or clients) will have different requirements too.

With that being said, I turn to screen based tools first, specifically InVision. My experience is as a designer so having synced files from Sketch or Photoshop is incredibly handy and lets me explore ideas quickly. The prototyping and animation features are limited, but it fits the use cases I’ve had, and having such a low learning curve is wonderful for a working professional.

If there’s a need for a larger prototype I’ve used Axure as well. Visual fidelity wasn’t the goal, but for pure prototyping its organization with complex projects and the ability for team members to collaborate was invaluable.

Don’t worry (too much) about the software

Ultimately, any of the tools here (and all of those that I missed) will allow you to build prototypes. The most important things are the process and your communication; no tools can overcome those. Showing your team a rough prototype early on is much more valuable than spending days getting something perfect, only to realize you’re too late in the process and the project has already moved forward. Explore the options, find something you like, and do great work.

Posted on

Codemash 2016 As a Designer – Pushing Yourself to Learn and Grow

I will admit that I had some trepidation about registering for this year’s Codemash conference. I wasn’t worried about the conference overall, which is always wonderfully organized, presented, and planned but rather the content of the presentations themselves.

I’m a designer; user-focused design is what I do daily (and occasionally nightly) for clients at Coffee and Code. Codemash, as you can guess from the name, is a developer focused conference. Last year there were a good number of talks geared towards designers and front end developers; I learned about animation, illustration, and style guides. I was even fortunate enough to give one myself on a modern design process. This year though the talk abstracts seemed to fall more squarely in the coding realm and anything related to design and UX was more of an introduction for developers.

My teammates convinced me to sign up; they made the important point that any concerns over the content wouldn’t matter when you consider the value of such a large conference that’s so close to us and so accessible. We want to support Codemash and the community, and worse case scenario… I could hang out by the waterslides drinking Kalahari Sunrises!

As I looked over the schedule and planned out my days, I took the opportunity to see some truly wonderful talks; most of which had nothing to do directly with design.

Some highlights were:

How Do We Solve for XX?

There was an excitement in the room before this talk like none of the others I went to. The (wonderfully diverse) crowd seemed very eager to get started as the lack of women in the web/technology field, with the alienation and attrition of those that are our coworkers, is a huge problem for our industry.

Kate Catlin (@Kate_catlin) was a wonderful speaker, really more of a leader for this interactive session. Her energy and boldness helped take this beyond a typical “we need more women” discussion and toward “what can all of us actually do?”

She began by discussing her background, and some shocking numbers regarding female tech workers.

The amazing moments came as we were split into groups; each trying to tackle one step of the pipeline problem, from young girls being discouraged from STEM interests to existing women feeling isolated and excluded in their careers and workplaces. We brainstormed ideas and everyone shared their experiences. Women, men, native English speakers and not, those from traditional tech backgrounds, and those who switched careers later in life.

It was eye opening to listen to all the experiences and be exposed to some of the privileges that are so easy to be unaware of. The great thing though was that it wasn’t a complaint-fest, there was a hopeful tone throughout and some great ideas to try and actually implement in our own communities.

This session was hugely beneficial to me in the form of empathy. As a designer there are few things more important than that.

A Web for Everyone

I’ve often approached accessibility in web projects the way I think many others have; follow basic best practices… and hope for the best beyond that.

Dylan Barrell (@dylanbarrell) led this discussion, sharing what he had learned leading accessibility studies and audits over the past few years.

What was brilliant about this presentation was a blindfolded walkthrough of some sites using screen readers. Far more powerful than reading a spec and following guidelines, it was eye-opening to experience how visually impaired users consume the things we build.

The other “wow” moment in this talk came from a first hand demonstration of the way a visually impaired – but not blind user used the web. She doesn’t use a screen reader, but instead relies heavily on magnification tools and context hints like color and contrast. It’s incredibly easy for us to assume accessibility == screen readers, ignoring users who have different levels of vision and possibly additional challenges, perhaps auditory, cognitive, or physical dexterity. Building in an accessible way is a complex challenge, but also incredibly important and one I hope we can make more of a priority moving forward as an industry.

Finally, a Voice for the Enterprise!

“Hey Alexa, tell me how our servers are doing.”

Voice command interfaces like Siri, Google Now, Cortana, and Amazon’s Echo are growing every day. It’s entirely conceivable that soon “interfaces” will be far less visual than I’m used to building, and voice and other tactile inputs will be how we work with them.

William Klos (@williamklos) led this session, which was as much real demo as it was discussion. He contrasted the different systems available today, and talked about the roadmap for new developments.

This presentation showed what we can do right now; customizing the Amazon Echo to run custom code, complete tasks and interact with users. There are a number of pitfalls and shortcomings, but it’s clear that leveraging technology like this is only going to be more widespread. How you work with the APIs, and how you structure your voice interactions was really illuminating – it’s interface design, but much different than what I’m used to doing.

Conclusion

The overarching theme to all of this was that I learned the benefit of thinking in a different way and becoming a more well rounded learner. I could have easily gone to a different conference and learned about Atomic Design, or new prototyping tools, or new type systems but instead I pushed myself in interesting ways and came away a better designer and human. Couple that with good times with friends, board games, and an indoor waterpark and I couldn’t have asked for a better Codemash.

Posted on

Essential gear for working on-site with clients

We usually work remotely at Coffee and Code; with good collaboration tools and frequent communication there’s no need to be tied to a particular location everyday. But, sometimes the best way to tackle a project is to meet with a client at their office to work with their team face to face.

Thinking beyond just tossing your laptop in your bag and going for it, you can make a great impression and make your life a little easier by grabbing these essentials for times you’re not at your usual workspace.

Things you might not think to bring with you, like adapters, cash, mints and swag.

  1. Sturdy bag

    Obviously you need something big enough to fit everything in, but make sure to get something that’s comfortable to walk around with too. You might be shuttling around a big campus or making some unexpected walks out for lunch, etc. A bag with some extra storage compartments helps you look more professional than dumping out everything you’re carrying just to find something at the bottom.

  2. Notebooks/sketchbooks/sticky notes

    From Moleskine to Field Notes, as an industry we love our fancy writing implements. Depending on what your field is, you might want to bring graph paper, pages with mobile device templates printed on them, or kits that make paper prototyping easier. Remember not to assume you’ll have access to your preferred tools when you’re working somewhere new.

  3. Pens & Pencils

    It seems silly but your meeting space or temporary office might not have even basic equipment like this, or you might have to waste a teammember’s time trying to round up supplies.

    If you just leave these in your bag all the time, make sure to check them every once in awhile. Nothing’s worse than a dried up pen or pencil with broken lead when you really need it. You get bonus points if you grab a few extras to share.

  4. Adapters for everything

    A recurring theme is that you never know what the setup is going to be at a new space; bring adapters for every kind of display you can think of…even VGA. You might be pairing with someone, or presenting in a small conference room.

    If you need an adapter for wired ethernet you should snag one of those too; client wifi can be spotty or there might be weird security restrictions you didn’t know about in advance.

  5. Power adapter with giant cord

    Bringing your power adapter is obvious, but if you have the option to bring a longer cord (like Mac laptops) make sure to toss it in. They’re awkward to haul around, but you never know when you need a longer connection, or you have to fit into a crowded power strip.

  6. Public wifi VPN app

    When you’re connecting to a bunch of different wifi networks, having a VPN to route your traffic through is a big step for security. We recommend Cloak on OS X. It kicks in automatically on open wifi networks and works seamlessly to protect you.

  7. Password manager

    We think everyone should be using a password manager like 1Password, but that’s a discussion for another day. The real advantage for working on-site is being able to save specific credentials to a vault, or tagged in some way. This way you can easily access everything related to one client, and if at some point they’re no longer relevant you can remove them cleanly.

  8. Headphones

    Even if you’re going to be spending the day collaborating, headphones are great for video conferences with your team or remote members without disturbing everyone else in the office. They’re also incredibly useful for tuning out ambient noise in an open office environment.

  9. Phone with tethering

    You’re obviously going to bring your phone, but consider making sure you have tethering on your phone/plan. If wifi gets flaky or you’re in an unfamiliar place having a connection you can use can be a lifesaver. You can also score bonus points by saving the day and sharing your connection with your colleagues if things go south.

  10. Mints or tiny mouthwash

    Especially if you’re a coffee person, a little freshening up before meetings can’t hurt. Throwing a travel sized mouthwash can save you from potential embarassment.

  11. Spare cash

    Some spare cash comes in handy at unexpected times. Traveling to a clients’ office takes you on routes you’re not used to; you might have to take a toll road or you might hit up a cash-only lunch spot.

  12. Your swag

    Business cards, stickers: whatever you’ve got don’t forget to bring some along. This goes double if you’re a freelancer or part of a smaller firm; you always need to keep marketing and stay prepared to jump on opportunities that might come up.

  13. Headache relief

    Let’s be honest, most of our jobs are not physically demanding…at all. But, there are still stresses and mental demands. Few things will ruin your day quicker than a headache when you have to stare at screens all day. Remember that any medications you carry will have expiration dates, so you’ll want to check them occasionally.

  14. USB drive

    Services like Dropbox work great, until they don’t. Connection weirdness, bandwidth issues, and syncing problems – sometimes a simple thumb drive can save you a ton of time and frustration.

  15. Input device

    It’s easy to get very accustomed to your usual home or office setup. Little things like not having your mouse or trackpad introduce distractions you don’t want to mess with. One extra caveat here is to check the batteries if they’re not rechargeable – buy a spare set and toss them in your bag too.

Posted on

The Cleveland Plain Dealer visits our office space.

We were happy to chat with John Harper from the Cleveland Plain dealer and show him around our office. He wrote a great article about OSC TechLab where our office is (we’re the green and white office with client logos on the wall).

It’s nice to see some of our friends get mentioned too; we really believe that an environment filled with other people doing interesting work helps inspire us and keep us motivated.