Grip Limited is an advertising agency that offers a complete suite of advertising services, including integrated campaigns and branding design. Grip Limited’s website highlights the agency’s visual design strengths and the breadth of their advertising experience. The one-page design of the website provides visitors with the ability to view an impressively diverse body of work, in a variety of formats, without being required to navigate to subpages or external pages.
In order to make such an impressive amount of content available on one page, the designers of the website chose to employ some untraditional navigational tools, which new visitors may find foreign and unintuitive. The ease of use for new visitors should be of particular concern, as one of the primary purposes of the website is to act as an introduction to prospective clients who may be interested in hiring the agency based on the work featured there.
Challenge: Improve usability of the Grip Limited website, specifically for prospective clients who may want to hire Grip Limited for their advertising services.
My Role: UX researcher. I worked with a team of three other UX researchers to perform a cognitive walkthrough usability test on the Grip Limited website. Following the usability test, our team produced a study on how Grip Limited could improve user interactions with its website.
Project’s Impact: While our recommendations were not incorporated into the live version of the website, there was a marked improvement in overall usability, particularly with regard to navigation, when the recommendations were included in a revised version of the initial cognitive walkthrough.
We began by conducting (1)RESEARCH in order to fully understand the problems users may be having with the website. This research was subsequently analyzed during the (2)SYNTHESIZE stage of the study, and our findings were then used to (3)IDEATE recommendations that could provide remedies. Finally, we sought to (4)VALIDATE our recommendations by incorporating them into a revised version of the initial cognitive walkthrough.
Our team chose to employ the cognitive walkthrough usability method to assess the website’s untraditional navigation. It was ideal for the task because the method focuses on evaluating how well suited a design is for ease of learning. The walkthrough itself comprises two phases: the preparatory phase and the analysis phase.
In the preparatory phase, we made explicit assumptions about Grip Limited's target user population and their context of use. We would evaluate the website through the lens of this target user, whom we decided would be an individual interested in exploring Grip Limited’s previous advertising work in order to (possibly) hire the agency for a future campaign for their company. The user would be familiar with advertising terminology (e.g., interactive reels, integrated campaigns, radio spots, etc.) and would be comfortable using websites with traditional navigation. We also specified two tasks and outlined the sequence of actions the user would need to perform in order to successfully complete the tasks (Fig. 1-8).
Task 1: View Grip LIMITED’s Interactive Reel.
Task 1, Step 2: Single-click anywhere in the “Our Reels” column to activate the column’s up/down navigation.
Task 1, Step 1: Click-and-drag (from right to left) anywhere on the webpage until the “Our Reels” column is visible.
Task 1, Step 4: Single-click the “Play” icon to view “Interactive Reel.”
Task 1, Step 3: Click-and-drag (from down to up) until the embedded “Interactive Reel” is fully visible.
Task 2: Listen to one of the radio spots from the Budweiser® ad campaign.
Task 2, Step 2: Single-click “Budweiser: TV Spots.”
Task 2, Step 1: Single-click “Open Menu.”
Task 2, Step 3: Press and hold “Down” navigation key on keyboard until the record icon is fully visible.
Task 2, Step 4: Single-click on one of the three “track” icons adjacent to the record icon to play the radio spot.
With the preparatory phase complete, the analysis phase began. In this phase, we worked through the sequence of actions required to complete our two defined tasks. For each action, we asked the following questions.
Will the user try to achieve the right effect?
Will the user notice that the correct action is available?
Will the user associate the correct action with the effect they are trying to achieve?
If the correct action is being performed, will the user see that progress is being made toward the solution of their task?
Through careful discussion, our team determined whether the answer to each of these questions would be “Yes” or “No.” Our collective answer to the majority of these questions was "No," which led us to the conclusion that the untraditional navigation, as it was currently being implemented, would significantly impede a new visitor’s ability to navigate the website successfully. Our team noted a navigation guide on the homepage (Fig. 9) but felt it would not significantly improve a new visitor’s ability to navigate the website for two reasons.
First, the navigation guide is not significantly distinct; it becomes lost in the surrounding content, which is treated with the same typographic style. Second, even if the navigation guide were distinct and visible, the simple fact that a guide is necessary to explore the website successfully calls into question the usability of the navigation. In order to improve the website’s current navigation, our team made the following recommendations.
Recommendation 1: Replace the unfamiliar CLICK-AND-DRAG navigation with familiar scroll bars.
The click-and-drag navigation, which is one of the primary methods of navigating the website, is unintuitive. By adding scroll bars to the right side of each column and along the bottom, the click-and-drag navigation would no longer be necessary. Mock-ups were produced (Fig. 10 & Fig. 11) to show how visually unobtrusive scroll bars could be incorporated into the website's design; these scroll bars would support visitor navigation while not distracting from the website's content.
Recommendation 2: De-emphasize non-selected columns in order to indicate and draw attention to selected columns.
In order to navigate columns on the website, a column must first be selected. This can either be done by single-clicking the column (as seen in Task 1, Step 2), or by selecting the column from the website’s “Menu” (as seen in Task 2, Step 2). In either case, the only feedback returned is that the column centers within the screen; it does not distinguish itself from the adjacent, non-selected columns in any way. To remedy this, our team recommended de-emphasizing non-selected columns. The benefits of implementing this recommendation would be two-fold. First, the selected columns would be easily distinguishable from the non-selected columns. Second, de-emphasizing adjacent columns would improve the visibility of the selected columns (Fig. 12).
With the goal of testing the efficacy of our recommendations, we analyzed the sequence of actions required to complete our two tasks again. For this analysis, however, we considered what effect adding scroll bars and de-emphasizing non-selected columns would have on the tasks. We agreed that these alterations should, at the very least, improve the likelihood that users will notice the correct action is available and associate that action with the effect they are trying to achieve; a marked improvement with regard to the usability of the website.
Grip Limited is clearly a talented and prolific advertising agency. The quality and quantity of work featured on their website, in addition to the site’s visually engaging typographic design, should make them a highly sought-after company. Our team felt that the implementation of our recommendations would help website visitors explore the agency’s impressive body of work more effectively.