In the last 25 years, business websites have evolved into powerful interactive hubs where users go for far more than brochureware. And as COVID-19 has shown, they are also now the front doors to organizations. Along with social media, they are often the first or only means of interaction people have with a business so, your website's experience better be on point. If it's not, the good news is it's never been easier to learn what it takes to build a good experience for your users. I recently completed a UX research project on ctwoodlands.org, the website for the member-based conservation nonprofit Connecticut Forest and Park Association. Check it out to see one approach for quickly getting the insights and direction you need for a successful redesign.
Usability is the measure of how well a person can use a product to achieve an intended goal. In a previous post, I talked about how usability testing should be a key part of any iterative design process, preferably being implemented as early as possible to identify design problems. But usability testing is also an important tool to evaluate existing products before you ever sit down at the drawing board to devise a change or new design.
How do you test something that doesn’t exist? The obvious answer is to build it. But what if it’s difficult, time-consuming, and/or expensive to build? You don’t want to risk wasting resources on an untested idea. A common approach that user experience designers (UX) use in such situations is Wizard of Oz studies.
Redesigning a website is usually about making its experience better. But change doesn’t guarantee better, just different. This is why user experience (UX) designers focus so much on user research. The more you know about user needs, as well as business and other requirements, the more you can eliminate some of that uncertainty about the impact of a new design. However, you will never know for sure how a design choice will perform until it's used with real users in real life. This is a nerve-wracking reality. A UX designer nor most project stakeholders are comfortable taking the risk of just changing something and seeing how it goes. Enter A/B testing.
If you’re familiar with user experience (UX) design, then you understand the benefit of user research. It helps you empathize with users, evaluate usability, and determine the user requirements of a project (Baxter, Courage, & Caine, 2015). But what if I told you user research can have another application that can be just as vital to the outcome of a project as user empathy?
Having completed my journey through Animated Storytelling: Simple Steps for Creating Animation & Motion Graphics with advice on how to network and market your work once it's done, I decided to take on building the types of content that sparked my exploration into animation in the first place. See and learn how I built a branded social media PSA on voting and a series of accompanying GIF stickers using the full spectrum of Blazer's book, research examples of advanced and interesting animation techniques, and my experience from my past 6 posts on motion design.
Animating user interfaces can help users and offer them a better experience, but in doing so these animated elements are made to feel so natural that we often don't consider that they can be complex to design well. For this post, I've taken the general advice from Liz Blazer's Animated Storytelling: Simple Steps for Creating Animation and Motion Graphics and applied it to UI animation. Combined with research examples, I was able to create a looping sequence of UI animations for my previously developed Milford Resident App prototype.
Whether your project is an animated feature or motion graphicsfor corporate marketing, making the right decisions about how you'll construct your piece is key. I combined advice on how to choose an animation technique and style from Liz Blazer's book Animated Storytelling: Simple Steps for Creating Animation and Motion Graphics with research on Disney's 12 Basic Principles of Animation to create 2 logo stingers.
After completing pre-production work for 2 stop motion animation ideas in my last post, I continued on to production and post-production for one of them. With guidance on sound choices and establishing consistent rules for a story’s world from Liz Blazer’s Animated Storytelling: Simple Steps for Creating Animation & Motion Graphics, I brought to life my linear story idea titled “A Bigger Purrr-pose.”
With advice on color choices and experimentation in animation from Liz Blazer's Animated Storytelling: Simple Steps for Creating Animation & Motion Graphics, I began the pre-production process of creating a stop motion animation. In this stage of development I wrote pre-production summaries for 2 original stories (one linear in structure and one non-linear), drew storyboards, and shot a stop motion test to familiarize myself with the technical process.
Cinemagraphs are a recently invented and popularized form of a seamlessly looping GIF or video in which still photography and video are combined to make a dynamically interesting visual that tells the story of a moment in time. With tips on how to craft a good animated story from Liz Blazer's book Animated Storytelling: Simple Steps for Creating Animation & Motion Graphics, I've created 4 brief motion stories from a day in my life in the form of cinemagraphs using Adobe Photoshop and After Effects.
Animated GIFs have become a popular digital content type for both personal use and brand marketing. See how I researched this content type and applied Liz Blazer's 6 steps of pre-production work from her book Animated Storytelling: Simple Steps For Creating Animation & Motion Graphics to create 3 different styles of summer-themed GIFS for marketing purposes using Adobe Photoshop and Animate.
I finally got around to that “someday” task of taking a deeper dive into web development than just the hunt-and-peck-through-code-that-I-didn’t-know-how-to-read approach I’ve been using for the last 5 years. I figured this experience would confirm or deny once and for all whether my interest was genuine or a novelty. What I found is that learning how to build a website provided me with more than just a new skill.
So, you want to build a website, but you don’t know where to start. I have good news. Even though web design can be an intimidating process that requires technical and creative skills, you don’t always have to start from scratch. You can decrease the intimidation factor and even maybe decrease time and cost requirements of a website build by starting with a pre-built template.
You’ve heard the acronym SEO. Maybe you know it stands for search engine optimization. And you’ve likely heard something to the effect of it being the unicorn strategy that will magically flip the script on your struggling website, improving its discoverability and effectiveness a hundred-fold. But what exactly is SEO and how does it work?
When you think about blogging you probably think about writing something, but a good blog can be about so much more. Images, videos, social media, and other functionality can support your posts and more deeply engage your readers. And the great thing about the WordPress content management system is that it makes adding these elements a snap. Let's look at some examples of the more common functionalities you might be interested in adding to your blog.
Designing and building a great website is never enough. You also have to make sure people are aware of your site, want to go there, and, once there, want to stay or come back later. There are many ways you can drive traffic to a website. Good content and search engine optimization (SEO) are 2 ways that account for driving a majority of traffic to most sites, But let’s look beyond these efforts to 5 other opportunities.
As the mobile revolution developed over the last decade, designers and programmers suddenly had to worry about supporting an ever-increasing list of devices and screen sizes. At first, the solution seemed to be to design unique experiences for each, but a leading school of thought has become designing one site to rule them all, or responsive web design. This creates a seamless cross-device user experience and future-proofs designs.
Users always have a need for speed. Think about it. Have you ever thought, “I wish this webpage would load slower?” And it’s not just because technological advances have skewed our expectations in favor of the fast lane. We rely on the internet more now than ever to provide basic information and services. But economic inequality or geography means users are accessing these on devices and networks with a wide spectrum of speeds. To build webpages to perform as identically as possible in all conditions is to show care and consideration for all users. One of the biggest impacts you can make on load speed is optimizing your images.
Semantics is the study of the meaning of words and in computer language making something semantic means using terms that both humans and machines can discern the meaning of. If you look at any chunk of HTML, you can easily identify terms that have no immediate meaning outside the language. HTML semantic tags more clearly describe the content within them, making webpages more accessible.
If you want to start learning how to build websites or web apps the most basic thing you need to understand is that HTML is the standard language of the internet. Learn about the structure of this language and the process from writing your first HTML document to using it to make a webpage come alive online.
Building a website is not just about deciding how it’s going to look, how it’s going to function, or what content it’s going to contain. You also have to decide how you’re actually going to build it. When building a website, you have 2 general directions you can choose from: hand code or use a content management system (CMS). There are pros and cons to both directions so one is not necessarily better than the other. You must evaluate your situation and decide which one works best for your needs.
A key component in your website’s feel, and some might argue the most readily noticeable, is color. We all have a favorite and before we can even read, we’re taught names and cultural associations for each. But choosing a color palette for a website that inspires the right emotions and works well with existing branding or content can be a challenge.
You should design your website to evoke the emotions that you want users to have, ones that make them have a positive opinion of your brand or content, and that motivate them to take actions you desire. Mood boards help with that. Mood boards are physical or digital collages of images, icons, typography, colors, patterns, textures, and other design elements that together speak to the intended mood you want to set with your visual design.
Like architectural blueprints, wireframes depict the structure of a webpage but not the visual design elements of it. You can learn the layout of content blocks on a page, the types of content a page will contain, and some of the basic functionalities of a page from a wireframe.
Designing the bones of a website is the focus of an area of UX design known as information architecture (IA) design. IA design is about creating a structure on a website that helps a user understand where they are in the site and where they can find the information they are seeking. Information architecture is visually represented using a sitemap.
Users’ attention spans are short. They make judgments they may not even consciously realize about websites in seconds. Every element of a website’s design works in coordination to sway those judgments negatively or positively. There’s an overwhelming list of elements to consider for web design, but to be helpful I’ve highlighted the following 8 design areas I think are important to offer a good user experience.
Websites are like living creatures. We’re constantly interacting with them, updating them with new content, and making technological and design advances that shape our expectations of them. Knowing when it's time then to redesign a website can be tricky. Learn how I identified what needed updates on my WordPress blog one year after starting it.
Having strategy for your brand on social media is always important, but when you have a specific goal you'd like social media to help you achieve, it becomes vital. I've previously posted about how to determine a small business' social media presence, create a calendar, build personas, and write community management guidelines using one of my favorite businesses, Scratch Baking in Milford, CT. Based on this work, I've created the following slides and presentation outlining a social media strategy they could use
Whatever the business-related goals of your strategy, you need to focus on the user-centered goal of bringing value to your audience through your social media presence. By empathizing with your audience you will build content that will make your brand more relatable and more trustworthy which will ultimately translate into brand awareness, website traffic, customer leads, revenue, brand engagement, loyalty, or success with any other goals you may have. Personas are good tools to help you start building a social media strategy with empathy.
In my last post, I explored how to decide the social media presence for a small business using one of my favorite small businesses – Scratch Baking in Milford, CT. Now it’s time to activate that presence. It’s time to plan and create content. No matter how strategic you are in choosing your business’ social media platforms, that will mean nothing if you’re not strategically and regularly creating engaging content for them.
Small businesses can face challenges such as human and financial resource shortages when trying to access the benefits of social media. With little money to pay someone to focus on this for them and little time or energy to do it themselves small business owners sometimes don’t even know where to start. Using one of my favorite small, local businesses – Scratch Baking in Milford, CT – as an example we’re going to walk through how to approach evaluating and planning your business’ social media presence.
The sheer amount of information social media now presents us to digest is enough in and of itself to overwhelm us in to being less discerning about the truth. Add into this mix every individual’s opinion and the voices of those interested in misleading others or sowing division and social media becomes a very chaotic and confusing source from which to get your news. I decided to find out just how much of a filter I had to apply to find factual news on my social media accounts.
The COVID-19 pandemic has changed our daily lives, perhaps forever, in countless ways we are still trying to grasp. But as a social media professional I’m acutely interested in how this crisis is affecting the medium I work in. What I’m seeing is the possibility that we are moving into a new phase of our relationship with it.
There comes a time in every project when an idea transitions from conceptual to actual. In website and app design that time generally comes during the prototyping process. Prototyping can be done in a range of fidelities, or levels of detail, from low to high. Low-fidelity prototypes can be a great tool for quickly iterating design ideas and starting usability testing early in your design process, but the type of experience they offer is quite removed from a product’s endgame. High-fidelity prototyping is when things start to feel and look real.
Good, usable design comes from an iterative process in which you create and revise designs in repetitive cycles, coming closer to the desired result with each cycle. One of the best ways to learn how a design needs to be revised is usability testing. Many development process eliminate this important step or leave until the final product is built for a number of reasons. Learn how I used the Prototyping on Paper app and Zoom to push forward with usability testing of paper prototypes for an app I'm designing despite the social distancing restrictions of COVID-19.
Flowcharts are a common tool used for a variety of purposes in a variety of industries, including engineering, business, and education. UX designers create a type of flowchart called a user flow to depict and communicate the process of user movement. User flows utilize the same symbols as flowcharts in order to represent every route users can take to achieve a specific goal on a site or app. See how I've developed user flows for a proposed Resident app for the city of Milford, Connecticut and how these charts can improve user experience design.
Information architecture (IA) design involves creating an organized structure in a website, app, or product that helps users navigate and understand where to find what they need easily and quickly. Hear about my experience creating a proposed site map for a resident companion app for my hometown and find out how and if designing IA for apps differs from websites.
What else is a website or an app, but a container for copious amounts of information like a library? Left unorganized or badly organized, a website experience for a user can quickly become consumed with simply trying to find what they want instead of accomplishing their intended goal for visiting. Information architecture (IA) design is about creating a structure on a website, app, or other product that helps a user understand where they are in it and where they can find the information they are seeking.
What if there was an app for centralizing and connecting those in our communities with resources and will to help with those in need? So many of us are ready and willing to help our neighbors and local communities, but we just don’t know who needs help and where to look all the time. Our efforts often siloed by our social circles. I decided to do some ideation on this problem of how to crowdsource a community to see if I could spark the beginning of an app solution.
There are an endless number of ideation techniques you can try. You should pick one, though, that works best for the kind of ideas you need and the experience and abilities of those who will be participating in your ideation session. My current abilities, being the frazzled mess that they are because of the current pandemic and social distancing, called for a technique that could help me get my perspective and spinning thoughts in order: mind mapping.
To be a UX designer is to understand the holistic picture of an experience while simultaneously paying attention to minute details in the pursuit of identifying and solving problems. Whew! Approaching this subject may seem overwhelming or intimidating at first, but good UX design is an invaluable asset for a product, service, or brand. That’s a tall order. No matter your project, to create a good user experience you must understand some of the key principles of UX design.
For businesses, it’s important to know the points in a user’s journey that they influence or need to consider in order to provide the best user experience possible. Journey maps are a great visual and shareable tool for understanding this important information.
Knowing where to start is the hardest part of any project. In the design thinking process, you spend a lot of time learning to empathize with your users through research, then properly defining the problem that your project needs to help them with. At some point, though, you have to pivot your brain to put all this understanding and definition to use. Luckily, there are ideation techniques that you can employ to add guidance and structure to your efforts, sparking creativity and innovation.
One of the obstacles to good ideation is that people often practice it in a haphazard or chaotic way. Everyone today likes to talk about the value of brainstorming, but they often think of it as unstructured imagination that magically and randomly produces ideas. Effective ideation requires that you stop thinking in terms of these amorphous activities and instead apply a rigorous and purposeful set of rules to your efforts. One technique to help guide you in brainstorming is mash-up ideation.
Being a UX designer is, of course, about designing a solution to a problem that users of a product or service have. It can be really fun and exciting to brainstorm, come up with new ideas, and maybe even change the world. But if you base all your work on the wrong problem, you won’t change anyone’s world with your designs. This is why you use a tool like point of view (POV) statements to add rigor and structure to your problem definition.
You can’t solve a problem you don’t know about. Seems like an obvious concept, right? But too often we don’t follow this advice. We assume we know what the problem is going into a project and just jump straight to coming up with solutions. To find out what users need, you spend the first stage of the design thinking process conducting research - often in the form of interviews, observations, and surveys – in order to empathize and better understand the needs of all users in a product’s ecosystem. Your research findings then inform the second stage of the design thinking process, define, and help you craft your project’s problem statement.
No one website, app, or piece of software can cater to the infinite number of differences its users may have. You simply can't design everything for everybody. You can, though, look for the common denominators in people and solve for those problems. While a website may have a million users, each with a unique experience on the granular level, you may create just 3 or 4 personas into which most of them would relate in some way. You would do this in order to keep your project user-centered, but out of the weeds and focused on attainable goals.
By using empathy, a UX designer can recognize people’s needs and design products, services, or experiences that work for them. The reality show Undercover Boss is an example of how someone can gain empathy for users. I watched an episode featuring the CEO of Build-A-Bear Workshop to show just how much user information you can gain in a relatively short amount of time. My empathy maps of the company's CEO and an employee demonstrate how multiple people can have different experiences, even within the same company, and why UX designers must gain insight into every type of user in the ecosystem of a product or service.
Empathy is about putting yourself in someone else’s shoes and trying to understand their feelings, even if you haven’t had the same experiences as them. It's an important part of the design thinking process. In order to gain empathy for users, UX designers conduct extensive user research. Empathy maps are a great visual tool for organizing, communicating, and synthesizing this research into helpful user insights.
Social media has given everyone a voice and in doing so the general public has taken control of the conversation. Some businesses, used to having all control over their brand narrative, may find themselves lost as to how to effectively operate in this space. Instead of saying “why bother” or, worse, futilely moderating your social media presence within an inch of its life, effectively killing all authenticity, you should place your brand as the steward of your brand community by creating community management guidelines.