Maggie Larkin presented this talk at the State Policy Network’s Annual Meeting in Nashville at the beginning of October. She was one of four panelists on the 15-Minute Comms Talk, which tackled organic social media, earned media, the platform Medium, and UX Design.

Let’s think back to what websites were when they first were invented. They were basically online brochures, a medium for print being put in a digital format. And as websites grew more complex and offered more than just your hours of operation and phone number, new rules arose from the website space. Suddenly, websites needed to be innately intuitive. Users have to be able to look at your news articles, your staff, portfolio, about page, donate page and be able to both find it all and take action.

So this new thing that none of us had grown up using needed to come as second nature to us. How? How can we do that? That question is one Engage deals with everyday and is the central question of User Experience, often shortened to UX. UX put broadly means human-centric design. Everything from kitchen utensils to doors and light switches can and should be designed with humans in mind.

In the world of the Internet, UX means building for your user. UX sits at the intersection of your user’s goals, your organization’s goals and technical constraints (things like time money and technology’s limitations).  It is the confluence of several different disciplines including content strategy, visual design, interaction design, functionality, information architecture and cognitive psychology.

We are going to look at how my team attempted to answer the question of “how do you design an intuitive website” for the the State Policy Network’s new site: SPN.org. We’ll also look at the latest web trends of 2016.

Tools

So before we even start designing or coding, we need to undergo discovery and information architecture which involves the following tools:

1. A creative brief outlines our goals, our audience and our design inspiration.

We needed to know what success would look like. The lovely folks at SPN told us what their users would want and which pages were going to be crucial. In our conversation we found four main actions SPN wanted to direct their users to take on their website:

• Find out information about the organizations that make up the State Policy Network.
• Donate.
• Register for the Annual Meeting.
• Read news about SPN and its affiliates and associates.

Also in the creative brief, we decided who were we building this site for. Our audience was donors and members. We characterized them by their different demographics, behaviors and wants. The last part of the creative brief was the inspiration. What would the new site look like? Our inspiration were sites like the New York Times, Five Thirty Eight, and Atlas Network.

2. A site map lists all the pages you’ll need for a website and their elements.

It boils the site down to tags, categories, and pages. Here on the left you see a portion of the site map and on the right, the corresponding final template.

3. A user flow, diagrams demonstrating how users will move through the site.

User flows are the way to display how these different pages that we established fit together.

4. Wireframes are the blueprints for a website.

Without color or stylistic design choices, we can start putting our work together and show our first visual display of site architecture. It establishes a visual hierarchy too. What is the most important on this page?

Goals

So what was important to SPN? What were those actions that they wanted their users to take and how did we build for them?

Action 1: Find out information about the organizations that make up the State Policy Network.
Solution 1: Build an interactive map that uses delightful animation to engage the viewer, without distracting from the information they seek. It’s a way to display over 130 different organizations in a clean way.

Action 2: Donate.
Solution 2: Build a form that breaks out the donation process into three steps, each manageable and bite sized for the user. This is much more mobile friendly and has proven to significantly reduce abandonment on the form.

Action 3: Register for the Annual Meeting.
Solution 3: A single section of the site, housing all of the information about the Annual Meeting without overwhelming the user—using tabs. And on every page, the Register button in the corner in yellow, drawing the user’s eye.

 

Action 4: Read news about SPN and its affiliates and associates.
Solution 4: Create robust filtering systems that allow users to find exactly what they are looking for. There’s a debate in the UX world right now about the role of dropdowns. If you’ve ever tried to use a dropdown that had 100 options or didn’t have the option you were looking for, you understand why there is this debate. Instead, here, we use the dropdown’s more sophisticated brother, a dropdown picker. Results narrow as the user starts typing, giving the user an experience not unlike Google or Kayak.

Trends and Good Ideas

We also applied some other trends we’re seeing across the internet—whether in the UX, design or development world—that are either best practices, good ideas or just plain cool. These include:

• Responsive: Responsive is huge. Can you view the site on different browsers? On your laptop, on your tablet—no matter the brand?
• Sticky navigation is when the navigation menu follows the user down the page so that they are just a click or two away from any other page on the site.

• Hybrid navigation bar: With the rise of mobile, you’ll see hamburger menus more and more. A hamburger menu is the three lines in the upper right hand corner. It allows us to put more information in the navigation even as screen real estate shrinks. With SPN.org we have a hybrid navigation, using both traditional and hamburger menu items. It shows the most important calls to action outside the hamburger menu which opens to show the rest of the site’s content. You’ll see three of those most important actions SPN wanted to concentrate on right there: the directory, Annual Meeting, and donate pages.
• Gradients: Full width content blocks and bold colors are in right now. The SPN homepage is a great example of this.

• Accessibility: Can it be read by screen readers? Can it be viewed by those who are colorblind? Our designers and developers focus on best practices in the web world so that everyone can consume your website.
• Delightful animation: Little design elements like this can produce pure joy in your users. Here the SPN buttons go from 3D to 2D and the search bar pops out of seemingly nowhere.

And in the end, all of these things come together in what SPN and my team are very proud of. And makes for a great website…if I may say. But it’s not just about my pride, it’s about accomplishing those four goals we outlined in the beginning and designing for the user.

What’s Next?

What’s next for web trends in the coming years? I am not sure. No one really is, but I do have some guesses.

• Incorporation of video: You already see this with sites that are using a full width silent video as their header image on their homepage. It’s definitely eye catching and visually stimulating.
• Interaction design: Whether it’s as simple as a hover effect or as involved as a site that visibly tracks your mouse at all times, the field is seeing more emphasis on interaction design. I also think that wearables will increase interaction design. How does your computer get your attention? For me, it’s usually a notification panel and maybe a noise. How does your phone get your attention? For me, with my phone on vibrate, it’s usually a slight buzz in my pocket. How might your smartwatch? More wearables might mean different sets of user interactions.
• 3D touch: for most phones, there is only one action you can take: a touch—either tapping or swiping. But now iPhones can pick up on how much pressure you’re using to touch the screen. This opens a whole new host of gestures. The ability to tell how hard you are pressing is also available in trackpads so I think we could see this on laptops and desktops as well.
• Rise of the voice input: You may fight with Siri a fair amount or maybe you have an Amazon Echo. Perhaps you have one of the new voice remotes for your TV. As this technology gets better, I think we’ll see the rise of interacting with our devices through voice.
• Continuation of a visual language with design patterns: I think 15 years ago, not many of us would have recognized a hamburger icon. Design patterns—like the ones Google and Apple have developed—help users find things quickly and make sure that designers aren’t constantly reinventing the wheel.

Some of these will pass and some might be incorporated into our everyday habits until the next generation will laugh at us for the way we used to do things. UX, however, is not a trend. It is the thing that will give some of these new ideas staying power. Whatever the future brings, you can bet we’ll still be testing sites. We’ll be writing creative briefs and site maps and user flows. And if a new trend can withstand the test of millions of humans using it and adopting it, then it becomes more than just a trend—it becomes human centric design.