Fixing the Usability Errors in My Old Case Study Web Designs

Illustration. The transformation preview of Redesigning My Case Studies.

Usability errors plague every website. These are the issues that User Experience (UX) designers seek to resolve, such as whether a design is suitable for the task at hand, customizable, and error-tolerant. However, testing for usability errors with common UX heuristics is a good design exercise. I learn how to deliver what my users want and need rather than pursue a trendy design of my personal preference. However, I realized my old Case Study web design layout wasn’t working for me or my users anymore during one such test for usability errors. While the old case study web design was condensed, I always look for improvements.

Animation. The "before" shot of the old Case Study template.

Identifying the Usability Errors in the Current Web Design

First I identified the usability errors with the current version, shown in the animation above. I’ve been observing an increasing number of usability errors, like:

  • Copy lacks readability on background-images
  • Image gallery lacks organization—images are unattractively cropped and presented in a random, rather than chronological, order
  • Gallery plugin lacks proper functionality—an ongoing, documented but unresolved bug in the developer’s updates produces duplicate copies of images in the lightbox
  • Results are unclear and not prominent
  • Case Studies parent page shows tiny thumbnails that provide little information about each project

Another usability error I wanted to address was the way I grouped case studies. Each client received a dedicated web page. Subsequent expansions and additional projects for the client blend in with the old ones. It also resulted in ambiguous scopes of work and the individual successes of each project’s goal. Overall, this grouping was unfocused.

Indeed, two creative judges I interviewed with at AIGA DC’s Annual Portfolio Review recommended that each portfolio piece only showcase one specific piece of work. For example, a logo, a brochure, or set of website wireframes. However, all the creative judges appreciated my approach to the case studies. My Case Study approach explained my process step by step. This includes goals, creative strategies, major developmental changes, and quantifiable results alongside the final visuals.

Using Wireframes to Plan My Usability Errors Solution

As a result, my revised case study template will retain the process details but further split clients into major projects for each client. Basically, it’s all now displayed in chronological order with detailed work-in-progress shots of my work!

Graphic. Wireframes from the planning stages of the new Case Study template.

Initial wireframes for the new case study layout explored changes in the gallery with a focus on fixing the aforementioned usability errors.

Improving Presentation of Information to Show Conceptual Growth

The goal of the gallery changes is to better illustrate conceptual growth. Now the conglomerate gallery splits into smaller, related groupings of images in chronological order (more or less). First, a “before” shot, where available, appears first and stand-alone. Next, work in progress shots follow. Lastly, final shots remain large and occupy the most space. The images must be purposeful to show progress. (Update: What do I mean by purposeful images? Check out “Designing Purposeful Imagery.”) Overall, I wanted the switch the proportion so that images outweighed text. The case study webpage is a portfolio template, after all.

Improving Legibility to Make Information Easier to Read

The wireframes also explored changes in text groupings. Previously, copy detailing the creative strategy and results appeared in inverse text grouped with dark background images. These indicated section changes as well. However, this composition made the text difficult to read, although they are important parts! This was a big usability error.

Furthermore, the themed background images further distracted viewers from the actual portfolio images and competed with my clean visual identity.

Additionally, the wireframes display alternatives for various manners to split the creative strategy. For instance, the wireframe maintains the whole section as a singular group with progress shots interspersed. Another example, a wireframe splits the section into a new row for each round of concepts.

Making the Web Design Suitable for the Task

Finally, the wireframes address the hidden results section. This tackled the usability error of my web design being unsuitable for task. I needed my Case Studies to clearly promote the results I deliver to my clients. I want to do better about detailing the successes of each design. Therefore, I need to follow my own advice. I must quantify the unmeasurable creative accomplishments.

The Resolution of the Usability Errors with a New Web Design

Overall, the new Case Study design is much simpler. The new case studies are easier to navigate because they have clearly defined sections, additional white space, and edited copy. Consequently, the Case Study re-design fixed the usability errors I noted in my self-audit.

Screenshot. The new Case Study template as seen in the WordPress CMS.

The top begins much the same with a client-themed parallax header and background information about who they are. Next, in the following section, I talk about project goals. Yet, I also re-wrote the goals to clearly identify business problems and where creative solutions are needed.

Additionally, I also thought a “before” shot of the existing design provides a useful point of comparison to really capture the growth each project experienced.

Finally, I also replaced the Services Provided list with a list of Usability Errors to demonstrate how a poor design can affect business value.

Screenshot. The new usability section of the new Case Study template.

After this introductory section, I launch into Creative Strategy. The overview here stays much the same. However, now I’ve added those work-in-progress shots with behind-the-scenes details explaining my creative decisions! Next, a caption follows each image to explain what it’s about. No more confusing collage of images, or weird cropping, or puzzling order. No more duplicates!

Finally, I complete the Case Study with my Results section once more.

Working with small non-profit micro-businesses, I don’t always get to report sales and analytics figures. Sometimes, the project is ultimately tabled under the client saves a bigger budget before implementation.

However, those limitations are a part of business. Additionally, they don’t negate the real business value our collaboration together already achieved. I nevertheless ensured each case study shows the results section consistently.

Also, I emphasized the Results section over the regular copy with increased white space, small graphics, and easy bullet points.

Concluding My Usability Error Exercise

As a result, I feel that my Case Studies are much stronger. My design work was always strong. Yet I failed to capture the achievements my clients and I accomplished. Further, my presentation was less than enticing. That’s why it’s important to constantly revisit, revise, and adapt to the current environment. Fortunately, I’m quite good at that!

Please enjoy my designs and Case Studies in their new glory.

Animation. The design transformation from the "before" shot of the old Case Study template to the new template.