Matrix Group International

Tag: Web Design

Web Design Can and Should Be CMS-Agnostic (and why we love WordPress more and more)

Here at Matrix Group, we use a variety of platforms and frameworks to build client applications. On the content management system (CMS) side, we really like Sitefinity and WordPress for building websites, although we have worked with other platforms, including DNN, Expression Engine, and Kentico. WordPress has come a long way in recent years, and we’re doing more and more with it. We love its flexibility, extensibility, and clean code, to name just a few things.

During a client meeting the other day, I was pitching doing a magazine website in WordPress. The client was surprised and said, “WordPress, the blogging CMS? Isn’t that too simple for our needs?” I explained that no, WordPress has come a long way, it powers so much of the web these days, and it is perfectly capable of the complex functionality she needs. She countered with, “So show me a site that you did in WordPress that doesn’t look like a WordPress site.”

So I did. I showed her Endocrine News, the magazine of the Endocrine Society, the website for e-discovery firm eTera Consulting, and a convention site for the National Electrical Contractors Association.

But then I got curious. Does my front-end team design differently based on the CMS platform? I asked my Creative Director and Senior Designer, “Do you take CMS into consideration when creating designs?”

The response: “Heck no, half the time, we don’t even know the platform that will be used.”

So then I asked my Lead Front-End Developer, “Does the CMS platform affect what we can and can’t do?”

The response: “Nope. Some things are easier in WordPress, other things in Sitefinity. Just depends.”

I know I’m involved in many Information Architecture projects, and I no longer wonder if a platform can do something I’m envisioning in a wireframe.

I hadn’t really thought about it but it appears we are now CMS-agnostic when it comes to designing the front-end of our websites. Does that mean every CMS can do everything? Probably, at least in the arena we play in. But we definitely express favorites, and choice of platform can affect HOW a specific requirement is implemented, as well as price and timeline.

Makes me think of a wise client who said to me some time ago, “Joanna, I don’t care what system you use to build my site, as long as it does what I want, it’s easy to use, and you can maintain it easily.”

January 22, 2016
Applying Information Architecture and Design Principles to Life

I opened up a mailing from our 401(k) provider and was overwhelmed by the tiny type and the options available as investment funds. Ugh. I decided to call my financial planner instead.

I was driving around in a parking garage and as usual, I fretted that once parked, I would never be able to find my car again.

At a conference last December, I felt really stupid because I couldn’t seem to find my way around the property. It took me five minutes of doubling back before I finally found the registration desk.

Sometimes, I just want to scream and say, “Don’t you guys ever think about your customers? Did you think to test of any this stuff?”

Whether you design parking garages, plan hotel spaces, design print mailings or build websites, I believe the same wayfinding principles apply.

The Power of 7. All the research shows that when presented with options, most people can’t process more than 7 pieces of data. When designing websites, for example, we try to limit navigation options so people don’t get lost.

Multiple Ways to Wayfind. I was in a parking garage in Alexandria today and was happy to note that the garage used numbers, good signage AND color coding to help me figure out where I actually parked, which was B1, yellow. One of my favorite garages in Bethesda has 4 doors to the garage from the elevator lobbies. Each door has a symbol (train, sailboat, etc.) The last time I parked there, it was easy to remember level B4, train door because I have a 4-year old who like trains. 🙂

Make Your Groupings and Sorting Recognizable. When I go to a department store, I like it when I can find all the jeans in one place. I don’t want to have to go to the designer section, the urban chic section, the hip mom section, yada, yada. If it makes sense to group your content or objects multiple ways, allow for navigating different ways. One client has a print directory of members that you can navigate by chapter, type of work and company name. Online, you can sort by all these fields and more. Nice. Remember that an alpha sort is not always the best way to organize information.

Legibility Matters. I appreciate websites with large navigation and fonts. I love print brochures and web pages that are easy on the eyes because the font is larger, there are lots of sub-heads, and images tell some of the story. I like road signs that aren’t tiny or obscured by shrubbery.

