2019 was a phenomenal year for us at VIA Studio. We are rolling into 2020 with excitement about what we have accomplished as a team and a company, and optimism for what’s on our plate for this year. Let’s take a look back at some of our highlights from 2019.

Marketing

2019 VIA Studio Highlight Reel

Like the NCAA tournament returning to CBS and our homes, we returned with another food beverage knockout tournament of our own! After crowning breakfast burritos as the champions of breakfast food last year, we wanted to settle once and for all which beverage was our social media audience’s champagnion!

 breakfast food tournament, VIA Studio wanted to celebrate March Madness’s return this year with an updated take on the tournament. After internal discussions surrounding a new tournament theme, we ultimately decided on doing a beverage theme for 2021. Sixty-four beverages were selected to represent four different regions; Soda, Beer, Cocktails, and Wild Card.

Internal polling was conducted to determine the seeding of the beverages and new branding was created for this year’s edition of the tournament.

With a theme selected and assets developed it was time to promote the event. For our existing social media audience, teaser story posts were published on our 

 profiles soliciting guesses about this year’s theme.

Finally, a week before the tournament sipped off, this year’s theme was announced on social. Immediately afterward, an announcement email was deployed to our eNewsletter audience, directing users to follow us on social to participate and to read the case study for the 2020 Parched Madness tournament.

For the actual execution of Parched Madness, we generally followed the same format we had created with Starch Madness. When the tournament kicked off, Facebook and Instagram stories with polls were published to allow the VIA Studio social audience to vote on the winner for each matchup. The winner of each round moved on to the next round, while the losers were poured out.

One wrinkle in the campaign that was not experienced last year was the event of a tie. In the round of 32, two matchups resulted in a tie; Dr. Pepper v. Ale 8 and Saison v. Belgian Tripel. The design team quickly whipped up tiebreaker graphics, an announcement was made via Facebook and Instagram stories, and a tiebreak round was conducted, with Dr. Pepper and Belgian Tripel emerging from the tiebreak victorious.

Ultimately after four rounds of voting and the elimination of 60 beverages, just four remained; Coke, Pale Ale, Margarita, and Water.

After Coke spilled the Pale Ale and Margarita chugged Water, we were left with our finals matchup. Coke versus Margarita. With the ultimate Champagnion, Margarita, being announced the morning of the Men’s NCAA Tournament Championship.

Over the course of Parched Madness, 5,056 story poll votes were recorded, 423 of which went to the ultimate Champagnion Margarita. Impressions for VIA Studio Facebook and Instagram profiles increased +9% compared to the previous period. Meanwhile, the overall audience for the two profiles increased by +1%.

The overwhelming majority of Parched Madness engagement happened on Instagram. With Facebook story polls receiving less than 2% of the overall vote.

On Instagram, impressions for the VIA Studio profile increased +19%, engagements increased +48%, and engagement rate for the channel increased +24% for the duration of the Parched Madness campaign.

However, total votes for Parched Madness fell short of the benchmark set by Starch Madness last year. Parched Madness’s total votes were just 83% of the total set last year. However, the dropoff in engagement could be due to Starch Madness running during the beginning of the Covid-19 pandemic lockdown when many users had more time to spend on their phones.

 exercise that allows VIA Studio to offer an engaging event for our audience. In the meantime, let’s all lift our Margaritas in celebration!

Parched Madness 2021 Recap

Recently VIA Studio launched our first streaming audio campaign for the Jewish Community Center of Louisville on Spotify. The process of setting up and launching this campaign could not have been any easier. In this blog post I hope to share some of my learnings and insights to empower anyone to give advertising on Spotify a shot.

Spotify offers a low campaign minimum budget and an array of targeting options all provided within an easy-to-use dashboard. An additional benefit that made a first run/trial of the platform an easy decision was that the platform can produce the audio asset for free!

However, one of the first things to note about advertising on Spotify, or really any sort of streaming audio/video platform(s) is that this tactic should not be used on its own if your intention is conversions. Streaming audio/video typically represents an awareness play given the nature of the platforms and how the users interact with them. Users are less likely to click through on an ad while listening to music in their car or unwinding in the evening with their connected TV (CTV) device like a Roku, Apple TV or Amazon Firestick. In the case of our Spotify ad, we had other, more direct conversion tactics running in conjunction with it including Facebook and Google display ads and paid search.

