Forem: Kelly Harrop

UX Engineering for Design Systems

Kelly Harrop — Wed, 10 Feb 2021 17:26:35 +0000

Because UX Engineering is a relatively new role and the responsibilities can widely shift depending on the company, it can be challenging to explain to folks what we actually do for a living.

What's a UX Engineer?

Generally speaking, a UXE (User Experience Engineer) is someone who uses design thinking and user behavioral data to implement solutions with code.

A UXE's skills can be considered a subset of frontend development in that they are focused more on the front of frontend and focus on translating design into code as close as possible.

While this role seems like a perfect fit for design systems, UXE's can flourish in any team that requires close collaboration between design and development.

Facilitating design alignment

Our design team includes representation from each of our business units, to make sure each product has voice within the system.

One of my main responsibilities is to ensure our customers have consistent experiences. This means that we need a shared, common understanding of how a component should look and function in any platform and product.

To help designers on our team understand which experiences are disparate amongst our products, we needed to establish (and commit to) explicit attributes within our design specs:

Anatomy : How we reference each element
States : What happens during a user interaction
Variants : Alternative forms of the component
Configurations : Supported options that end-users can choose from
Standard/Defaults : What comes out of the box

Creating a template in Figma with corresponding visuals for each business unit has been a great way to get buy-in for alignment.

As a UXE, it is also my responsibility to help designers understand how previous implementation may not have matched the original spec, and to create a plan to get us to our desired outcome.

Establishing constraints

When designing a component, it can be easy (and fun) to hand-pick certain values. It's also easy to accidentally pick a wrong value from the system when building out a new component.

This is how we end up with scenarios where placeholder typography in a textarea could differ than what was established previously for a standard input, when really design had intended them to share the same attributes.

UXE's typically work with designers to explain the impact of design decisions (or confirm this wasn't a mistake in the spec) so that situations like this don't happen.

It also means we sometimes need to act as negotiators in order to strengthen durable logic within our system.

Architecting scalable blueprints

Because we are responsible for making sure a component accurately reflects design specifications, it's crucial that a component supports the same logic, plus future considerations.

Anticipating how a designer would want to modify a component is critical.

Strong architecture ensures less code repetition, helps with open-source contribution, and provides a foundation that helps guide scalability discussions.

Blueprint decisions include:

Defining the relationship between components
Defining the relationship between parent and child components
Determining if a variant is a separate component or defined through a prop
Establishing what configurable aspects get exposed to an end user
Creating and implementing design tokens

UXE's should constantly be asking:

How would someone want to implement this component?

The more time and care that can be invested at this stage, the less likely the team will need to implement a breaking change in the future.

Optimizing performance

While this article has emphasized making sure the component looks and behaves as expected, we also need to look at the bigger picture with how our decisions impact the rest of the design system ecosystem.

An optimized component includes evaluating:

Bundle size
Tree shaking
CSS over SVG
Asynchronous loading
Strong types

You can have the most customizable component on the planet, but if it takes ages to load, no one will use it.

Promoting and enforcing accessibility

By the time a component is ready to be coded, the design should adhere to minimum accessibility requirements including:

Typography
Line length
Contrast ratios
Minimum tappable area

Beyond this, a UXE needs to consider other interactions that may not have been uncovered during the design-focused part of the team's workflow.

Typically, my accessibility checklist includes:

High contrast mode
Reduced motion styling
Alt text/aria props
Keyboard navigation
Dark mode support

Incorporating these aspects into the component is only one part of how we help ensure accessible experiences. We also need to help end-users (product developers) understand what they need to consider during implementation.

I find it helpful to bake in as much accessibility logic possible to mitigate risk that user will forget to incorporate it. For example, if a user doesn't supply a value for a label, you can make it a requirement that a user must provide an aria-label value instead.

This not only helps ensure the experience is accessible, but also educates users on best practices.

Writing tests

Writing tests ensures that the logic behind the component is reflected accurately in visual snapshots.

Typically, you want to test against:

Whether elements did or didn't render
If certain classes were applied
The render matches values from the design specs