Test With Real Users. Give customers a chance to tell you about your product and you’ll get valuable information. I sometimes walk around a building and think, “Really? Did you ask anyone if they could find anything?” Give your users real tasks, ask them to perform the tasks and give you feedback on what worked, what didn’t work and what wasn’t clear. You’d be amazed at what you learn.

Okay, so enough ranting. I’m an Information Architect at heart and I wish more people thought about information architecture and user-centered design when designing… well, anything.

July 15, 2015
Why Should You Hire an Agency to Redesign Your Website?

Every once in a while, I hear from a prospect who says his organization is considering redesigning their site and they’d like to do the design and CMS implementation on their own. They either want to use in-house resources or they intend to use an off the shelf template for design and styling.

Sure, this can seem really cost-effective, but is it really the best solution? On the flip side, does it pay to pay an agency to handle your redesign?

When you hire a great agency, you’re getting the best thinking from strategists, designers, front-end developers, developers, SEO managers, and content experts. There’s no way that a WordPress theme you purchase for $49 can give you all that. And most organizations’ can’t afford to have all those resources on staff because they’re pricey and they don’t need them full-time for an ongoing period of time. For the cost of one really great staff person or half a person, you get the combined talents of 5-7 talented professionals for a concentrated period of time.

What’s more, a great agency gives you the benefit of this great team of people working together to give you great results. When Matrix Group designers are working on comps for a client, there’s always an internal review to discuss compliance with the specs, implementation pros and cons, impact on SEO, and usability.

Finally, a great agency goes beyond the templates and the programming. They help you develop the powerful content that will ultimately bring search engines and real visitors to your site. Off the shelf templates and themes never do this for you.

I have a good friend with whom I share a fabulous hairdresser. Eileen always needles me that I argue too much with Crystal. She says, “you want your clients to take your good advice about web design coz you’re the expert, right? You should do the same with Crystal.” Touché!

January 28, 2015
Just Say No! to Stock Photography
Here’s an example of an image that is clearly a stock image. Do these people look real to you?

Whenever I meet with clients about their websites, the conversation inevitably turns to the topic of stock photos. Most companies are photo challenged, so they ask us to help them find good stock imagery. My answer? Just say NO! to stock photography, especially of people!

I feel hypocritical even writing this blog post because this blog is full of stock images. Heck, I’ve even blogged about Matrix Group’s favorite stock image websites.

So when and why do I encourage my team and my clients to say NO! to stock photos?
- When the web page is about a place or an idea, then I think it’s okay to use stock images. You can use a stock image of New Orleans, or use a stock image to convey an idea, like food safety or computer security. Of course it’s preferable to use your own images, but you almost need to be a pro to develop photos of concepts or ideas.
- But when the page or website is about your organization and what you do for your customers and members, it’s best to use images of your own staff and customers. Otherwise, it’s like bringing a fake boyfriend to a wedding; the relationship isn’t real! (I know I’m going to get in trouble for this analogy.)
- When you are talking about what you and your employees do and stand for, the pages just ring false when you use stock images.
- When talking about your customers, who they are, and why they matter, the pages lack credibility because you are using other people’s customers! And God forbid the image you chose winds up on a competitor site!
“But Joanna,” you say, “it’s hard to get good images of real people, my staff, my customers, my partners.” Yes, I totally agree, but I absolutely believe the effort is worth it. Here are some tips for developing a stock-free mindset.
- When you can, hire a professional. We recently hired a pro to take photos of the staff and office. We wanted a collection of photos to use on our website, our proposals, and social media. We compiled a list of the shots we wanted (head shots of senior staff, meetings, lunch, etc.) and we made sure we owned the images outright so that we can use multiple times on different platforms.
- For the times you can’t hire a pro, invest in a good DSLR camera. There are really great DSLR cameras for under $1,000. I absolutely love my Lumix camera, which I purchased about three years ago for $899. This camera made our Creative Director wonder if I had recently taken a photography class because my photos looked worlds better once I started taking photos with my Lumix.
- Have your camera with you at all times and take lots of pictures. I believe that if you take enough photos, you’ll take at least a few good ones. Moreover, a good designer can take an okay photo and make it better through cropping and touching up.
- Learn the principles of taking good photos by taking a class, reading the manual and reading blogs. Even a few tips can help you take much better photos. For example, I learned a long time ago to get close and to frame my photos so that people aren’t smack in the center of the image. Here’s a great list of photography blogs.
Matrix Group is in the midst of a website redesign. (It’s amazing how painful it is to design a website for your own company.) Creative Director Alex Pineda said, “there will be NO stock images on this site.” So the team has gone about making it so. The images will not be perfect, but in a sense, that’s the beauty of using real people: you can tell they’re real precisely because they are not perfectly dressed, made up and staged.