However, if your ad is engaging they are likely to remember your brand and what you are offering. With that in mind, the goal of our campaign was to raise awareness not just for the Jewish Community Center of Louisville but also for the fall membership the ad was promoting.

All that is required to set up an account on Spotify Ad Studio is a Spotify account, free or premium. The Spotify account is what is used to login and manage the Spotify Ad Studio account.

Once an account is set up, you are ready to begin planning your first campaign. In your Spotify Ad Studio account dashboard simply select “Create Ad.” The first step to setting up your campaign are selecting what you are promoting. Options for this step include “Music-related” which is used to promote an artist/band’s music, concerts or merchandise on the platform or “Non-music related” which is used for a brands, products, or organizations. Followed by naming your ad/campaign.

Once setup is complete, it is time to determine your budget/schedule and who you want to reach. First select a start and end date for your campaign and input your budget. Your budget will be evenly distributed between start and end dates. A minimum budget of $250 is required to run a campaign.

Next, you will need to set your targeting. The first aspect of targeting on spotify is geographic. You must first select a country and then locations within your selected country. Locations can be as large as the entire county selected DMAs or cities or you can target down to specific ZIP codes, which can be imported in bulk.

Once your geographic targeting is in place, it is time to select your demographic targeting options. These include age (13 – 65+), gender (male, female or all) and device type (iOS operating systems, Android operating systems, desktops or all).

The last set of targeting options are interest-based. They include interests, real-time contexts, and genres:

Interests are determined by a Spotify user’s recent podcast and playlist listening, as well as streaming platform. 18 interest options are provided to mix and match and they include topics like comedy, fitness, travel and tech.

Real-time contexts target people in specific moments, as indicated by the playlist they’re currently listening to. 10 real-time contexts options as provided including cooking study and workout.

Genres selections target people based on the genre of the song they heard immediately before hearing your ad. There are 26 genres to choose from.

You can also decide not to use any targeting options by selecting, “No additional targeting.” This will maximize your ad’s reach but could result in wasted impressions on users who aren’t interested in your product or service.

Don’t worry about being unsure of how your budget and targeting selections will impact your campaign’s reach. A status indicator exists on the right hand side of the screen that updates with each selection you make. This indicator provides estimates for cost per ad served, budget delivery likelihood (how suited your budget is to your audience), estimated ads served and your estimated reach. The budget & targeting options can be changed/updated to maximize your ads effectiveness for any of the metrics indicated on the screen.

One of the most appealing aspects of Spotify Ad Studio is that Spotify can create an audio file for your ad for free. In the Creative step of campaign set up, users have an option to upload their own creative or request voiceover. While uploading your own audio file provides greater creative control, many users either don’t have the capability to produce an audio file for their ad or would rather use their budget for the campaign itself.

Users who choose to upload their own audio files can reference 

This article however will instead focus on the process of requesting a voice over from Spotify. However, the first steps in the creative process are to provide an image to associate with your audio ad. This image must be 640x640px and only JPEGs or PNGs are supported. This image will show where a song or podcast episode’s cover art would be displayed. Additionally, a user must provide a click through URL for their ad. It is best practice to include not just the landing page’s link but also a UTM that will enable your analytics platform to properly attribute traffic from your Spotify ad.

Once you have provided an image and landing page URL for your ad you are ready to provide direction for the generation of your audio file. The first step of this process is to upload you audio script. Your ad script must be 70 words or less and be presented exactly as it should be read by the voice actor in the language you requested. A few quick tips for your script ad copy include:

Start the ad with your organization and offer

Provide benefits about you product/service

End with a clear, easy call to action like “our store is located at…” or “visit our website atâ¦”

For the URL in our ad, we provided a vanity URL that would be easier for listeners to remember and enter later. The vanity URL redirected to our landing page and had a unique UTM so we can track website users visiting the site from the URL read in the audio ad. This UTM was different than the UTM used as a click through but both used the same campaign value so we could track the total amount of traffic coming from the campaign but also how users were accessing the page. Did they click through via their app or enter via the vanity URL read in our ad?

Next you can provide direction for the voice actor in a subsequent text field. Instructions can include proper pronunciations, where to put emphasis and tone or emotion.

Following the “Instructions for the voice actor” are 2 dropdowns that help Spotify select the voice actor. The first is the language and dialect (for example “English – North America” v. “English – England”). The second is the voice profile. There are 10 options including age & gender specifics:

Lastly, Spotify will ask you to choose or upload your background track. A background track is not required to run an ad. However it is a good idea to find a background track that matches the tone and energy of your product or service. Spotify offers over 25 free, unlicensed tracks for ad creations in genres like acoustic/folk, electronic, pop, hip-hop and rock. If you chose to upload your own track be sure to confirm that it is license free or that you have permission to use it.

One issue I encountered was that there is no way to share music provided via Spotify so client approval of the music had to come in person.

Once the creative options are set you can submit your campaign and audio request to Spotify. Spotify will generate the audio ad asset and have it available for review within 24 hours. In my experience however, Spotify got the ad back to us for review even sooner. Once the ad is available for review users can approve or make revision requests. If revisions are needed, they are made within another 24 hours.

Once your campaign is launched, Spotify Ad Studio offers standard reporting on the campaigns performance including impressions, reach, frequency, clicks and CTR and amount spent.

Following the launch of your campaign you will begin to see results in real time. Spotify campaign reporting will also give qualitative data on campaign performance including audience demographics (age & gender) as well as what genres and platforms your ads are being heard on.

Over the course of our month long campaign, 13,251 impressions and a reach of 8,713 were recorded for a 1.52 frequency. The campaign recorded 27 clicks from the ad within the platform and 2 additional visits from the vanity URL provided in the ad’s script. Most importantly, the campaign helped drive a significant increase in membership inquiries, particularly during the last 2 days when the Fall Promotion was coming to a close.

Overall the Spotify Ad Studio offers a cost-effective opportunity to reach users in a format that lends itself to raising awareness for your brand, product/service or promotion. Additionally, given low budget requirements and the option for free creative, it presents an easy entry ramp to test streaming platforms for your next campaign.

As an added bonus here is my Spotify workout playlist:

Strategy

Spotify - A Low Barrier Option for Entry into Streaming Ads

Email development has always been the bane of a web developer's existence. You have to use outdated methods and don't have access to the full modern web to create a nice looking email that thousands of people will see. It's like asking a Nascar mechanic to create a car using only tools from the 90s - it can be done but its more than a pain.

With time, however, email development has become easier and more developer-friendly. Gone are the days of creating the email entirely with images and then cutting it up. Now you can breakout out the tables and creating a responsive email that looks good on all clients, even Outlook.

The largest part of developing emails is how the email is actually rendered by the email client. While this seems pretty straightforward at first, the fact that every email client uses a different rendering engine or has its own quirks turns what should be pretty simple into a much larger beast. There are versions of Microsoft Outlook that using `margin` does not work, however, using `Margin` does. Keeping on the Outlook theme, it either uses Microsoft Word or Internet Explorer as a rendering engine. You don't have to be super tech-savvy to understand maybe using Word to display essentially a website may not be the best thing...

However, as time has progressed the rendering engines have gotten better and more standardized. While there are still a lot of quirks, you can build something and be fairly confident that it's going to look good across the board. With the iPhone and smartphones forcing email clients to account for media queries and Gmail dragging everyone along, it's not too bad developing emails.

Outlook is no longer the dominant client as the Apple Suite and Gmail have taken over.  Mobile reigns king as well with the top client being the mail application on the Apple iPhone. 

When I first started out in the web development industry as an intern, my first task was updating emails for clients. Even in 2013, this was a process of opening up the email in a HTML editor like Sublime and going thru the spaghetti code trying to make the changes. After a few weeks of email development, I understood why the intern got that job.

Today, the process is much more smooth. Here at VIA, we use three tools primary - 

. The first tool, MJML, is a development tool that allows us to create clean code and modular emails. It also includes a library of tested skeleton components that we can use in the emails and know they work already. It also will build the email and take care of any quirks and will inline and optimize the email. Using this tool has cut down on development time tremendously.

MailChimp is used primarily to manage email campaigns, contacts, and gives marketers the ability to visually edit email templates. MailChimp has the ability to import templates created elsewhere and use tags to create editable areas. Custom templates can be reused and customized for different campaigns. Gone are the days of having a developer create each email for the marketing team.

The other tool that we use extensively is Litmus. Litmus is an email testing tool that allows you to see your email in any of the major email clients. For instance, we have the ability to see what the email will look like in Outlook 2007, 2016, iOS Mail, and Gmail all the same time. It also has other features such as live editing and accessibility tools. With Litmus, we don't have to have the actual devices on site - no old Windows machine with Outlook on it.