At Intuit, we open-sourced proof, a test runner for Storybook!

Providing demos & documentation

After all the alignment conversations, architectural back-and-forths, and code iterations... we finally have something to show for it! 🎉

Providing a curated set of configurable examples and implementation documentation is the most visible part of a UXE's contribution to the project.

Iterative reviews

I believe in sharing early, and sharing often.

While working on a component, each pushed commit generates a new Storybook link that anyone can review and comment on within GitHub. The benefit of this is that feedback doesn't get lost in Slack, and we can keep track of change requests.

To standardize how teams provide component demos, we include Storybook as part of our Design Systems CLI.

Advocating for the community

As part of the design systems team, the UXE is also responsible for being an advocate for both product designers and developers.

This includes:

Helping users onboard to the system
Answering questions
Making sure their voice is heard during sprint planning
Addressing feedback
Guiding users to the right team members

It's easy to get overwhelmed by this run-the-business type of work. Conducting office hours using Calendly is a great way to make sure you can stay connected to the community and guard your time (and sanity).

What success looks like

Because we have to switch gears so often and interact with so many people, it can be challenging for folks to get a full sense of the work involved.

A successful UXE is someone who:

Goes with the flow and doesn't mind throwing away code to make something better
Feels comfortable explaining technical constraints and requirements to non-technical audiences
Tends to push back on one-off, unscalable designs
Puts ego aside to listen to the community AND willing to collaborate on solutions
Has intuition on how to add extra polish to an experience

I've found what's worked best is to include all disciplines in a JIRA board so that everyone is aware of what tasks need to be completed until we're ready to ship.

Wrapping up

Even though UX Engineering is still in its infancy, the need for this type of role has been around for ages.

I'm excited to see more of these opportunities pop up, and super happy I was able to make the role what it is for our team.

For additional reading, I definitely recommend checking out Emma Bostian's article on UX Engineering.

Hopefully you're now interested in hiring a UXE for your team, or you'll start applying as one!

Originally published at kellyharrop.com on February 10, 2021.

Flush!

Kelly Harrop — Sun, 26 Jan 2020 22:12:09 +0000

A proposal for a public restrooms ratings system

Photo by Olivier Collet on Unsplash

You’re out and about with friends, keeping responsibly hydrated, when suddenly… nature calls. Not to worry, you’ll just pop into the nearest restroom and relieve yourself. Your friends say you’re better off waiting til you get to your next destination.

“Trust us. ”

Oh come on, how bad could it be? Who knows how long it could take, plus you could use the opportunity to freshen up.

“This place is like 2 stars. The next is 4 stars!”

Okay but what does that really mean? Surely it can’t be that bad —

It’s a hole in the ground. No toilet. No toilet paper. No way. If this is two stars, then you don’t even want to think about what one star is.

Not to worry, just don’t think about waterfalls or leaking faucets for the next twenty minutes. You try to distract yourself with conversation in the car, but all you can think about is a four-star restroom. Four stars. Four stars. Four. Stars.

Finally, three egregiously large potholes later, you arrive and immediately power walk straight to the restrooms. Relief at last, you think.

Upon opening the door, however, you’re greeted by instant disappointment. A lone flickering ceiling light illuminates the fact that this restroom hadn’t been cleaned in quite some time. And that’s putting it nicely. What’s also noticeable is the lack of any mirrors. Strange. No time to think too much about it though, you’re on a mission.

Stall #1: No toilet paper. Pass.
Stall #2: Doesn’t lock. Pass.
Stall #3: OUT OF ORDER.

You frantically grab some toilet paper from Stall #2 and resolve to use Stall #1. On the bright side, this restroom actually had a working toilet. Who cares if you had to hold your breath the whole time and hang your bag around your neck because there isn’t a hook on the stall?

Finishing up, you go to wash up and find all the soap dispensers are out of soap. As you stare into the mirror-less wall, you start questioning what in life led you to this moment.

With hands still wet, you look around for paper towels only to observe that there are none, only a single hand dryer.