I hope I’ve inspired you to take the NO stock photos pledge, at least on company pages where you should really be showcasing your staff, customers and partners.
April 24, 2014
When Is It Time to Implement Responsive Design?

A few weeks ago, I conduced a webinar on implementing a “Mobile First” strategy. By mobile first, my co-host Alex Pineda and I mean a strategy where you consider the needs of mobile users first. Why? Because mobile usage is growing faster than desktop usage, because mobile usage is greater than desktop in some countries (like India), and because designing for mobile (especially smartphones) is harder than designing for tablet and desktop. During the webinar, a big topic of discussion was, “When is it time to implement responsive design?”

My answer to this question is: NOW. Here’s what I usually hear from prospects and clients.

Objection #1: “My mobile traffic is tiny.” This might be true today but mobile usage is growing really fast. More importantly, every single one of our client sites that went responsive is now seeing huge increases in mobile usage, with mobile now representing double digits. This tells us that visitors keep coming back when you reward them with a great mobile experience.

Objection #2: “Responsive is expensive to implement.” It’s true that responsive can add up to 20% more to the overall design and implementation budget. Whenever we can, we use wireframes and designs to explore ways in which websites should look and behave differently on different devices, based on the tasks we believe users need to accomplish on said devices. These discussions, the development work and the testing are often labor-intensive. The good news is that most CMS platforms (we like Sitefinity and WordPress) make it much easier to implement responsive design. In fact, if budget is limited, we can implement default responsive templates. So please don’t let budget stop you from going responsive with your website.

Objection #3: I’ll wait until our next redesign.” While it’s tempting and certainly easier to embark on responsive when you’re in the thick of a redesign, unless your redesign is happening right now, I don’t think you should wait. Can you really ignore the needs of the 25% mobile-only audience and the 22% market share of mobile devices for overall traffic?

Objection #4: Search isn’t that important to my online strategy. Even if you think your target audiences won’t look for your products and services via search, you can’t ignore this statistic from Search Engine Journal: 93% of all Internet traffic starts with search. Further, Google is demoting sites that aren’t mobile-friendly because 25% of search clicks are from mobile devices, and climbing.

If you’re still not convinced, just look at your own mobile device usage and think about how wonderful it is when your favorite news or retailer site has a great mobile site and you can do what you need on a phone or tablet.

It’s time to go mobile. It’s time to go responsive.

October 23, 2013
What Happened to My Button? How iOS 7 Will Influence Web Design

I upgraded my iPhone to iOS 7 over the weekend and immediately realized why the Internet is buzzing about this OS upgrade. I did a webinar last week on mobile strategy and one of the attendees asked, “how will iOS 7 affect web design?” Once again, it seems Apple is leading the way and creating a new aesthetic for good mobile design.

After playing with iOS 7 for a few days, here’s what I’m realizing the following:

iOS 7 celebrates flat design. In a recent SnackOClock post, Matrix Group Creative Director Alex Pineda pronounced the death of skeumorphism. Wikipedia defines skeumorphism as “an element of design or structure that serves little or no purpose in the artifact fashioned from the new material but was essential to the object made from the original material.” Check out the new iMessage interface below. The buttons are all gone! The only things distinguishing Messages from Richard and Contact are color and position. Even Send at the bottom of the screen is just simple text! Apple is basically saying, “you know what this navigation means, we’re not going to use beveling and gradients and such to tell you that something can be clicked.”

iOS 7 is encouraging the device and the OS to get out of the way and let the content shine. For example, when I browse a website in the new Safari, back and forward buttons are gone as well. I can swipe to the left and right to visit previously accessed pages.

Mobile design trends will influence web design overall. It used to be that mobile design came after desktop and now mobile and desktop are on equal footing when it comes to designing a user experience. In some cases, I’m even recommending that clients design for mobile first so mobile will set the tone for the overall experience. However, desktop and mobile can’t be the same because think about it: on a small screen, you’ve got to be very focused with your design. On a large screen, there’s usually a lot going on so we will probably always need skeumorphic elements to create focus and paths through our websites.

The Apple Developer website says iOS 7 embodies the following principles:

Deference. The UI helps users understand and interact with the content, but never competes with it.
Clarity. Text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design.
Depth. Visual layers and realistic motion impart vitality and heighten users’ delight and understanding.

Pretty fancy language and if I just read the above, I’m not sure I would understand it. But after playing with my iPhone for a few days, I think I get it. Next stop, upgrade the family iPads (we have 3!).

October 2, 2013
Who Should Be In Charge Of Your Redesign Project?
So your organization has decided to redesign its website. Who should be involved? Who should be in charge? And who should make the decisions? I get these questions a lot from senior executives who want to know how to structure their web team, who should be ultimately responsible for the success of the project, and how much staff time should be allocated to the effort.

Who Should Be Involved?

Since websites represent your organization online and visitors expect to interact with all departments, it makes sense that there be involvement from throughout the company. But how to achieve this without creating committee gridlock? My recommendations are:
- Invite as many people as you can to the kickoff meeting. The kickoff tells the whole company that the project is happening, what you want to achieve, and that you need their help. If possible, the CEO or someone suitably senior should be in attendance; this will let everyone know that the project is important and they should pay attention.
- Arrange to interview at least one person from every department, functional group or constituency. These interviews will give you valuable insight AND build support for the project.
- Don’t involve a large group in the day to day workings of the project; this will only slow you down. Do, however, arrange for periodic reports to your larger web team. You don’t want someone, somewhere, bringing the project to a screeching halt because you “didn’t talk to them” or you didn’t keep them in the loop as you made decisions.
- Ask for volunteer beta testers. You will likely not get a lot of volunteers but the ones who do volunteer will be motivated and proactive, so get their help!
Who Should Be In Charge?

This is a tricky issue. Some organization put IT in charge, while others put Communications, Marketing, Customer Service or Membership in charge. I think it’s a mistake to put IT in charge. Yes, IT will have the most facility with the technologies, but putting IT in charge of a redesign is like putting IT in charge of your membership marketing or print materials because they involve databases and computers.

At Matrix Group, our most successful projects have been ones where:
- There was a trio in charge, each representing an important constituency: subject matter experts, IT and senior leadership.
- or IT was in charge of the process but subject matter experts were heavily involved and made the final decisions.
- and the project manager on the client side was well connected in the organization, well liked, ran a great meeting, and able to help groups achieve consensus.
- and there was high level senior sponsorship of the project. These senior staff members kept the senior leadership team informed and paved the way for resources from throughout the organization to be made available to develop content, test the website, etc.
Who Should Make the Decisions?

