UX case study of a portfolio page

The thoughts that influenced the design of my personal portfolio page

UI & UX goals

When designing the next version of my portfolio page that shows all past projects I had been working on, several targets should be met.

  • provide the most relevant information in a preview
  • keep the grid of previews highly legible
  • implement a call-to-action (CTA)
  • provide a information-rich details page when clicking on a preview

Furthermore, I decided to add a second grid of data that provides information about the technologies and libraries I’ve been working with. I’m not sure if I will keep this structure with two different grids, but as of writing, this was the design I decided to go with.

The whole portfolio has been implemented on the page about myself and is accompanied by some other, already existing components, which aren’t relevant for this post. Either way, I think implementing my CV on the personal page is the right choice.

The grid of technologies

The following screenshot shows how the grid of technologies looks. It’s very minimalistic with a lot of negative space between the grid items. I used a gradient from almost black to silver, which provides a subtle premium feeling, in my opinion. Using only a single color, for example white, was somewhat too minimal.

By separating the technologies from the actual projects, I don't have to cram everything into a single view.

Image b32673855ad1

The grid of previews

After the user has scrolled past the technologies, a second grid provides more visual elements as well as information regarding my actual work. Each item shows a preview of a project I’ve been working on, both personally as well as professionally.

Image f0aa90aa1d0a

The most prominent visual element is the title itself, with the row of chips that show what roles I had at the project as the second most prominent one.

Image 007bc13f0f56

In Between those two elements are the label to show the project’s duration as well as a short description to give a quick information about the content of the project. The label for the duration uses the smallest font, as it’s the least important part of the preview, in my opinion - yet it’s still visible to users who explore this page.

The animations when hovering over grid items are reused and shared with other components of my progressive web app.

CTA in the previews

One major change from the previous, very simple version, was the addition of a call-to-action directly in the preview grid. I don’t expect that this action will actually be used, but I thought that adding it doesn’t have any negative impact on the previews.

Image bf02756b6f32

Project detail page

My goal for the detail page for each project was to provide all available information in a very structured and hierarchical layout. As you can see in the following images, the most prominent visual element is again the title, followed by the quick description as well as the specific technologies used in this project. The technologies are rendered as a row of chips, which provides a clear visual division between the header and the content of the page.

Below the header is just the same navigation row you find one all other pages that have a navigation element implemented (if you’re wondering, the page for a single blog post doesn’t have the main navigation bar, this is a separate UX study).

Image 222d700be808

The place after the navigation row is reserved for the actual text describing the project. Here I’m using the same components for text-rendering as in the blog post pages.

After the user has scrolled past the project description, multiple rows are visible, showing even more information in a very compact and more stylized way.

Image 1e6a898976b0

The first row gives a clear overview of the roles I had in this project, of course now larger than in the preview. As you can see, the colors for the roles are reused to provide visual consistency.

Image aff49e97de61

The second row is called “Vitals” and provides another set of key metrics of the project that don’t have to be written in prose each time, but are rather well suited for displaying as such larger information-cards. All vitals are animated when a user hovers over them, adding a nice UX detail to explore.

The last row simply lists all links to products or download pages relevant for the project as well as a link to all other projects.

Image d42e748f93ca


As you can see, creating a portfolio page isn’t that much work. Putting some thought into designing the components pays off, as your digital representation of your work history has to provide a nice user experience.

Of course, this article is heavily opinionated, as only my decisions for my personal portfolio are reflected. Yet I think it can help you in designing your own web app as well as a special page for the projects you’ve been working hard on.