It’s broken.

You wipe your hands on your clothes, when you remember the travel-sized bottle of hand sanitizer in your bag. With a cry of relief, you generously apply a copious amount before returning to people you thought were your friends.

Four stars.

Photo by Anna Earl on Unsplash

How to systemize the criteria

When advising others on where to “go,” it’s tempting to use the same type of ratings system one would use when referring restaurants. However, the nuances of a public restroom require are more thoughtful approach. By having a set of standardized criteria, we can help inform others so that they have more accurate expectations.

And because I’m obsessed with acronyms…

F inishes
L ayout
U sing the restroom
S tall
H ygiene options

Because some criteria is obviously more impactful than others, we would use a curve to aggregate the ratings into a meaningful, holistic star rating.

—

Finishes

Quality materials: Same or better quality of materials used in the rest of the building space.
Sufficient lighting: Updated, reliable lighting means guests feel safe.
Ambient music: Background music creates a more relaxing atmosphere and also drowns out potential unwanted noises.
Cleanliness: If an establishment neglects the cleanliness of their restrooms offered to guests, what else are they neglecting?

Layout

Intuitive flow: A layout that accommodates incoming, staying, and exiting guests.
Availability: It should be easy to tell when a stall becomes available, and not just whether the door is closed or not. Whether that’s an easy to glance layout or investing in a monitor that can help with foot traffic.
Counter space: Counters aren’t just for sinks. Guests sometimes need an area to freshen up.
Family friendly: Baby-changing stations in all public restrooms ensures support for all families, no matter what gender the parent is.

Using the restroom

Toilet: At the bare minimum — honestly just work (and exist). Be aware of evil forces trying to make them less comfortable.
Toilet paper: There should be enough to spare. Plus, it should be easy to see if it’s running low and if there is extra.
Automatic flushing: The less guests have to touch, the better. However, it should also be obvious how one would manually flush as well.
Bidet/extras: While this isn’t standard or popular in the States, it’s still a nice option for those who are used to it.

Stall

Reliable locking mechanism: The best type of lock stands the test of time and is intuitive with which way to operate it.
Storage: In addition to ample legroom, guests should be able to store bags and other items. A hook on the door should be located near the middle of the door to prevent theft.
Maximum privacy: The door height and width should prevent bystanders from peeking in-between gaps.

Hygiene options

Sink to stall ratio : After “doing their business” guests just want quick and easy access to soap and water stat!
Automated soap/water: Again, the less guests have to touch, the better. Provide regular soap dispensers too, in case the automated dispenser runs out or breaks.
Drying options: Don’t make guests drip water everywhere because the sink is too far from paper towels/hand dryers. Also, always have paper towels available since hand dryers can break and also sometimes there are spills!

The ideal experience

When it comes to amazing public restroom experiences, most people are quick to reference Buc-ee’s. I mean just look:

But I see potential for a more inclusive model: Separate, self-contained gender neutral bathrooms vs the shared space and stall approach.

Photo by Filios Sazeides on Unsplash

Okay, maybe not quite as nice and spacious — but basically it boils down to each bathroom containing its own toilet and sink.

Some establishments have already been embracing this model, since they have the following advantages:

When a bathroom becomes available, anyone can use it regardless of gender.
These rooms tend to be larger than a standard stall.
Guests feel safer, not having to worry about using a shared space.
Separate bathrooms makes it easier for maintenance to tend to issues without disrupting others.
Because the space is usually fairly compact, there tends to be less mess since the distance between the sink, soap, and where you would dry your hands is in close proximity.
Accessibility rooms have more features for those that need them

Closing thoughts

While most people tend to avoid public restrooms at all cost, sometimes it just ends up being unavoidable. And while there are friends and apps that can recommend which ones to use, it’s still highly subjective and mostly focused on a few aspects.

Helpful public restroom apps:

https://www.thelisttv.com/the-list/bathroom-in-a-bind-4-apps-to-help-you-find-clean-public-restrooms/

Did I miss anything that you judge a public restroom by? Feel free to add it in the comments!