Another tricky issue. The answer is usually “it depends on the decision to be made.” In our experience:
- It works well to get buy-in from a larger group when discussing navigation and content elements.
- It works well to have the larger web team review and approve the overall design direction, copy writing style and content strategy. It’s really, really important that the *entire* organization be on the same page here.
- The CEO or Chief Marketing Officer (or equivalent) should make the decision on the design and copy writing direction. And it’s always a good idea to brief the CEO and senior leadership team at regular intervals during the project.
- The smaller web team should make the hundreds of decisions about layout, content placement, search, etc. Getting a committee to agree on these minute details will make the site build process torture.
- Give each department the final say on their portion of the website, as long as their changes fall within the overall design parameters of the project. Which means GR or Convention can’t decide to use a different font or color palette.
How about you? Who do YOU think should be in charge? What has worked for your organization?
August 7, 2013
No Mobile Strategy? Your Website Could Face a Google Demotion!
Psst, want to know a secret? The world isn’t going mobile, it’s already mobile. Check out just a few statistics. In India, mobile traffic has surpassed desktop traffic. Google reports that 25% of paid search clicks are coming from mobile devices. The Pew Research Center reported this month that 34% of Americans aged 18 and older own a tablet computer.

So it came as no surprise to many of us when Google announced “Changes in rankings of smartphone search results.” In describing the most common configuration mistakes that companies make, Google let the world know that if your website isn’t mobile-friendly, you’ll get a demotion in search rankings. When you consider that mobile searches are an increasing percentage of total Google searches, and Google stays at the top of the search food chain by presenting good results, it makes sense that Google would demote sites that have faulty redirects, show blank mobile pages, aren’t optimized for a mobile device, etc.

In this article, Google describes the 3 ways to build smartphone-optimized websites: responsive design, serving different CSS based on the use agent (desktop, smartphone, etc.) and separate, mobile sites. It’s important to note that Google’s recommended configuration is responsive design. Why?
- Using a single URL for all content makes it easy for Google’s search algorithm to assign proper indexing properties for the content
- No redirects are needed
- Google crawlers need only visit a website once to index the content
Here at Matrix Group, nearly all of our designs and redesigns are responsive. We think it just make sense to change the user experience based on the visitor’s device. And because users never have to remember multiple URLs, visits across all types of devices are encouraged. In fact, across the board, we’ve seen mobile traffic to our client sites soar after the sites were redesigned and made responsive.

So, what’s your mobile strategy in 2013? And what are your plans for making your website responsive?
June 27, 2013
Why Are Infographics So Hot?
Version 13.2 of MatrixMaxx was released last week and it had several notable, new features related to visualization. The first is an infographics builder that lets clients chart meeting registrations against membership data and individual demographics. For example, a client might chart meeting registrations by member type, job level and job function. The second is a dynamic mapping feature that lets clients take a data set and map it. Let’s take the meeting example again. Clients can now push a button to see the spread of meeting attendees across the US.

Why this emphasis on visualization?

I believe that in this age of big data, we’re drowning in statistics and reports, but we’re starved for insight and trends (sorry for the mixed metaphor). Our CRM (customer relationship management) and AMS (association management software) systems are tracking all kinds of demographic data and transaction history but what are we really learning about our customers?

If I have a list of 1,200 meeting attendees, organized by last name, company or state, I have a roster. A report that gives me total attendees by state will show me where my attendees are coming from. If I plot that data on a map, I might learn that most of my attendees are coming from the coasts or the southern states. Now imagine if I took the same list and plotted it against industry, type of business, job level or number of plants, what would I learn that isn’t at all obvious from looking a list of attendees?

Ever notice how your boss or your Board is always asking for charts and graphs? It’s usually because they’re cold on an issue and summary data, along with visualizations, can give them the 20,000 foot view they need to make strategic decisions.

