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.

User-focused design is at the core of what we do. User Experience (UX) and User Interface (UI) design are two of our most critical specialities. Designing thoughtful experiences and intuitive website, app and content interfaces for your potential customers is always job number one for us.

UX / UI

User Experience (UX) is the driving design philosophy around building web and mobile applications, putting your audience (the “User”) first. The methodology requires research, wireframing, UI design, branding, and user testing to achieve exceptional results. We have the expertise in User Experience to design any experience you require.

User Experience

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

So, what is a prototype and why is it important?

, and baking prototyping into your workflow can begin to shift the way you think and approach design problems as a whole. Consider prototyping as the final test - Does a specific simulation of the final product and interaction between the user and the interface work? Does it make sense? Is it intuitive? Does this specific interaction solve a problem? Prototyping answers all of these questions for you, the client, and the project - It ultimately puts the usability of the interface to the test before the development gets tagged in.

Design and all of it's processes are simply a means of communication. Wireframes, prototypes, design comps, mockups. These are all dialogue in the conversation with your users.

I apologize ahead of time, but I'm a sucker for a good metaphor. So, hear me out ...

When you first go to build a home from the ground up, there is nothing more than a vision. You may have some inspiration to go from, best practices, themes in mind such as

 it has to have a bathroom in the basement

. But think about it this way ... It all starts with a massive hole in the ground. It's a process to get to what you were envisioning..

 Wireframes organize the information on the page. They give an outline for layout, begin to convey direction, hierarchy and information architecture. Wireframing should be low fidelity and to the point. No colors, no design elements, no polish. Simply strategy.

Your design comps are your visual representation:

 While a wireframe mostly represents structure, a comp shows how the product is going to look. These designs (like wireframes) are not clickable. You are identifying color scheme, visual style, typography, photo treatments, patterns and experimenting with the visual side of the product. Think of it as picking paint colors, choosing finishes, and shopping appliances.

Your prototype is high fidelity representation of the final product.

 You are taking the visual identity you have built and considering all of the user interactions. How will a user navigate the product, how can you make things as easy and seamless as possible? Prototyping is done in a number of different platforms, but most importantly, there is no back end or development needs. It allows design to test interfaces, validate through user testing and receive approval on decisions before development gets to building. This translates into saving time, money and effort in future phases. Would you choose the color of a room for your house without consulting your significant other? Of course not. Prototyping will allow you to test paint colors before you commit.

Each step is necessary and each step tests, validates and/or drives a crucial decision along the way. Both wireframes and prototypes serve distinct roles in the design process and communication with your user. Wireframes are your base and construction plans of what you’re building. Prototypes are a visual representation, they are suitable for public consumption/viewing before you give the builders final sign-off. Both are very important and one should not replace the other.

There are TONS of tools and applications out there that allow virtually seamless wireframing-final product functionality, in fact, some even provide you with HTML and CSS at the end. But, they all have their advantages and disadvantages. Often times, I prefer the more specialized tools that are meant for 

 specific purpose (be it wireframing, designing, or prototyping) but, you may see it differently. Below is a short list of ones that I recommend exploring:

 a cohesive, mobile-friendly website takes a talented team with diverse skill sets. Our team delivers the strategy, design, and development talent needed to execute outstanding work. We build from the ground up with a focus on accessibility and mobile devices.

Web Design

Wireframing vs. Prototyping and Everything In-Between

Let’s run through some go-to UX resources and prototyping tools to improve your workflow:

Ever have a client that just can’t quite grasp the concept of a static wireframe? “How in the world does this translate into what I am envisioning (no pun intended)? Cue one of the more popular prototyping resources amongst designers – Invision.

Collaboration: Ability to leave feedback, comment or even draw directly on others designs.

Advanced transitions to create robust, interactive design interfaces.

Easy to send shareable link to a client. No need for any design applications.

Seamless integration with Sketch and Photoshop through it’s 

 plugin. Prototype directly in your design files, one click sync your artboards to Invision.

You are uploading static images and making them clickable. No design capabilities within Invision’s interface.

