InfoSec Resources: Journey from Discovery to Design
Near the end of last year we rejoined forces with InfoSec Institute to take a fresh look at their informational security and training resources website. The finished product launched this week to the delight of many happy readers. The following is an in-depth look into the discovery and design process for this project.
Background on the Project
After two years of work, the InfoSec Resources team had an incredible archive of informational security media: articles, labs, series, and ebooks. All of these resources were connected and kept alive by InfoSec’s community of passionate technologists.
Unfortunately, as time went on, the resources site experienced some growing pains. Inconsistencies in their design crept in as new functionality was added. Calls to action got lost among the noise, and reading on the site wasn’t the most pleasant experience due to the crowded design. Needless to say, the site had outgrown the humble WordPress theme it started with.
Let’s take a look at the resource site’s journey from discovery session to final design.
Discovery Sessions
We kicked off the project with something we call a “discovery session.” Our discovery sessions are active work sessions. Everyone involved in the project was brought together via Skype, and we spent the day identifying InfoSec’s goals, problems, and the possible solutions. We also created wireframes, discussed the information architecture, and made strategic decisions that influenced the rest of the project.
InfoSec came to us with a couple of goals already in mind:
- Improve the overall visual appeal of the site with a focus on how to present their vast amount of content.
- Improve conversions on various course promotions and calls-to-action around the site. This included better integration with other InfoSec sites, inviting people into their training programs, and tying in with their newest addition to the InfoSec ecosystem, SkillSet.
From here we looked at what they were currently doing — both the pros and the cons. The major improvements we wanted revolved around improving the reading experience for their most active users. This included making the design easier on the eyes, improving how we organize the content so people can find what they are looking for faster, and introducing calls-to-action seamlessly within the content using a flexible template system.
Wireframing
We usually have time to start the wireframing process during a discovery session, but it always extends beyond it. When the notes were in and the planning was done, we really dug into the rest of the information architecture (IA) and wireframing in-depth.
Wireframing and information architecture (IA) are two of the most important aspects of visual design — they lay the foundation for the other aspects of visual design. If were were building a house, the wireframes and IA would be our blueprints, and we spent a lot of time making sure we were building a solid foundation for the design.
We had two main challenges during this phase of the project:
- To make sure we were not only displaying the vast amount of content that the site had to offer, but that users were seeing the newest posts highlighted, especially when they were “hot off the press.”
- Solving the problem of post types and how best to display content for the user. InfoSec has post types ranging from text based articles to videos to mini courses to multi-part series. When we thought about these post types and how they differed, it was clear that one set layout was not going to work for them all, so we designed a range of different layouts to suit each of the post type requirements while maintaining consistent reading patterns across the whole site.
[caption id=”attachment_3269" align=”aligncenter” width=”700"]
Wireframes for InfoSec Resources[/caption]
Visual design
Once the wireframes were finalized and approved, we moved on to visual design, starting with a few loose color selections from the current InfoSec brand. Short of that, we pretty much had a blank canvas to work with.
I started by building two color palettes. One would influence the bulk of the interface (backgrounds, sections, etc.), and was inspired by the most popular terminal/editor themes among developers (our main user type). This palette consisted of a number of shades of grey. The second was derived from the current InfoSec brand colors and would be used more selectively for calls-to-action, post types, and important links.
[caption id=”attachment_3271" align=”aligncenter” width=”700"]
Colour palette for InfoSec Resources[/caption]
It quickly became clear that serif fonts simply weren’t going to work with the style we had in mind. Instead, we focused on sans-serif fonts, considering the kerning and — again — the reading experience. Eventually we settled on Montserrat for the main font.
[caption id=”attachment_3260" align=”aligncenter” width=”700"]
“Hello World” in Montserrat font.[/caption]
Another big decision during the visual design phase was the proper use of images/photos. During wireframing we set up a structure with an option to show an image associated with each post if that post was new/featured. The content team would then be able to use background colors to associate the post with a category. Again, the goal here was to reinforce the fresh new content, especially for returning users. When you look at the site now, these image/color associations are instantly noticeable.
Another hurdle we overcame together with the InfoSec team was that the quality of images for posts was inconsistent. With the new design displaying images so prominently, the importance of image quality increased tenfold. We created an image guide to help the content team at InfoSec source images at the best quality and with suitable dimensions for the new site going forward.
Here are some before and after shots of the design so you can see them side by side.
[caption id=”attachment_3277" align=”aligncenter” width=”1400"]
Before and after screenshots.[/caption]
Development Advocacy in Design
The next step in the project is the web development phase. At Phuse, the development team is looped into every design decision. From discovery to the end of design, Ben, the developer assigned to InfoSec Resources, worked tirelessly to give constant feedback. He was forthcoming about any restrictions or difficulties we might run into during development based on the proposed changes and layouts from the design phase. This allowed us to either tweak the design or add in contingencies to account for the issues he foresaw across browsers and devices. Working side by side with Ben was invaluable during the entire design phase.
Conclusion
There we have it, a look at our design process and our thinking behind decisions made throughout the InfoSec Resources project. The end result is a much more pleasant, readable site that users enjoy interacting with and reading on. A couple days after launch, we saw that time spent on the site increased by 12%, and that user engagement went up by 5%. We’re confident these modest increases will continue to grow as the InfoSec Resources content team begins to use the new templating system and CRM integration to their full advantage.
The site is also interconnected with the rest of their ecosystem of websites, an added value for the casual user of their site who hasn’t yet been exposed to the wealth of knowledge at SkillSet and InfoSec’s other training programs.
Let us know what you think of the process and the end result by leaving a comment below!
