User experience strategy has become vital to the success of web development over the years. Today, there are hundreds of tools out there to assist with every aspect of user experience, from wireframing and research, through development and post-launch refinement. Here are a few of our favorites, organized by the different phases within the web development process they likely fit into.
Research
Before you can begin to create anything, you must fully understand your users. Who are they? What are their likes and dislikes? Frustrations? Goals? These are the types of questions we need answers to before beginning to design a website. Collecting this data can dictate every decision you make from wireframing, designing, and developing. It all starts here, and there are some great tools and research methods out there to help get the data you need.
User Testing
User Testing allows you to recruit users from a large pool based on certain demographics—you’re also able to ask screener questions to ensure you recruit the correct user(s). Once recruited, you provide your participants with a mindset and ask them to perform various tasks on your (and/or your competitors’ websites). Once the test is complete, you receive a recorded video of the participant’s screen, as well as the audio recording and answers to any written questions you asked. This allows you to review and better understand how easy or difficult tasks were to accomplish, where users had problems, and more. In-person user tests aren’t always feasible—sometimes timelines and budget get in the way. In those cases, using User Testing to perform remote user tests is a great alternative.
Pro tip: you can test more than just websites—you can test prototypes, mockups, headlines, logos, and more.
Usability Hub
Usability Hub is another excellent tool you can use to perform basic web and user research. This program offers a variety of user test types, including:
- Five Second Test
- Click Test
- Question Test
- Navigation Test
- Preference Test
Google Analytics
Google Analytics is a free web analytics tool that can provide really useful insights. If setup properly, you can see the demographics of your site visitors, pageviews, time on page, where users are leaving your site, and more. Take a look at this article by the Zion & Zion team for more on how to use Google Analytics for UX research.
Usabilla
Usabilla allows you to build completely customizable, targeted feedback forms on your site that give your site visitors a direct line of communication. Depending on how you structure the survey, your users can offer their opinions, insights, likes, and dislikes. Each question on the survey is tracked as a separate metric, which you can view within the analytics dashboard of their product. Here, you can see the historic emotional trendlines of visitors, the impact of site changes, and how new usability tests compare to your benchmarks.
Wireframing
It’s not hard to find wireframing tools; there are hundreds out there, and most have similar features. However, the few that stand out do so for good reason. The following are a few that have exceptional features and have been around long enough to know their trade very well.
Mockflow
Mockflow is our wireframing tool of choice here at Zion & Zion. There are a few reasons for this. First, the program allows our UX team to create high-fidelity wireframes (i.e. very detailed), while still keeping the design of the wireframe very “sketch-esque.” We’re able to build out desktop, mobile, and tablet wireframes, user flows, and sitemaps, as well as “link” buttons and links to one another to somewhat fake out certain functionality. We prefer this style of wireframe as it eliminates any sense of visual design, allowing the team to focus solely on the structure, information architecture, and functionality. Secondly, Mockflow allows for multiple team members to be working on the same project at the same time. As an integrated agency, we often work in teams rather than individually, so this is a huge plus. Finally, Mockflow is web-based, which means you can use the program from any computer, anywhere, as long as you have internet access.
Axure
Axure has been around since 2002 and is packed with features. The software can be used to build user flows, personas, wireframes, and even prototypes. The interface is incredibly intuitive, and the price point, though seemingly high, is reasonable with all features considered.
Uxpin
This wireframing tool provides the ability to create responsive wireframes, add custom animations for interaction visualization, and even allows you to import Photoshop files.
Design
When it comes to design, the best tools to use for design mockups are the industry standard. Other services simply don’t compare to the polished and featureful software offered by Adobe and Bohemian.
XD
This newer Adobe product is now the new standard when it comes to building websites and applications mockups because it was built with the web in mind. Unlike Photoshop and Illustrator, XD offers features, like animations and component libraries, that allow the mockups to feel and act as though it was a fully developed site.
Sketch
Sketch is perfect for designing websites. It provides a unique workflow whereby components are designed and then composed into pages, keeping design entities consistent across pages. The ability to design both desktop and mobile simultaneously is also a real treat.
Development
When it comes to user experience, developers are crucial to ensuring all the user flows, interactions, and imagery are executed in the way they were envisioned by UX and creative departments. Tools are essential to executing those responsibilities correctly.
Bootstrap
Bootstrap is the industry standard when it comes to getting your project off the ground quickly. It’s particularly helpful with ensuring websites are accessible given its focus on aria and schema attributes for assistive technology.
Foundation
Zurb, the creator of Foundation, provides three products: one for developing apps, one for emails, and one for websites. Foundation has been around for about the same amount of time as Bootstrap, but has seen more iterations. It provides a slightly less opinionated library of components compared to bootstrap allowing for more flexibility in aesthetics with less work.
Post Launch
User experience is one of those things that can almost always be improved upon through testing, again and again. Once the site has launched, it’s time to start all over again. Jump up to the top of this list to find some great tools for helping with iterative user experience design!