Disrupting with delight

Kelly Harrop — Tue, 22 Oct 2019 13:55:49 +0000

Learnings from my first year at Intuit

“Intuit thrives by constantly disrupting itself.”

It’s been a whole year since I first heard that phrase. Since my first day of orientation, I’ve learned a ton and wanted to share out my journey.

Embracing fear

I’ve observed a common three-word response when anyone wanted to improve how we do things: “What’s stopping you?”

And that made me really pause and think. The only real thing that was stopping me, was me — and my fear of failure. Fear that my suggestion wouldn’t work. Fear of being told I was wrong. Fear of confirming my imposter syndrome.

To overcome that, I had to define what disruption really meant and how I could change the way that I thought about… well, change.

Small steps, big wins

For me, disruption means being constructively dissatisfied enough to not only challenge existing practices, but to also instigate and lead change.

Change can sound scary, but it doesn’t always mean large, sweeping process adjustments.

Try to think in small, iterative approaches — treat your company like a product.

If you can get small, quick wins, you’ll find they eventually ripple into larger more impactful results.

Eventually, big proposals don’t seem as daunting because you’ve established a track record of consistent improvements.

😴 Tired: My team just doesn’t have the time to keep our documentation updated, sorry.

🤩 Wired: How can I automate or open-source documentation to free up my team to do the work they want to do while still supporting our community?

The art of saying “no (thanks)”

You can’t change everything, and that means saying no to some projects (I’m still working on this one!). Focus on the improvements that you can control , and take pride in your work.

Don’t try to do this.

Lessons learned:

Make a list of every project you’re working on with your role and level of commitment (are you only needed at the beginning? full-time resource?)
Document every product-changing decision your team lands on — leverage internal release notes if you can
Don’t go to every meeting you’re invited to if you only need to be informed — rely on meeting notes
Have an exit strategy when you’re on too many projects

Saying no doesn’t mean you don’t care. Again, it goes back to how can you make the biggest impact. Your time is valuable and how you invest it says a lot about your priorities.

Before: I have to say yes, because I’ll look lazy

After: I have to say no, otherwise my current project will suffer

By confronting my previous fear of looking lazy, I felt more empowered to turn down projects that would have a negative impact on the work I had already committed to.

Pro-tip: This also helps with scope creep and sprint negotiation!

Know your audience

When crafting a presentation or proposal, it’s easy to fall into the trap of talking to your audience like you would your own team or yourself. There’s a certain sense of security when expressing your thoughts using terms you use on a daily basis.

However, you gain more impact when you share your message with people outside of your team.

“If you want to go fast, go alone. If you want to go far, go together.”

Their perspective and connections are invaluable for furthering the progress of your initiative. That being said, it’s a good idea to do some homework first.

Ask yourself why they should care by addressing:

What problems are they trying to solve?
How can they help or be involved?
What’s the biggest benefit for them?

By framing the solution around your audience, you’re bringing them with you on the journey instead of having a one-sided conversation. Empathy goes a long way when telling a story, so make the audience your focus rather than yourself.

Before: “I think we should use this tool because it’s the easiest to use.”

After: “Based on feedback from our designers and developers, we should use this tool because they said it would be twice as fast to implement.”

Bonus points for metrics!

Using the voice of your internal and external customers to sell an idea is more impactful because now it’s less of a hypothesis, and more of a reinforcement. By removing yourself out of the equation, it also helps remove bias and emphasizes your commitment to being a leader who serves their community.

Find what sparks joy

When you’re passionate about the work your company’s doing, it’s easy to get caught up in everything. However, there are only so many initiatives you can invest your time in before you’re spread too thin.

So how do you decide what to spend your energy on?

This is a great opportunity to ask for SBI-framed feedback from your peers by asking them what you are doing well and how you could improve.

Hopefully you’ll start to see a trend and can use this as a discussion point in your 1:1’s with your manager. By being explicit and communicating the kind of work you enjoy and excel at, it makes it easier to find opportunities that align with your career growth.

