Web UX/UI Design, Desktop, Mobile and Tablet / 2019

Background

Increased traffic in Penta's blog section made it a viable tool for raising brand awareness, as changes in content style led to long pieces that required a reconsideration of its layout and usability.

My role

I was the only designer in the project.

I was in charge of research, timeline management, design and information architecture definition, handover specs, breakpoints, edge cases guidelines etc.

Starting point

• The existing blog layout used no grid system or fixed pixel unit. This created a main page flow that appeared incidental and did not contribute to the trustworthiness of the section.
• The blog's main page was not paginated. When reaching the bottom of the loaded previews, more previews would load automatically, never allowing the user access to the footer, or the ability to quickly navigate to the last posts.
• Posts were categorized with related tags, but the tags were not interactive, did not function as filters, and so served no actual function.
• Blog posts were long and difficult to orient through. The content style had sections that would interest different types of users, but there was no way to make users easily aware of content below the fold and no way to quickly skip to it.
• The legibility of blog posts was not ideal and there was work to do to decrease eye strain.
• There was no visual differentiation between the marketing website and the blog section.
• Images used in posts would be arbitrarily cropped on different viewports in a nonscalable manner and occasionally would even crop out text.

Before: No pagination, no grid, images cropped arbitrarily.

How this was done

Qualitative interviews with users and potential users I first interviewed 8 acquaintances and users from outside the org on their impressions of the blog status quo. For a project like this, quantitative data in the form of a survey would normally be ideal, but seeing that this was a stealth passion project that was initiated and advocated for by the SEO lead and myself, there was a need to build a strong case for a blog redesign without the initial backing of resources. This proved itself to work - as for some - anecdotes speak louder than numbers. I crossed-referenced my initial assumptions with the insights gathered in the interviews and together with data reflecting on the blog's increased traffic, I was able to produce compelling evidence that propelled management to support this initiative.

Feature prioritization I listed all of the things that my colleague and I ideally wanted the refurbished blog to include. There were many ideas, all great, but some more impactful or feasible than others. With management's backing, came a more realistic idea of resources, and some ideas had to be de-prioritized. I made a decision that in the spirit of striving to one day reach the most user-friendly blog possible, features would only be de-prioritized when it came to implementation, but everything would still go in Figma-land. This meant I had to make sure features beyond and within scope had to exist independently.

Layout and notes from Figma file