When designing an email, a designer and developer at VIA first sit down and go over the constraints. We use the tried and true width of 640px as the base of the email and then try to design everything as blocks with no overlap. There is also a reminder on what modern CSS attributes, such as box shadows, do not work for emails. Previously, since it was a giant image being cut up or a much simpler email design, there was no need for dev and design collab.

Once we have a design approved by all parties, development starts. The email is cut up into the blocks and each is developed as a component in the email. Using MJML we are able to import these components into the main email file. In the end, we end up with a nice folder of components and an external stylesheet that is easy to navigate and make changes.

From there the email is imported into MailChimp, our email campaign tool of choice, and content loaded in. The email is then sent from MailChimp to Litmus to be tested in the major email clients. Typically there are the normal changes and then a set of Outlook only changes that have to be made. These revisions is typically resolved in one or two tests and then the email template is updated in MailChimp and sent for final approval.

Once this email template has been created and tested, it can be reused by the VIA marketing team without any help from developers. No more interns having to make changes.

Development

Email @ 50: Email Development

You’ve probably noticed a sudden proliferation of your friends on Facebook asking for donations for their birthday recently on Facebook. But underneath that is a major new feature for any non-profit that has a presence on Facebook (I assume that’s all of them!).

 – and we’ve just recently set this up for our friends at 

 Do With Facebook Donations … but there are workarounds.

It’s pretty simple, really – Facebook users can donate money using a credit card on the desktop in or in the Facebook mobile app, and it goes directly into the account you specify when you sign up – and Facebook takes ZERO fees.

Like any non-profit verification process, you’ll need to provide proof of your status, etc. This is 

what Facebook says you need to get access to these Charitable Giving tool

Be a 501(c)(3) organization registered with the IRS.

Have a bank account registered with a licensed financial services institution. Bank account details, including the bank name, bank account holder’s name (organization’s name), and a legible and official bank letter or statement dated within the last 3 months.

The date of birth and address of the charity’s CEO or executive director.

Add a Donate Button to your Facebook Page

The most noticeable thing is that you can add a “Donate” button to your Facebook page, like so:

Similar to those birthday fundraisers, anyone on Facebook can now fundraise for you. On your page, you will now see a “Fundraisers” option. You can share this link with any Facebook member, and they can start a fundraising drive for your organization.

The donation creation form looks a little something like this:

Another hidden gem is that anyone can add a DONATE button to one of their posts, just by choosing “Supporting…” from the “Feeling/Activity” button:

They’ll be asked if they’d like to “Add a Donate Button”, like this:

And it will eventually appear like so in their Facebook Feed:

What You CAN’T Do With Facebook Charitable Giving Tools (But There Are Workarounds):

You Can’t Create Ads That Drive People to Donate (on Facebook)

Nope, can’t do it. However, if you’ve created Facebook ads before, you’ve likely see the “Donate Now” call-to-action button for ads. 

 button is actually for offsite donations, and it works like so:

But, You Can Create Ads for Offsite Donations

This has nothing to do with Facebook Charitable Giving tools, but does give you a way to ask for donations, if you have a website that is taking donations for you.

This works like any other off-of-Facebook targeted ad, except you should change the call-to-action button to “Donate Now” instead of “Learn More”:

Which will look a little something like this:

Louisville Leopard Percussionists on their website

And, if you’ve never witnessed them before, I suggest this charming video where Ozzy Osbourne and his family are brought to tears at their professionalism and joy while they perform his hit 

Facebook Donations: How to Add Charitable Giving Tools to Your Non-Profit's Facebook Page

Articles, insights, events and announcements from VIA Studio from every discipline we offer. Sharing our knowledge with our community. Sign up for The VIA Monthly email to get a digest in your inbox.

The Journal

As a graphic designer, quite often I’ll have clients ask me to create a “template” to handoff for them to use for various deliverables such as print ads, social posts, etc. While this seems like a simple request, there are complex questions to answer in order to determine if a template is the right fit for a creative piece.

When clients request templates, a big reason is so that they can make changes to the creative internally, saving money and eliminating the back-and-forth requests to an agency. Despite what Oprah says, templates aren’t as simple as they seem and do not work in all cases.

The best case for creating and using a template is when the layout stays exactly the same and copy and images are the only things switching out. Food menus, business cards, and email blasts are great examples of when a template can come in handy and keep your brand consistent.