Make sure that you are choosing projects that not only bring you joy, but ones that also have the most potential for disruption.

Pro-tip: save positive feedback for times when you need a pick-me-up (and for your year-end review!). I actually print out Slack messages and leave them on my desk when I’m feeling overwhelmed.

Remember to provide feedback as well! Try to be as specific as possible to avoid making generalizations. For example…

S: During her Overwatch presentation *,

B: Kelly did a great job articulating how her game sense relates to how she works,

I: which makes me feel like she could effectively manage a team of six.

*This is only an example. No one has asked me to give a talk about Overwatch (yet)!

Going forward

Pairing delight along with disruption ensures that we’re constantly self-improving. By training yourself to view both as necessities for innovation and success, you can give yourself permission to be bold.

Look for opportunities to:

Confront your fears
Say no
Celebrate small wins
Form meaningful partnerships
Define what’s important to you

Here’s to celebrating more years of powering prosperity around the world! 🥂

What’s in an email?

Kelly Harrop — Mon, 22 Jul 2019 18:16:01 +0000

Crafting an Email Design System

When creating an email campaign, using a component-based system is crucial for delivering a quality experience to your audience as quickly and efficiently as possible.

Photo by Web Hosting on Unsplash

Unfortunately, designing and developing for email can be challenging due to the limitations of email clients and inconsistencies across browsers and platforms. Most of the wonderful flexibilities of the modern-day web are unavailable when coding for email due to what is supported.

That being said, let’s explore how we can create a system that’s both easy to configure and implement!

Photo by NordWood Themes on Unsplash

Branding Baseline

It’s important to establish what is critical to your brand’s baseline. At minimum, this is typically assigning a color palette and potentially custom fonts.

Remember that all the quirks that come with your brand don’t need to be reflected in your email campaign!

Here’s a quick example of how you could structure color and typography as variables in a scss file used in your template:

/***** COLORS ******/

/* raw values -- do NOT reference */
$blue01: #0000ff;

/* role -- reference these */
$primary: $blue01;

/***** TYPOGRAPHY ******/

@function calculateRem($size) {
 $remSize: $size / 16px;
 @return #{$remSize}rem;
}

@mixin fontSize($size) {
 font-size: $size; //Fallback in px
 font-size: calculateRem($size);
}

H1 {
color: $primary;
@include fontSize(32px);
}

I like this approach because you can easily update the value of your $primary variable if you need to. If you’re wondering why I don’t just assign a HEX value to $primary, I can technically do that — but then it’s easy to forget what I’m really referencing since that raw value isn’t very descriptive.

Typography

I start with typography because when you have a strong hierarchy of information, the content of your email will shine regardless of what colors you choose.

Photo by J-S Romeo on Unsplash

But what happens if you want to use your custom brand font? Custom fonts can be a little tricky depending on their source because they can render incorrectly for certain combinations of platform and email client. I would highly recommend finding a similar Google Font if possible as they are more reliable and already hosted. Will anyone even notice?

When deciding what you want to include in your template, start off with the basics:

Headers (H1, H2, H3…)
Body text (p)
Links (a)
Buttons (a)

Colors

Let’s say your brand already has a base color palette referenced in your product/website. Awesome! Because emails contain static images and text, you don’t need to import all of them. Try to keep it simple with one or two main brand colors for the interactive parts of your email (links and buttons).

Photo by Kaleidico on Unsplash

Setting up the structure

Now that you have branding covered, the next step is establishing what actually goes in your template.

Components

Components are important because they determine what parts of your system are reusable and referenced. Like a regular design system, you’ll need to determine what parts should stay as small as possible.

Let’s look at some common email components and options to consider:

Headers: Text alignment, margin, typography, color
Body text: Text alignment, margin, typography, color
Buttons: Alignment, sizes, typography, color
Dividers: Full width, small width, color
Images: Sizes

Using these components, you can create pre-configured compound components (the molecules of atomic design) so you don’t have to manually include the same set of components every time you need a group of them.

Sample molecules:

Molecule: Header + body text
Molecule: Image + body text

And last but not least, I like to have my organisms create the “sections” of my email:

Section: Intro (image + header + text + optional button)
Section: Three column grid (images and text in three columns for desktop)
Section: Avatar bio (small image + header + body text)

More about sections

Sections deserves its own callout because it’s such an integral part of your email template. These sections define what is available for use when thinking about the content you’re creating. Any time you deviate from a section, you’re creating “snowflake” code and designs, which defeats the purpose of having a system.

In order to be a successful email template, define what kind of content you are sharing with your audience. Is it promotional? A newsletter? An update to your privacy policy? Whatever it is, you should be clear about what kind of content sections need to be supported.

Once you have your sections, the next crucial part is socialization. If you are working with a team who will be creating emails using your template, they need to know what these sections are called. For example, you may get questions like:

How do I create cards?
How do I position an image to the left of text?
How do I insert a footer?

Or worse, they’ll just create their one-off section type and not use what was already created! Having a consistent naming convention and making sure that it’s obvious what to use both in design (as symbols) and in code (as commented code blocks) will help your team work faster by using the same terms.

Layout for tables

Yes, it’s 2019 (as of this article) and we’re still having to rely on tables for our email. That’s okay though, because that just means we have to be deliberate about our table cell structure.

When designing your content, you’ll need to think in terms of left or right alignment and how your tables interact with each other. By nesting tables within tables, you can set rules for how content flows together.

Personally, I prefer starting out with a desktop layout before mobile. The reason being, your sections will typically just go full width and be stacked in mobile, which is fairly straight forward. Desktop is where some of the planning and table layouts become a challenge. It’s easier to convert a multi-nested table to a series of stacked tables than the other way around.

Here’s a simplified example of how I implemented a section block (“Intro paragraph”) using Salesforce’s Pardot email system:

As you can see, you can create these modular section blocks using a bunch of nested tables and then use a GUI platform to configure and assemble your specific email.

The biggest thing to note is that you must use nested tables in order to properly align your content.

Also note that I’m not putting in a bunch of HTML attributes because I can handle that part later (more in the Workflow section!).

Responsive

Once you’re finished with your desktop layout template, converting that to a responsive view is simply a matter of stacking the content in each section vertically instead of side by side.

To do this, I just add a class to sections that I want to stack as “mobile-100” and then include a media-query that overrides my styles to make any HTML tag with that class go full-width and stack on top of each other.

It’s a quick way for me to understand that this class is mobile-specific and the 100 lets me know that the content will go 100% width of the parent. Easy!

Automate your workflow

Congratulations, you’re almost done! At this point, you should have designs and coded system in place that covers:

Branding: Typography & Colors
Structure: Components, Layout (desktop + mobile)

Photo by Glenn Carstens-Peters on Unsplash

Back in the day, you’d have to make sure all these elements worked in different browsers and platforms by manually inserting inline-styles and HTML attributes.

Ouch.

Well, I’m happy to say that this is no longer the case since you can leverage Javascript to automate these tasks for you!

Gulp

Gulp is just a fancy tool that runs tasks for you so you don’t have to manually type everything. Nifty, right? You write your tasks in a Javascript file and then run a single command in terminal. The benefit of this is both having having easy-to-read and manageable HTML files as well as not worrying about missing an attribute.

Get started with Gulp : https://gulpjs.com/docs/en/getting-started/quick-start

Once you have gulp set up, create a gulpfile.js file in your root directory.

In my Gulpfile.js, I have multiple functions:

A function that watches my scss file and exports that as a css file
A function that looks at my new css file and injects that as inline styles to my HTML template file
A function that looks at any <table> in my HTML file and inserts cellspacing, cellpadding and border-collapse attributes

Then at the bottom, I make sure that my tasks are watching the files that they should be referencing and run a command in terminal (“gulp”) when I need to do any work on this template.

Running these tasks also generates a new HTML file (“pardot-email.html”) in a different folder (“build”), so I easily know the difference between my working file and the file that gets built at the end. When I’m ready to test out what this email looks like locally, I can open the newly built HTML file in my browser to double check that everything looks okay.