Not ideal for wireframe creation or tweaking 

Where Invision caters more to static designs, UXPin has a robust design platform within itself. Equipped with ready to use UI libraries, custom and pre-built transitions, CSS styling and more.

Responsive design. Ability to set breakpoints.

User interactions, animations and transitions built in. Not just screen linking.

Functional elements generated from production code.

Lack of integrations with design apps such as Sketch and Photoshop. If you wireframe in UXPin, the only export options are static.

A relatively new offering in the Adobe portfolio that was created to rival Sketch. Includes out of the box prototyping capabilities. XD hold it’s own.

All in one platform – Wireframing, designing, low fidelity prototyping, high fidelity prototyping, user flows and collaboration.

Easy integration with other Adobe products.

Real-time viewing, commenting and sharing capabilities.

Offers CSS and HTML for your designs, so you can borrow code directly inside the interface.

No plugin capabilities. What you get is what you get.

In Sketch 49 update came the long awaited ability to turn static designs into living, breathing prototypes. Design, link, prototype, preview and share all without ever leaving Sketch.

A preferred design resource for many web designers and people working on user interfaces. Now you don’t have to leave it. Everything is in one place <3

Sketch Cloud – Allows anyone on the team to share, download, and comment directly in Sketch.

The Sketch mirror app lets you preview your prototypes directly on your IOS device so you can see how things will actually look and function once developed.

Plugins. If you think “Man, I wish I could do [fill in the blank] in Sketch.” There is likely already a plugin for it – Search github.

Ideal for fast prototyping but not as robust as other alternatives.

 Like I said before, each prototyping resource offers a different set of unique advantages that cater to different needs. We’ve come a long way from presenting pen and paper sketches to show the client how their website will lay out/work. Things can now move, bounce, react, link, and transition 

 before anything ever touches the hands of development. It makes designers lives easier, it makes the clients understanding stronger, and it creates a more seamless development/design collaboration. So go out there and get your hands dirty, figure out what works best in your workflow and get to buildin’. Happy prototyping!

Favorite UX Resources for Prototyping

 It’s something we’ve all heard “Can you fit that above the fold?” that inherent, psychological desire to fill white space. But in doing so are you actually helping, or diminishing your user’s experience. Let’s dig in.

My opinion? The fold is an antiquated concept. The term quite literally derives from the days of the printing press – used to describe content that appeared above the fold of a newspaper. In the ’90s the web adopted this concept as fitting everything into one screen view. Scrolling, at first, was an unfamiliar and unnatural user behavior. But, it’s not 1997 anymore. People scroll and we have research to back that up. Placing as much content as you can at the top of the screen doesn’t guarantee it gets noticed. It’s actually likely that it gets scrolled right past, as many users immediately scroll before a page even fully loads. A study by 

 showed that “Based on 120,000 page views, 91% of those views were on pages that had a scroll bar. Of those, 76% included some scrolling action, and 22% were scrolled to the bottom of the page.” In this same study, they found that 75% of users spent most of their time right 

or below the almighty “fold”. Chartbeat, a data analytics provider, analyzed data from 2 

 visits and found that “66% of attention on a normal media page is spent below the fold.”

Now, my goal here isn’t to throw a bunch of stats at you. Rather, it’s to prove that the fold no longer exists. That’s not to say that the content at the top of the page isn’t important, because it is. What I’m getting at is that it is one piece to a larger sum.

Say your goal is to drive conversions: assuming that the best way to do that is by tossing a giant “call to action” above the fold would be misguided. You’re missing out on what is more important.

To gain conversions, you first need a deep understanding of your user, be able to cater your content to their wants and needs and provide an experience that will 

conversion through good storytelling and thoughtful content.