Keep in mind that content informs the design and layout. If your main message and concept are changing for a specific piece of creative - think social posts or print ads - a template will not be the most effective approach because it will pigeon hole you to one layout that may not work for every message you are trying to communicate.

Other examples of when a template might not be the best idea is when content will change tremendously such as annual reports, newsletters, and presentations. While there are guidelines that can be set to help create these items, a template used outside of a design team and design software would be very time consuming to create and at the end of the day, may not be worth the investment. But don’t worry - we have solutions for both cases because we’d never leave you high and dry.

 - These are great for small scale projects that don’t need a whole lot of editing. For example, business card templates can work well in this format where a few key pieces of information will change, but will not affect the overall layout. The beauty of this method is that designers can create custom documents in any of the Adobe Creative Suite programs and save them out as editable PDFs. The designer can then open the file in Adobe Acrobat and assign text fields that the end user can fill in and change. The end user will just have to purchase Adobe Acrobat Pro to edit and the learning curve there is pretty low. Food menus, name badges, and price tags are all other examples of when this technique can come in handy.

 - VIA has used google slides for templated presentations for ourselves as well as our clients. Where this tool lacks in design capabilities, it makes up for in accessibility and collaboration purposes. It’s best to keep design as simple as possible when setting up templates because the design toolset is very limited compared to professional design software. A designer can take this method a step further by creating custom icons and illustrations in external programs, and saving them in an ‘assets’ folder alongside the actual google slide file. That way, the end user will have a library of custom branded content they can pull into their presentations.

 - InDesign is a part of Adobe Creative Suite and is used widely by designers. It can be a great tool for setting up long form documents. For example, we are currently working on building a custom RFQ (Request For Proposal) document for one of our clients using this program. Why InDesign? InDesign allows you to set paragraph, character, and object styles - leaving no room for guesswork when it comes to creating new pages. You can also assign as many master pages as you’d like, locking certain information in place. This technique only works if the end user has an InDesign license and has a good understanding of how to use the program. This would be the ideal approach for creating items such as annual reports, presentations, and newsletters since it makes changing out large amounts of information easy and consistent.

There is an abundance of drag-and-drop, template based software options accessible to anyone with a computer and an internet connection. Canva is one that I have not personally used, but have heard about from non-designers. This, and others like it, could be an option if you do not have access to or the budget for hiring an agency or freelancer. There are already preset templates to choose from where you just plug in your own content.

To my knowledge, there is no perfect solution for handing off work to be easily edited by someone who does not have access to or knowledge of using design software. However, The beauty of partnering with an agency is that you have the ability to get custom, unique designs created just for your company that will set you apart and completely align to your brand.

Design

Design Templates

Knowing how to deliver feedback constructively in a creative setting takes practice. That practice can be difficult and awkward at times, which is why I’ve carved out some tips on how to make the process go a little smoother. These tips begin with all the members of a critique leaving their egos at the door and being committed to making the work the best it can be.

If you are not in a formal critique atmosphere, always ask if feedback is welcome and needed at this point in the project. Using phrases such as, "Can I give you some feedback?"  "Are you open for feedback?"  "What kind of feedback are you looking for?" is a great way to start the 

This goes without saying, but I see this happen all the time: don’t ask for feedback just to check a box. If you are nearing the end of a project and ask for feedback on something, make sure you have the time,  budget, and motivation to implement the feedback. Dismissing ideas simply because you don’t have the time means you may have missed the boat on asking for feedback in the first place.

2 — Remember That It’s All Subjective

As the person giving feedback, using first-person pronouns (I, me, my) is a great indicator that your feedback is just your opinion. Sentences with “I feel that..” “I think..” “I see…” opens the floor for back and forth discussion, prompting others to engage and speak from their perspective as well.

3 — Nix The Ol' “Compliment Sandwich”

The idea of this is nice and it can be helpful if you are very new to critiques. However, the compliment - critique - compliment technique can come off a bit insincere. Definitely give kudos when you see something you like, just make sure you are being direct and honest with your feedback and are delivering it with respect and care.

If you are the one giving feedback and see an aspect of the work that you are unsure about, always ask the presenter how they got to that point or why they made that decision. Phrases that start like “Tell me more about...” or “What’s your thinking behind…” The answers to these simple questions will give the piece deeper meaning and provide more context around the work as a whole. If you still see room for improvement after you have listened to the explanation, respectfully express your thoughts. Asking questions invites reflection and is vital in sparking new ideas.