Now it’s just a matter of picking a section that serves your content best and modifying the text in either code or in whatever GUI you are using (Pardot, Mailchimp, etc).

Photo by Austin Distel on Unsplash

Gotchas

“!important” is actually… important. Even though in the modern web world it’s frowned upon, they are a necessary evil in email templates due to how email clients want to override everything
MS Outlook renders emails as Word documents, which means sometimes your longer emails will come with an unfortunate vertical gap. You can read more about it here. I’ve solved this in the past by having an additional <tr> wrap the content.
Litmus tests can lie occasionally with font rendering. Try to test it in the actual email client/platform if available when you suspect something should be working.
Browsers and email clients are very finicky with margin and padding, in that some don’t support margin at all. If you need the extra spacing, padding is pretty consistent for ’s (make sure you have content in there!) like:

<td class="spacer-20">&nbsp;</td>

// spacer-20 has padding:20px assigned
// " " renders as a space

Thank you!

Any follow up questions? Feel free to ping me on Twitter @kellycodeschaos!

Additional helpful articles

Three Unconventional Ways to Measure Value

Kelly Harrop — Mon, 25 Feb 2019 14:46:00 +0000

When it comes to designing products, it’s not always about dollars and cents.

Photo by Steve Johnson on Unsplash

Managing money is hard. Approving budgets is hard. Making sure every financial decision is the right one can be the difference between someone keeping their job or hiring someone new.

That’s why justifying the cost for certain initiatives can sometimes be a struggle since the inherent value doesn’t always equate to an easy-to-measure outcome. Yet, by focusing solely on what direct revenue a company stands to gain, these missed opportunities can spell out disaster down the road by ignoring their hidden values.

1 | Failure as a value

Failing fast has now become a fairly popular mentality, ensuring that we don’t invest too much time on the wrong features or concepts. Companies typically embrace A/B testing, rapid prototyping, and other methods to quickly assess preliminary value to users.

Being wrong fast is always better than being wrong slow. — James Helms

Photo by Estée Janssens on Unsplash

However, it’s not enough to focus on ensuring the right projects are being worked on. Following up and understanding how your users are actually using your product is just as important if not more so.

It’s a dangerous assumption to take the results of a few preliminary tests and project them as success metrics.

So how does a team justify the cost of investing in users if revenue is generated by clients or other stakeholders? Frame the problem (and solution) with failure.

If a team is focusing on the wrong priorities and concepts, they’ll risk wasting time and money on a feature/product that users don’t want. Invest time and resources into getting feedback by using tools such as Invision and UserTesting.
Learn from real users and identify how your product features could be failing their intended use — if users see improvement in a feature, that could translate to a higher NPS (net promoter score) as well as adoptability.
Speaking of NPS, actions speak louder than words and survey numbers. Invest in making real connections with your users to get more meaningful and realistic feedback, whether that be through social media or some type of community platform. Having trouble monitoring social media? Try a free monitoring tool such as HootSuite.
The longer a company fails to address user needs, the more it loses credibility, the less users will be willing to provide feedback and the more likely they will try a different product.

Use your users to your advantage to prioritize projects and align efforts based on their needs instead of purely direct revenue. Happy users tend to have better predicted behavior as well, which can help in calculating projections.

2 | Inspiration as a value

Happy employees make happy customers. When your team is constantly working tedious, insignificant tasks, they can become unmotivated to think outside the box. Designing in a bubble can also lead to an echo chamber of mediocrity and contribute to a lack of innovation.

Photo by Muhammad Haikal Sjukri on Unsplash

That being said, of course every job has its share of repetitive tasks and work that frankly, just needs to get done.

But how do we minimize those mundane aspects to maximize actual productivity and ensure that your employees are inspired and producing the best work of their lives?

Invest in making sure your employees feel a sense of accomplishment and purpose in their work. Meaningful work can be the difference between “I like my job” and “I love what I do!” But what does meaningful work look like?