The point being, you’re not going to read a book and expect everything to be in chapter 1, are you? Likewise, you aren’t going to visit a website and expect your answer to magically appear on the first screen you land on. People will read past the first page of a book, just like people will scroll past the first viewport on a page. The issue isn’t whether the call to action is or 

 above the fold, the question should be rather, whether or not the call to action is at a point on the page where the user has become 

 crucial in drawing your audience in. It’s the main deciding factor in whether your page is worth exploring or not. But, that doesn’t mean you have to squeeze every, little thing in this space. Instead, design principles should be utilized to incentivize scrolling and success should be measured through your site’s analytics. Not working? Adjust and repeat. You have to provide your users with content that will keep them interested. Scrolling, the fold, none of that matters. Know your user. Keep them interested. Encourage them to explore.

: In my experience with designing for the web, the worst thing you could do to a homepage is to put everything important and actionable above the fold. Is that too dramatic for me to say? – Maybe. But in almost all cases, this habit creates hectic design and can overwhelm the viewer. And can you imagine how all that information would translate to a mobile screen!? The user won’t know what to look at first and will most likely start scrolling just to get away from the madness. To Morgan’s point, it’s the start of an unpleasant user experience.

Although I have 99.9% faith in the human race to scroll upon hitting a website these days, here are a few design tricks we use to encourage that scroll:


A well-designed homepage containing clear and minimal “calls to action” with secondary information slightly peeking above the fold is a safe and smart practice. Getting your primary message across clearly is first priority. Then, hitting them with some partially visible design elements such as a photo or headline is all you need to entice the user to start scrolling to see what’s next.


Sometimes you’re designing for an audience that isn’t the most tech-savvy. In this case, it’s okay to use obvious indicators to inform the user that they can and should scroll down the page. While this isn’t my favorite technique since it can be a little distracting, it gets the job done. This can come in the form of bouncing arrows pointing down at the top of the fold, and icon of a mouse scroll, or even the word “SCROLL”.


Giving the viewer one bright and shiny object to focus on such as a full-screen image, illustration, or video that begins to tell the story of your brand will rope viewers in. Unique content like this encourages them to learn more, and they will naturally begin to scroll. This is my favorite technique because when done correctly it seems effortless and unforced, but it does involve having a deep understanding of your target audience and their “user journey”.


This is a sticky subject, honestly. As a web user, you either don’t mind scroll jacking, or you absolutely hate it. “Scroll jacking” is when you land on a website, and it automatically begins to scroll for you. I would use this technique sparingly and subtly. This effect would work great for a portfolio website that has a ton of photography and visual content. But, if you have bodies of copy and important CTA’s scattered throughout the homepage, this might not be your best option. Here’s an example of a website that I think uses scroll jacking in an effective way: 

*Hierarchy Rules Everything Around Me – These are all great techniques to get people moving through the pages of a website, but underneath all the design tricks lies visual hierarchy. Establishing which elements are the most important at different scroll points with the UX and Strategy team is key and will help you create a very pleasant user experience.

I’ll be honest with you, when I was pitched the idea of writing an article about “The Fold” I folded up my eyes into the back of my head. It’s an argument that is as old as the Internet, a 

 that’s as outmoded as arguing about which was better: vinyl or cassette, when the real argument was about our need for access to music versus quality of audio.

So, yes – let me just state this right here: I believe the “fold” is real. But 

The fold is not a physical or dimensional barrier, but rather an emotional and psychographic one.

making them feel comfortable and interested enough

And I have to hand it to my colleagues Morgan and Ashley, they nailed it up above. They’ve hit upon two separate but critical components to catering to and audience:

First was Morgan’s thesis, which – if I might extrapolate – states: a user won’t use your website or app or email unless they are comfortable that they are 1) where they want to be and 2) you can provide what they need.

And as Ashley detailed: how you present that and provide that is up to you – but it should be both comforting, delightful and interesting.

An in case this still isn’t fully making sense, allow me this metaphor:

Think about your favorite grocery store. I know you have one. I’ll guarantee that your store doesn’t pack the front doorway with 200 crates of milk, sacks of coffee and anything from “that one aisle you’ve never gone down”, with someone waiting to bag your groceries. They know better. 