5 — Don’t Make Comments Just To Make Comments

In many critique environments where people are going around the table giving feedback, you may feel pressured to comment on the work. If feedback doesn’t immediately pop in your head, don’t feel like you have to come up with something just to make your voice seem valuable. If this is the case, take time to compliment the work and explain what's working for you. 

As much practice giving valuable feedback takes, receiving that feedback takes just as much. Giving context and listing the goals of the project before you begin presenting your work will help give viewers a solid understanding of the project. If you are the one receiving feedback, try your best to separate yourself from your work and not take things personally.

Follow these six easy steps and you are on your way to becoming a master at critique! 


Critique Etiquette

1. Design for your user, not for yourself:

Your user should be your focus at every step of the design process. The most basic principle of interaction design is to meet the user’s needs. What are they looking for? Answer that first. What other products are they familiar with? Learn from those. Are there any common threads or patterns in the products that your users frequent? Borrow. Observe your user’s behavior, analyze existing data, form scenarios and flows and most important of all, test, refine, repeat.

The U in UX does not stand for “you”. At its core, user experience design is about eliminating ego from your process and doing what is best for others. This makes user testing and engagement with your product vital. Put your product in front of an audience, form user interviews, ask questions and don’t be afraid to fail. Your end product will be better for it.

It’s not stealing, just borrowing. When you begin to learn about your user, you will gain insight into what they are used to interacting with. The more familiar your design is to your audience, the faster and easier it will be for them to use. Consistency in UI, user flows, design patterns, even tone and language are all at play here. You don’t always have to reinvent the wheel, just get some new rims.

4. Make it (for lack of a better word) useable

Duh, right? Well... If only everyone followed this rule. Let’s get one thing straight – Accessibility should not compromise design, but rather give you a toolbox of constraints to create a better product for all. We design products for people to use and it’s crucial that said products can be used by as many people as possible. Consider color blindness – don’t use color as a sole means to communicate something, let it be a compliment. Triple check contrast – There are some great tools out there that can help with this 

 is one of them. Create CTA’s that look like buttons and links. Don’t get too crazy (goes back to familiarity). This is just the tip of the iceberg. In general, always try and remove obstacles for your users, design for disabilities and test, test, test. There are tons of plugins and resources out there when it comes to accessibility. Use 'em!

It can be tempting to want to pack everything in one place, but in web design, the focus should always be on the project goals and conversion. Focus on what is important in that journey from start to finish and everything in between. What is going to lead to more user engagement? Reduce any unnecessary operational and cognitive costs for your user and focus on content value.

Knock, knock? Who’s there? It’s familiarity again. UX-focussed copywriting has really taken off as a best practice in the past year. People are busy, and they don’t want to have to strain to understand or use your product. Make the language simple and easy. Use familiar language, figure out what your audience already knows and what they WANT to know. Consider the tone your communication needs to adopt and keep that consistent. Be clear and be concise.

Users crave feedback. If you click something, there needs to be something in return – 

changes color, changes shape, vibrates, morphs. 

Give your use SOMETHING. This helps communicate status, gives a sense of direct manipulation of the product, shows results of an action and increases engagement. Define user-initiated triggers, set rules around these triggers, create feedback – What happens/what does your user see? Create loops and modes that determine meta-rules based on different conditions.

8. Hand over the keys and let them drive:

Remind the user where they are within your product using visual cues, allow them to back-pedal so that they don’t get lost in sub-page land, utilize page templates and component based design principles for repetitive functions and improved efficiencies. All of these things help – and users will have a better experience if you give them control over what they interact with, how they interact with it and where they ultimately go.

It takes a user a half of a second, to evaluate the design of a website, and decide to stick around, or bounce. Make it easy for them to find what they need QUICKLY. Trim content, reuse components and patterns that reduce cognitive spend, allow users to dig deeper if they desire (use CTA’s like “read more”, expandable/collapsible sections, content that can be made discoverable as it is needed, not shown all at once). Learn to listen to your user and do less talking.

So you’ve already cut slim on content, now it’s time to organize that content to create an obvious emphasis. Show the user where their focus should be. High contrast, scaling elements up in size, adding design elements like a drop shadow or stroke. Things like this make the focus, locatable, navigable and easily accessible.

