The CBP OIT Design System is a comprehensive design resource that streamlines the look and feel of CBP digital applications.
I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of CBP.
As a starting point to begin creating this design system, I reviewed the work of Jakob Nielsen, a human-computer interaction expert who developed the most widely-used set of heuristics for user interface design. I referenced current best practices and principles to capture observations of several existing CBP digital products and ranked them on a scale of severity.
Based on this evaulation, CBP could take advantage of usability best practices across several key areas, including navigation, content hierarchy, workflows, and design, to improve the current user experience of web experiences. I performed this evaulation on three websites. Below is an example of my evaluation of the ESTA website.
AESTHETIC AND MINIMALIST DESIGN
The buttons hold the same shape, color, and typography. However, there are too many calls to action on the homepage – seven in total. In four different places on the homepage alone, the website asks if the user needs help, all leading to the same FAQ page, which is redundant.
Recommendation: Rather than leaving the user to decipher an FAQ page or choose between seven different buttons, guide the user in the direction needed using specific, natural language, and discarding language that is irrelevant or rarely needed. One or two buttons on the homepage allowing the user to get started, rather than seven, is ideal. An FAQ page may still be needed, but it can be relegated to a single “Help” button in the navigation.
VISIBILITY OF SYSTEM STATUS
The process flow for the “Enter Applicant Information” section of the website has an overwhelming amount of form fields, some of which don’t need to be filled out by every user.
Recommendation: Using dividers is the best way to reduce overwhelm by visually breaking questions up. There doesn’t need to be a huge amount of visual difference, and too much contrast can distract. Forms that are not required to be filled out by every applicant can be hidden until needed to further reduce the bulk of the form. For example, if a user selects “No” under “Are you known by any other names or aliases?” do not show the fields for aliases. This will make it appear as though there are less field to complete. Reveal forms only as the user needs them.
RECOGNITION RATHER THAN RECALL
The home and help pages do a good job of keeping the user informed with process details. Between pages, the user is kept informed of actions and options without having to navigate to the home page. The help page provides numerous options for additional information, but it is not supplemented with a search field.
Recommendation: Provide a search option for FAQ’s since there are so many. Redesign content on help page to provide the user with a supplemental recognition feature, such as an auto-complete search field, rather than having to recall past information. This will lower the bounce rate for users who are unable to find an answer to their problem.
A mood board is a composition consisting of color, imagery, text, and samples
of objects intended to evoke a particular style or visual identity direction. Once chosen, the mood board served as the direction for brand design.
In order to make sure the design guide was created in a way that would result in a valuable resource for the end user, I put together a survey and sent it out to the members of our team that would be using the design guide. Usability testing allows us to determine whether people understand how to use a product, in other words, whether the conceptual model of the product matches the user’s mental model.
As a result of my testing, I found and corrected issues primarily in the navigation and organization of the content on the website. Below is a sample of the questions I asked users to complete. For 6 of the 12 surveyed, I sat with users in order to track behavior. Read my article on Medium for more detail on my user testing process.
A living website that is never truly complete, the current OIT Design Guide stays true to the identity statement conceived at the beginning of our work: “The CBP visual identity will be structured and modern with an official feel. It will have a clean and simple aesthetic balanced with unique tones that speak to its brand. It will be vibrant and progressive while staying grounded and relevant to its audience.”