UX design reviews key to every web content management strategy
In most enterprise organizations, UX designers and content managers are separate roles filled by different people. As a person who has worked in both capacities, I’m constantly reminded of the disconnect between the graphic design and development teams. Graphic artists can create an intricate design, but developers will need to create a content management template based on that design. The result is often a difficult process for both parties.
If you don’t make a stringent UX design review an integral part of your organization’s content management strategy, new website launches are doomed to fail. To ensure the handoff between designers and developers goes as smoothly as possible, here are five design review facets that every content management strategy should include.
1. Practicality
The first step in a UX design review is to manage expectations. Although a design may look flawless, it won’t necessarily translate well into a content management template, because the HTML framework must be repeatable. Your team will also need to make decisions on text string length and how the design will support translations. In addition to these requirements, you’ll also need to consider the underlying infrastructure.
We need to ask if the engine can support the features that the design suggests. Often, a design will have to be modified to suit the abilities of the system it’s built upon. For this reason, it’s very important that both front-end and back-end developers participate in the development of your content management strategy. All these details must be documented for sign off before you begin development.
2. Mobile first
Take a mobile first approach to every project. Progressive enhancement involves scaling projects from a mobile format to desktop. You begin with a lean and simplified design and expand on it as the screen expands. An enterprise should use this approach because when we design for desktop first, we lose sight of UX on mobile.
In addition, a UX design review will reveal that some choices that work for desktop may not necessarily work for mobile. For example, in many cases the navigation elements that work for desktop will need to be constructed very differently for mobile. To move into development in my UX strategy, at minimum, we require both the mobile and desktop screens.
3. Requirements
A design handoff is so much more than just graphics that show how desktop and mobile screens will look. A developer cannot simply look at an image and know every aspect and detail that was used to create said image. We follow these requirements to ensure that pixel rendering is perfect, regardless of the user platform:
- Measurable Elements
Begin with a realistic document sizing to provide measurable elements to your developers. Spacing is a very important design element that can only be duplicated if you’re given a proper canvas to inspect it. A good guideline is to design in a 1920 x 1080 space.
- Images
Though they may only be placeholders for now, package and provide the developer with the images they need to create the design. Keep in mind that this will not only consist of the desktop images, but the cropped versions for tablet and mobile as well.
- Fonts
A font is a difficult thing to determine. For this reason, you’ll need to include the name and URL of the font you have chosen to ensure that it’s indeed a web font. If you purchased the font, make sure you give the developer proper access to embed and test it.
- Design Specs
Design specs include font size, font weight, font family, line height, box shadow, padding, margins, color, etc. Many of these specs can be found in the design program.
For example, two prototyping tools that I have extracted files from are Adobe XD and InVision. These platforms make it very easy to pull design specifications.
4. Functionality
Another important thing to include in your design is some indication as to how it’s supposed to work. Is the menu a hover menu or will the user have to click? How does the form work? Does the user simply add the inputs and receive a result, or will there be a submit button? Can the user go back and edit the form if they don’t get the right result? This is where some extensive thought on usability comes into play. A good design is a well thought out design.
5. Error handling
Be sure to include screens on error handling. The developer will not only need to duplicate an image into HTML, but also develop an experience for the user. Every click will lead the user, and it’s the designer’s job to ensure the journey is mapped out to provide a seamless experience. This should be considered in the design phase and included in the hand off.
Graphic designers focus heavily on what looks good and what will appeal to users. However, the feasibility of reusable, easily handled content management templates over the long term is a common oversight. Employ these five UX design review techniques for a smooth launch of any new enterprise website.