So, that’s it. See? User experience is more than just a business buzzword. It’s what allows you to define customer journeys, it creates an emotional response from your audience and ultimately, it’s what defines a successful product. A positive experience = a happy user. Good design, an effective build, optimized content – None of that matters if your user cannot efficiently interact with your product. Prioritize UX best practices and give yourself the best shot at flipping a site visitor to a loyal customer/consumer.

10 essential UX best practices to keep in your tool-box

Welcome to the new world of remote work! YOU’RE ON MUTE! How many times a day does that happen now?

Well, I can’t help with the UX of Zoom or Google Meet, but I can help you make your Zoom calls far more interesting than that fake beach scene background Zoom lets you use (if you pay them).

I’ve recently fallen in love with OBS Studio. It’s an open-source live streaming software package, but if you peek behind the curtains, it can be so much more. So, in the interest of making the world more interesting, let’s have a Zoom call soon and see what you can do with your webcams!

You can create multiple “scenes” and easily switch between them, so for all the ideas you might come up with, you can easily use all of them in one conference call.

Step 3: Let’s get creative! Here are a few options for making something interesting.

OBS allows you to integrate graphics, videos, multiple camera sources, text, and more into its viewport, and more importantly, using that viewport as a webcam source. So break out your brand standards guide, and follow along!

Remember your design fundamentals. Less is more, but make it interesting!

Here are some examples that you can use, and a 

Example 1: The “Business Card” (simple)

Create a frame in Photoshop at your webcam’s default size (mine is 1920x1080).

Cut out an area for your webcam’s viewport, and list your name, position, and any other identifying information you like to the side of that viewport. OBS utilizes transparent PNG files, so you can create a lot of visual interest with layers.

Export that frame you created as a transparent PNG.

Open OBS Studio. If it’s your first time, don’t be overwhelmed. There are many amazing things you can do in OBS, but we’ll focus on the basics.

For the purposes of this tutorial, you can think of “Scenes” as folders, similar to how Adobe apps function, and “Sources” as what goes in those folders. You can transition through Scenes simply by clicking on the one you want to display at the time.

Create a new Scene by clicking the “+” icon in the lower-left corner. Name it “O1: Business Card” or something similar. OBS alphabetizes Scenes and Sources in annoying ways, which is why I like to number them.

Next, with that scene highlighted, click the “+” icon in “Sources”, and click “Image”. You’ll get a modal window to either “Create new”, or “Add Existing”. Well duh, we’re creating a new one, so name it “Business Card Frame” and hit “OK”. In the next screen, you’ll browse to the PNG file you created, and load it up. Now you should have your “Business Card frame” in OBS.

Add another Source to the Scene by clicking the “+” icon again, and this time select “Video Capture Device”, in the “Create New” section, name it “Webcam” or something similar, hit “OK”, then you should see a window where you select your webcam. If you only have one webcam attached to your computer you should see it immediately. The defaults usually work just fine.

Now make sure that layer is behind your “Business Card Frame” layer. It will probably need to be centered in the window you created. At this point, you should be good to go with this scene!

For our next experiment, we want to get a little fancier and have a copy of my name and information scroll across the field. At this point, you’re starting to build on the fundamentals, so hopefully, you already have interesting ideas. I removed the copy from my Photoshop frame and exported it as “02 Scroll Frame.png”

Create a new scene, name it “02: Scrolling Text”

Inside that Scene, add a new Image source, name it “Frame No Copy” or something similar, and import your new frame into that Source.

Create the Webcam source as you did in Example 1. Pro-tip: You can copy/paste both Scenes and Sources to save time.

Now, select a new “Source” and click the “Text (GDI+)” option. Name it “Name & Stuff” or whatever you like. In the next window, you’ll get all the options for inputting text. If you need variable widths or different fonts, you’ll need to create new text sources/layers. Try to get the font size right, because it will make the copy blurry if you have to enlarge it in the display window.

Right-click on that Source layer, click “Filters”, hit the next “+” sign and select “Scroll”. Name it whatever you like, and now you get to the options. A nice, slow horizontal scroll is a good, minimalist way to start. After hitting “OK”, you can use the red frame in the main display to adjust the position to your liking.

This is where you can have some real fun with video loops.

In the interest of laziness, I’m just going to duplicate the last Scene. Right-click on the “02: Scrolling Text” Scene and hit “Duplicate”. Rename it “03: Video” and let’s get to work.

Add a new “Source” to the scene by clicking the “+” icon and click “VLC Video Source”.

