Miguel Ablaza

Designing for Scannability

- ROLE

UX Designer


- FOR

Verisign


- TYPE

Site Optimization

Becoming a UX Designer has been the most rewarding things for my career. I come into work everyday happy and ready to take on whatever projects come my way. They can range anywhere from creating a website from scratch, ideating different ways to create more clicks on a CTA, redesigning a mobile interface to better resonate with the audience, etc. I named a few bigger projects there, but there are also the smaller, less sexy ones. Despite that, they are very important for the user and the business overall. This is one of those projects.

KeepDreamingUp.net

One of my first projects with Verisign involved their .net microsite: keepdreamingup.net. The site provides tips to the audience on how to bring their business online, and more specifically, with a .net domain name. Articles make up most of the sites content pages. According to heat map tests, the users were dropping off through the articles without making it to the bottom of the page. My task was to find ways to optimize these articles without altering the content.


Research


Being unable to alter content made the task harder than I thought it would be. However, it did force me think of different approaches to the project. As I gathered the data from the analytics team, I zoned in on the heat maps the most. I started to gather my own research focusing on heat maps.



Discovery


It was my first time working with heat maps, so I did some background study on them before I started the project. From there I learned about reading patterns and focal points on interfaces. That’s when I realized that I didn’t need an overhaul of content just to make something better. All I really needed to do was design for scannability.

Suggestions


From the heat maps I noticed that most focus was in the hero image or above the fold, but then go cold after that. I suggested a few different approaches in order to retain the user's attention to prevent a sudden drop off.




Bolding Concepts


Most users scan articles and skip what’s irrelevant. Scrollers should catch these as they scan through the article, and either stop at that line, or even better, read for more.


Imagery


Adding images can help break apart long lines of text during scanning. The pictures can have meaningful captions, or just be decorative in nature.


Sharable Pull Quotes


Pull quotes are good ways to break apart the text but should be sentence case. Location is crucial and should entice a user to look for the section it comes from rather than reading it as double. Also, adding a simple share feature adds interaction to an otherwise static page.


Read Time


Similar to seeing how big a scroll bar is on the side of a website, a read time allows a user to incorporate time management when going through articles.

Aftermath


After coming up with suggestions, I edited the top five consumed articles. Placing them side by side, I could already see big improvements to their scannability. Then I presented my suggestions along with the updated mocks to the product team. They agreed to the suggestions and gave the green light for the development team to implement them across the site.


These simple optimizations led to a positive trend in site traffic. The success has led to more optimization opportunities such as redesigning the site's search bar, updating the Tips & Tools page, and reconfiguring the menu component. The project taught me that just because it's small doesn't mean that it's insignificant. Any improvements to a site's UX can make a huge impact. You just have to find the right way to make that impact.