It isn’t repetitive, and therefore can’t be automated
It’s unique or specialized and has leadership support
Has influence and acknowledgment outside of the direct working team

Photo by rawpixel on Unsplash

Stakeholders and investors can be anxious when approving budgets that are tied to intangible benefits such as innovation and morale. Sometimes the expenses can seem completely unrelated to the work the team is doing. In these situations, it’s more important to look at the big picture than the specifics of where each dollar is going.

How will spending money on making sure employees feel inspired benefit the business?

Teams inspired by other industries and outside influences have a competitive advantage. Instead of just thinking about how users are experiencing your product, it’s important to see what other products they are using to paint a complete picture. Considering taking your team on a field trip to a local business to introduce them to the problems they’re trying to solve.
Reduce redundant tasks. Is your team obsessed with pixel perfect comps before they’re headed for development? If your team is utilizing a design system, that extra effort could just be overkill. By naming layers the same as the components/classes that would be used in development, that could save significant time during the handoff phase. Avocode and Zeplin are huge time-savers that allow for developers to inspect specs for designs.
Design thinking isn’t just for designers. A business that understands their customer’s journey lines leads to empowered teams that produce innovative solutions. Not familiar with design thinking? Provide training for with an online course such as one of these on IDEO.
Inspired teams are passionate and proud about the work they do. Investing in their morale demonstrates acknowledgment of their effort and provides and opportunity to connect with your team. Engineering morale isn’t just about throwing sponsored happy hours or installing a pool table in the break room. True investment is listening in order to understand and support not only professional goals, but personal ones as well. As a leader, leave time on your calendar to connect with your team and make your own goals fully transparent.

How can I help you? This simple question creates opportunities, matures collaboration and acts as a catalyst of understanding. — J.B. Chaykowsky

3 | Personalization as a value

With the rise of design systems and popularity of frameworks such as Bootstrap, it’s common to rely on a one-size-fits-all type of approach. From an investment standpoint, it makes perfect sense to use an established solution that scales well.

Of course we all want to customize these generic templates and when we hear “customization,” it’s easy to jump to common overrides such as fonts, colors and icons.

Photo by Joey Huang on Unsplash

Some of these types of changes can also contribute to technical debt and problems later down the line when it comes to technical upgrades and scalability, so try not to be overzealous. Do you really need that custom icon set?

To provide a true personalized, tailored experience to users, it isn’t necessary to override every element that comes with a template or framework. In fact, doing so could compromise the integrity and scalability of your codebase.

Don’t forget that content is king for a reason. It’s also a great opportunity to add personalization to your product. Investing resources into personalized content is the easiest way to customize an experience without having to involve significant development effort.

Provide more information and usability. Instead of “a new user has been added”, consider “You added Jane S. to your favorites. Send her a message!” You’re being specific who was added and a link to the profile as well as a quick call to action tied to this person.
Make it relatable. Instead of using text to describe a feature, use creative storytelling and testimonials to establish trustworthiness. Tell your product’s story!
Don’t make your users guess. Instead of a simply thanking someone for their business, provide as much information up front (order details, timeframe, etc). Don’t wait to tell them in an email! And above all else, make sure they feel confident about their actions/decisions.
It’s tempting to default to another screen whenever you want to display new information. However, that can cause a disconnect to a user who isn’t as familiar with the information architecture. Instead, try other methods for content introduction such as drawers, modals and popups.
Use what you know about your user to personalize their experience. Small things like prioritizing items that they regularly interact with on a dashboard makes a generic experience more catered to their own activity.

When considering the tone of your content, your product’s personality should shine through — it’s easy to fall into the trap of sounding too technical. Don’t miss out on the potential for delight that would make your product easier to use. By investing in crafting tailored content and experiences, your product has that extra layer of polish.

TLDR

Value can sometimes be hard to define when it comes to choosing what to invest in as a company. When it comes to priorities and approaches to running a business, don’t ignore:

The needs of your users
The needs of your team
The needs of your product

Photo by Hanny Naibaho on Unsplash