Import your video file. I used a royalty-free looping video found 

. This option will use a “playlist” with multiple video files, which opens so many more options, but just import one for now. Click the “+” icon at “Playlist” and import your video. Some of the options listed could be important, but that’ll be extra credit for later.

Now you can see the looping video as a layer in that scene. I’m going to put it behind the text layer and change the text color to white.

Example 4: Multiple cameras (or a better webcam in general)

One of the super cool things I discovered in the COVID era is the ability to use the “good camera” as a webcam source. There’s a nifty little device called the 

 that turns your DSLR camera into a webcam source, so you get some seriously improved optics for chatting.

Since I already have the hardware all I have to do is duplicate the “03: Video” scene, name it “04: DSLR”

Delete the webcam Source in that new scene

Click the “+” icon in sources and add a new “Video Capture Device”

” plugin. That allows the output of OBS to become a webcam source in whatever video chat tool you use. After it’s installed, in the top menu click “Tools »  VirtualCam » Start”. This tells your computer that the output of OBS is a webcam source.

Go to your video settings in Zoom, Google Meet, etc, and there will be an “OBS-camera” option to choose from.

I’m still learning, and now this has set me off in a live streaming & recording direction, so if you have any questions, find any cool tips & tricks, or just want to show off your new webcam setup, please send them my way!

OBS Studio Tips & Tricks: Super Cool Webcam Options

Beautiful little hidden, contained product moments that revolve around a single use case. Micro-interactions may not always look the prettiest (the best of them may even go unnoticed) but they can be the difference between a user achieving a task or not.

Be consistent, purposeful, and guiding. These are the 3 things I always consider when adding animation to a site design or app.

Multiple interactions or animations happening at once will detract the user from the goal at hand. Decrease the users mental load time. Create a system or a few rules or interaction types. This will reinforce a users understanding rather than confuse the situation.

What is the goal for your user? How can the animation/interaction 

 to that purpose? Communicate an intended purpose. If animation slows down an experience or increases the users mental effort, it isn’t helping.

Make these experiences lend to the storytelling. What is your user doing and how can the UI help guide them? Purposeful and guiding animation can help draw the users attention to what is happening and compliment the understanding, while reducing confusion.

Let’s take a look at some examples and why they are successful:

 Keep the user informed through feedback and validation. Increases engagement.


 Provide the user with action/reaction. Delightful. Immediate feedback.


 Keep the user informed through status. Creates user engagement. Builds trust and confidence in the process.


 Communicate change. Draws the users attention to important details. Creates visual hierarchy.


 HAVE FUN. Explain a concept visually. Hone in on a users emotion. Be empathetic in your design while still complimenting user flow/storytelling.

In conclusion treat your user the way you want to be treated. Design with empathy and consideration of how people will interact with your product. Know your user and create facilitators for that specific audience that will save them time and resonate with them. Do so by creating opportunities to engage and by paying attention to the details … Your user and your product will thank you later.

The Role of Microinteractions in Successful UX

Hand lettering: One of the oldest art forms is also one of the trendiest.

From Mesopotamian Cuneiform and Ancient Egyptian hieroglyphics to the guy wearing a beanie in the middle of summer, drawing tall swooping letters on an iPad in the corner of your local cool-coffee-shop, this art form has existed for thousands of years and will likely exist for thousands more. I won’t bore you with some long, colorful history of how glyph-based alphabets carved into stone became Gutenberg’s calligraphy-inspired blackletter type, which became me crying in aisle 5 of a Michael’s arts & crafts because my mom wouldn’t buy me a set of expensive brush pens at age 8-and-a-half. Maybe I’ll tell that story another time. Today, I’m just going to give you a short list of hand letterers who inspire the hell out of me, and will hopefully inspire the hell out of you.

 â a Portland based artist, illustrator and author, known for her colorful paintings and hand lettering.

 â The lettering, illustration, & design studio of Spencer Charles and Kelly Thorn. This Philly based duo is known for their lettering, illustration and type design. 

 â a Salty Lake City based letterer and stop-motion animator, known for her ability to craft letters out of food and food out of letters. 

The Journal

Parched Madness 2021 Recap

Marketing

Parched Madness 2021 Recap

Strategy

Apple iOS 14 Privacy, Facebook, VIA and You

Design

The best things in life are free… Except for good type.

Development

Developing the New via.studio

Stay in the know. Sign up for the VIA Monthly:

Follow Us