Groceries stores are masters as getting people past the entrance and all the way to the back of the store, and they do it from a holistic perspective, and not just by putting the $%&* milk at the back of the @%#* store. The moment when those sliding doors whoosh open and you step over the threshold, you aren’t bombarded with hard sells – it’s the soft lighting and the good smells. Sure – they’ve learned a thing or two and have put a small fridge case of milk up front – they know at least 

 is there just for that. But most are not. The real benefit here is not the sale, but the repeat visits. The customer feels great and remembers feeling great when they came in the last time.

And if you aren’t smelling coffee and baked goods right now… :)

The Fold: Above or Below?

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.

Animation and movement has never been more important than right now. From 

​ to character animations to the most subtle of UI microinteractions, it breathes life into branding and design, while providing subtle information to users. It's just another tool in our toolbox, and one we love experimenting with - what can we help you animate?

Animation

The Role of Microinteractions in Successful UX

In our industry, targets are always moving. Whether that be the applications we are using, the code we are writing, or the restrictions and limits that we are presented with. These days? The restrictions and limits to what you can build are few and far between – 

 you have the time to explore. So we made the time.

To demonstrate the power and flexibility of a headless WordPress install, our design and development teams got together to concept a site. The first challenge was content. We landed on finding an eBook that could be freely used in the United States due to no longer being protected by U.S. copyright law. Cue, 

The morphing was accomplished by using the 

 JavaScript animation platform. And a TON of custom illustration. The unique challenge here was using the exact same shape layers to create the face for chapters 1-12. This way every single component could be morphed (facial features, hat, etc). Being in it’s own SVG path element; Green Sock allowed us to morph the shape of these paths to the corresponding path in the next illustration.

Now it was time to tie everything together to be one cohesive unit. We decided we needed a home page that set the scene for the story, a chapter archive page that allowed you to easily navigate, an “About” component that described the framework of the backend and each chapter page itself. *rolls up sleeves*.

For the homepage, we used subtle CSS keyframe animations to add movement. The scene itself illustrates where the story takes place, adding little nudges to the content (the silhouette of Yale University and the angry mob).

We had a little fun here with a backwards moving clock to further tie into the metaphor of Benjamin Button aging in rewind. If you click on one of the clock hours, you are taken to that respective chapter page.

The design itself is meant to emulate the experience of reading a physical book. We used gradients, texture, and animation to communicate this.

We needed a way to close the book (pun intended) just as strong as we started it, so we decided to continue the metaphor trend by allowing the user to “find their way back to the beginning” with a clever CSS flashlight effect that allows the user to explore the Intro page and eventually find the CTA.

Curiosity enables creativity. Creativity enables innovation. Curiosity is necessary for the innovation we aim to contribute to our industry. The result of this project was especially rewarding because it was a labor of love from the team. A willingness to collaborate and to grow our skills/expand our creative brains through the common motivator of curiosity. And in so many more ways than one, that will always be rewarding.

The Importance of Curiosity in Design

1. Encourage the user to purchase your products

4. A common ecommerce feature – Hover zoom. Let’s the user to get a more detailed peek at the product, and allows for better small screen experience.

5. Enhance the user experience and alleviate frustration by keeping them in the know, every step of the way. Add personality and branding.

Generally speaking, don’t do anything that doesn’t lend to a usable, clean and sensible flow/experience. Don’t design for your ego or add to your users cognitive load – It will sacrifice your narrative. Lend to the experience, don’t add. Be aesthetically-pleasing, but more importantly … Be problem-solving.

Animation for the sake of animation – Have a purpose. Not everything has to move. Make sure you are fully acquainted with the brand (tone, look, feel) and put that brand in motion. Tell your story. Mailchimp is a great example of how to express brand through aspects of the UI.

Confuse the user. UI motion design needs to tell a story, connect the dots and give the user context. Use animation for validation and transitions.

ANIMATE ALL THE THINGS – Overwhelming the user with movement will result in an annoying experience and bogged down site. Compliment the visual design and create motion that will go unnoticed by most. A UI animation should take 100-500 milliseconds from start to finish. Don’t get too flashy (pun intended)

Design for “likes” instead of your user. If animation is taking the lead role, you’re no longer designing with a purpose. BE INTUITIVE. Don’t try to entertain the user, try to help the user.