Here are some example of amazing visualizations that tell a great story:
- The State of the Internet shows us how far we’ve come, how much time we spend online and where that time is going. http://www.pcmag.com/article2/0,2817,2413424,00.asp
- Method, a design and branding agency, mined Google to figure out what consumers were searching for when looking for a tablet, and created a consumer interest infographic to display their findings. http://www.fastcompany.com/1790942/infographic-day-what-do-people-want-tablet-computer
- 512 Paths to the White House shows what outcomes President Obama or Mitt Romney would have needed to win the 2012 election, and the ways they could win. http://www.nytimes.com/interactive/2012/11/02/us/politics/paths-to-the-white-house.html
- The AIDSVu project uses infographics to highlight the impact of the disease on specific populations, e.g., African-Americans or Latinos. http://www.aidsvu.org/national-black-hivaids-awareness-day-2013
My prediction: infographics and visualization tools will continue to grow and dominate our thinking and analysis.
April 17, 2013
Just Like a House, Your Website Needs Cleaning and Organizing Every Week

My husband and I bought a new house last summer. It’s taken us over a year to get every single box unpacked, find a home for everything we own, decorate, and put in the finishing touches that make a house a home. We’re not done but I’m definitely losing steam. Maki is sick of hanging pictures, the boys’ rooms look nice but they’re missing wall shelves and curtains, and and the garage is in much better shape but we still can’t park both cars inside.

Here’s the rub: the house looks good, it’s functional, and we don’t *really* have to do much more. So it’s tempting to just live with what we have even though we could make the house so much better.

So it goes with a website redesign. I’ve blogged in the past about how a website redesign is a lot like moving to a new house. After a move, you have endless tweaks, you can’t decorate all at once, and you get a whole lot done when you throw a party. Somewhere along the way, you lose steam.

And when you lose steam, you start throwing content on the home page to make everyone happy, you start adding endless items to the navigation, you start tossing content into the generic Resources bucket, you stop updating the branding area, and you stop making the effort to make every page look interesting with images and formatting. After a year or two of this, you get sick of how badly organized the site is, you think the content sucks and you decide to embark on a full redesign.

Here are my top tips for preventing your website from becoming cluttered and disorganized.

Resolve to do some dusting and cleaning every week. Set aside time every week to review content, refresh content, delete old content, and archive things you no longer need on the site.

If necessary, hire a cleaning service. Sometimes, we need professional help to keep our homes habitable. And think of how much cleaning you do before the cleaning lady comes! Hiring an outside consultant does much the same thing. You end up thinking about your website and you work with the vendor to keep it tidy and organized.

Purge on a regular basis. Remember the closet rule? If you haven’t worn it in a year, toss. Same with your content. If specific content is no longer current, if nobody is accessing it or your organization can’t commit to keeping it updated, best to just remove it from the site.

Find a proper home for all new content and services. It’s inevitable that after launching your website, your organization will launch new services. Don’t just put it on the home page or stick in Resources. Find a proper home for it so that it’s findable now and in the future.

Finish the decorating. When I bought a condo after grad school, I painted every wall and door except the door to the master bathroom. I didn’t get to it within the first few months when I was doing my heavy decorating. Well guess what? That door stayed unpainted for 5 years. If your website has unfinished elements, resolve to finish them in the new year. Perhaps you have a newsletter that needs to be redesigned, maybe you want to have a unique image in every header, or you want video bios for all the leadership. Don’t wait and don’t lose steam. Create a schedule and get it done.

Update your decor and organizing system regularly. Instead of waiting 3 or 4 years to re-organize your site or update the design, resolve to do a review every six months. Analyze your analytics and make pages more findable. Optimize your site search. Create the new dropdown menus that include all of your new content.

I have a friend who moves every 10 years. I am now coming to the conclusion that her house gets more cluttered every year until she *has* to move and when she does move, she declutters, re-organizes and purges. Don’t be like my friend. Do your cleaning, decluttering and redecorating a little at a time, every week, and keep your site fresh and organized. It will be less work, cost less money and your visitors will appreciate the time you’re taking to give them a clean and streamlined experience.

December 20, 2012