If you need to sell online, we’ve got you covered. From simple selling strategies to complex subscription models, we’ve built them all. Our clients with ecommerce process tens of thousands of dollars per month through our systems. From Shopify integrations to WooCommerce workhorses to Magento installations and beyond, we’ve built and managed them all, safely and securely.

Ecommerce

UI Animation in eCommerce, Some Do's and Don’ts

SMC approached us because they wanted to more accurately represent their company brand and unique values, design a clear user experience for three distinct audiences, increase site traffic, engagement, and ultimately conversion.

Our foundational approach always starts with helping develop an authentic and unique brand story. After that a focus on audience personas and business goals help guide the tactics.

 Tell the story in an authentic way that encourages action.

 Well polished and easy to navigate on mobile phones.

 Clear goals for all content, copy, and narrative.

We saw improvements that could be made through our process. The existing website had some challenges we knew we could address.

SMC had outgrown the current, static structure of their web presence.

The website didn’t feel welcoming to our audience.

Too Kentucky-centric and did not accurately reflect the regional focus of the business.

So we rolled our sleeves up and got to work…

Our primary goal was to update the smcapproved.com website to accurately reflect the size and reach of 

Increase the number of users who start the application process.

Personify the brand in a way that pulls an emotional connection with the user. This could be done in video or with studying personas more closely.

Position SMC as a central bank of knowledge for home mortgages (home loans).


In the end, SMC now lives with a platform that is progressive, speaks to their brand and is more effective in communicating their presence as an organization.

Pages/sessions are consistently up (and growing), bounce rate is down 

Art Direction runs the gamut from concepting a campaign to directing a photo or video shoot. We can help guide a brand vision through any media.

Art Direction

Partnership

SMC: Building a Partnership

Night turns to day, gravity keeps us grounded, user goals, motivations, and marketing strategies change - these are all facts. So, how does this pertain to web design? Well, we need to eliminate ego from our process and start making our user the hero.

You can try and predict users’ motivations and their tendencies 

(and this is super important to do, don’t get me wrong),

 but at the end of the day, it’s just that – an educated guess. In many cases there are no previously existing data or analytics to use to determine what a user is 

 doing. You have to make assumptions upfront to create a first-round product that will likely reflect some “theoretical use” hiccups. And that’s OK. It’s to be expected. These hiccups are ultimately what can help you identify, diagnose and solve problems to create a better product in the endâ¦ which leads me to my point. Iteration in design is empathetic and human-focused at its core. Embracing iteration, and paying attention to your user, helps alleviate any faulty design hypotheses and will help weed out content that does not necessarily provide value to a user.

“But I did my research up front. This is what the people said they want!”

 wind up doing are often two very different things. Ask any parent of a teenager. But it’s 

 data points that provide you true validation. Something not working? You now have proof and a reason to fix it. Something working? Kudos. Pat yourself on the back.

So let’s take a look at some examples of how we have embraced iterative design in the past:

This design accomplished all of our initial goals and effectively targeted our audience and their motivations as users. And then, priorities changed. So, it was time to pivot. In brief, we needed to shorten the page, have a space for manageable, editable content on the admin end, and replace the phone number CTA with “Pay Rent”.

The client now has the ability to influence the homepage with fresh content; it is more manageable. The page is about half of the original length; we don’t ask as much from the user. And the client is happy; success.

To be fair, this homepage lived for about a year and a half. But it was time for a change. Instead of focus on one particular product, we wanted to re-position this space to tell the overall client story. This was our new order of priority:

Along with the new order of priority, we wanted to increase user engagement and interest by making the layout tell a story and lead the user down a path- much more progressive and innovative than the last iteration. *Rolls up sleeves.*

This new iteration wound up being a huge success. The design was well received all around. We accomplished “movement in design” (from the creative brief) with the addition of a video collage and micro-interactions, we increased our analytics tenfold, and ultimately, we used a year+ of gathered data to re-position ourselves and improve upon the user experience.

26,528 new users, 9,954 returning visitors

111,506 new users, 24,429 returning users

To explain above, the Scrollmap shows sections of the page that have been viewed the most. The warm-colored sections have been viewed the most number of times and the darker sections/cool-colored have been viewed the least. White represents most viewed, black represents least.

 to have a bow on it at the end of the project. It’s not to hand off to a client with a “Good luck” and a firm handshake. Client and project relationships alike should be about evolving and solving the ever elusive, 

problem. No one wants a product that sits on the shelf and becomes stale every few years. We want to strive to incrementally and consistently improve the user’s experience, dictated and driven by a constant stream of data.

So throw those cookie cutter solutions away. Pay attention to your users and be empathetic enough to design for the masses … not just yourself.

Effective branding and marketing are the outlays of solid processes. We've spent years honing and adapting our processes at every level of our work to provide them to our partners.

Process

Embrace iterative design, create better products

In most cases, landing on a broken link is a UX nightmare. The user is moving right along, exploring all that the site has to offer and 

! â¦ A brick wall – an ugly one at that, with “404” graffiti’d right on the front of it. It just feels so abrupt, so intrusive â Like a dead end to your otherwise seamless flow. But does it have to feel like that? If you plan ahead with good UI and empathy for your user, you can turn a bad user experience into a quick smile and encouraged exploration.

Ever hit a 404 page, only to be met with “Go back to exactly where you just were”? … They’re out there. Let me phrase it this way – Would you enjoy getting lost on a trail, only to hit a dead end and be forced to go back the exact way you came? Of course not. The internet is just a different platform for the same problem, except here you have the opportunity to carve out a solution. Users want to feel like they are making progress, it’s your job to help them.

Sidenote: You may even get lucky and have clients that are hilarious enough to pick up a chair and pretend to throw it during a photoshoot and you find that photo later down the road and think “This would be pretty funny to use here, but I don’t know if they’ll go for it â¦” And they totally go for it.

There’s nothing worse than getting an error modal. Ok, yes there is. Getting an error modal with an ambiguous message like “ERROR TYPE: 00000xCVnnn25” â¦ Because we all know what that means, right?

Simple solution here: Explain what went wrong and tell the user what to do next.

Some movement to add a little visual interest doesn’t hurt either.

So, what if the very first interaction a user ever has with your site is the 404 page? Not an ideal start, but see it as a challenge. Make the page enough to keep the user engaged and committed. Functionality still needs to take front-seat over aesthetics but if you can blend the two to create an enjoyable user experience with a concise and sensible flow, well, then you may have just won this battle:

Humor can take you a long way in life. Everyone loves to be happy and everyone loves to laugh. These can often be the fastest methods to putting a band-aid on a UX boo-boo. Deflating user frustration is not easy, but adding a splash of humor or some smoothed out edges to your interface really can go a long way.

Take for example the gem of a mobile micro-interaction that Apple utilizes when you reach the bottom of a page. Instead of an abrupt end, you get a little rubber band-esque snap back. This subtle but ever-so effective technique helps the user feel less frustratedâ¦ As does a duck butt:

Lesson learned: Mistakes happen. No one is perfect and no matter how awesome your site design is, people will inevitably type in a wrong URL from time to time. Instead of clinging onto false hope that this 

 going to happen, go ahead and make that page something you are happy for the user to see.

So go ahead and use that next 404 page of yours as a blank canvas for user engagement, brand awareness and maybe even a chuckle or two. A pleasant surprise beats a major inconvenience every time.

Custom illustration creates a unique, ownable look and feel to your brand - and helps to tell stories and express values that a photograph or block of copy just can’t.  We’re highly capable of creating styles and concepts that engage your audience. We have a number of highly talented artists on our staff that can draw out the best in your brand with inspired illustration.

Illustration

Content strategy is the delicate art of deciding what to say, when to say it and where to say it. Contemporary audiences interact with your brand on many different platforms at different points in their journey to becoming a customer. Through our user-focused content processes, we can help you make informed decisions on what to say, when to say it and where to say it.

Morgan Plappert

Journal Entries