Summary: I'm designing and developing this website to present my portfolio and share resources with the UX community. Here's the story of the iterations, results and improvements over the time.

Why this project

I'm an engineer with electronics and software development background. However, I enjoy designing experiences as tools that empower people to upgrade their skills.

Getting into UX is complicated. Many employers look for trendy colors around beautiful devices barely displaying a non-standard UI. Only few care about the insights, the decisions and user's feedback.

So I had to find my place in this industry. I needed a space to showcase my UX/UI experience but highlighting the value of strategy, research and testing work.

That's why I built this website by my own. Here's the living case study:

  1. Research & Strategy Brief
  2. The Proof-of-concept
  3. Information Architecture & Design System Drafts
  4. My MVP
  5. First Iteration

Research & Strategy Brief

UX Startegy on Trello Board
Explore this board

Besides a personal kanban, I prepared a Trello board with all the resources for each stage. It helped as the project's live-documentation.

And I followed a user-centered design approach: Strategy, Research, Analysis, Prototyping, Development and Testing.

But on the lack of portfolios expertise, I based my research on the advice of Sarah Doody -Expert on UX Portfolios- and the senior experience of David Pasztor -CEO of UXfolio.

Users and their scenarios

Recruiters

They usually deal with a deadline to narrow down dozens or even hundreds of applications. They spend a minute skimming and scanning candidates' CVs, portfolios and LinkedIn profiles. They disqualify people whose skills don’t match the job requirements or can't be verified.

So they need candidates’ materials to look polished and professional. They want to match the job requirements on a clean and easy-to-scan first impression.

Design Team Managers

Often, they have a history in the company. They are busy people who cannot review every candidate’s information. They must be confident that the candidate matches the job description.

So they need to see the work details, the decisions and the story of each project. They want to see evidence of the thought process, communication and technical skills.

Colleagues

Normally, they are senior designers, UI designers, or UX writers. They usually interview 3 candidates for each role. They review the candidate’s materials before the call so they can come prepared with a meaningful conversation.

So they need a portfolio that presents detailed content in a clear and professional way. They want to know how I handle projects, deal with constraints, and my reflections about the work done.

UX Community

People interested in learning more about UX Design. They can be students, career changers, or people interested in specific methods. They attend to conferences, listen to podcasts and read blog posts or books as part of their daily day.

So they need easy access to original, instructive and reliable content. They want to apply the tips or insights to their current projects.

Objectives

  1. Present at least one case study for hiring managers and colleagues
  2. Display text and images in a high quality and readable format
  3. Show at least two blog posts for colleagues and UX community
  4. Create a resources page to bring traffic and back-links to the website
  5. Position the website in the first page of search results for recruiters and colleagues
  6. Conserve full control on the User Interface and Information Architecture for personalisation and performance improvements
  7. Install analytics tools to learn more on web metrics, heat maps, A/B tests and journey analysis.

The Proof-of-concept

I prioritized content. And I focused on creating the case study to share. So I decided to use a portfolio service and I compared the ease-of-use, platform specialty, personalization and metrics options.

Behance

  • Easy to configure and publish
  • Focused on visual work
  • Fixed and standard presentation
  • Social interactions as metric

Wordpress

  • Robust configuration and publishing tools
  • Focused on blogging and business websites
  • Personalisation depends on templates and plugins
  • Capable of integrate popular analytics services

UXfolio

  • Easy to configure and publish
  • Focused on storytelling
  • Personalisation options unlocked on paid version
  • Premium version allowed adding analytics services

Prioritizing storytelling

I chose UXfolio because it offered a friendly reading experience with intersting image layouts. Besides, the paid version allowed me to integrate analytics, brand personalisation and use my own domain.

The site presented

  • Home page with professional summary and social links to help recruiters scan my profile.
  • About page so colleagues could check my background without reading my CV.
  • Contact page to help recruiters on sending me an email using a form.
  • Case study focused on explaining my process, decisions and tests done.
My UX portfolio as Product Designer
Check my first UX Portfolio

Results and improvements

  • Used my own domain to support my professional online presence
  • A beautiful case study that got me several interviews.
  • I could track the visitors' journey and engagement with google analytics.
  • SEO options were limited but easy to modify

The downside

  • Paying for the personalisation options as premium features.
  • Limited to use a collection of customizable templates.
  • Format not compatible for blogging.
  • Social media icons/links were limited (i.e. No GitHub or Medium).

Information Architecture & Design System Drafts

I took what I learned and refined the Information Architecture of the website:

The Information Architecture for my UX portfolio as Product Designer
As more detail users need as deeper they'll need to navigate. So different audiences can get the enough information.

Based on that I'd only need a homepage as hub of my content and 3 templates:

  • Posts. Dedicated to long-form reading, for case studies. The main interest for hiring managers.
  • Stories. For basic 3-5 min read blog entries. To bring traffic to my site from people interested on UX
  • Links. To share a list of resources to colleages and use it as my website link in social media.

Working in mid-fid wireframes

I wanted a summary of every section on the homepage. And posts based in the great reading experience of Medium.com but I knew the layout could change based on the technical limitations of the platform.

Home wireframe for my UX portfolio as Product Designer
Home: Desktop and mobile views
Post wireframe for my UX portfolio as Product Designer
Post template: Desktop and mobile views

Later, I used an atomic design approach to explore the components I'd need for my templates:

Design System Draft for my UX portfolio as Product Designer
Design system draft

So, limited by the current platform I developed my own website. I wanted to implement trendy features and technologies.


My MVP

I compared options by: learning curve, support resources, and features enabled.

HTML + CSS + Javascript

  • I have 5+ years of experience using them
  • Several documentation by the community
  • Complex features will be hard to develop (Production deployment, SEO, etc.)

React (Single Page Application)

  • Intermediate level of experience
  • Growing community with hundreds of blog posts with tips
  • Complex features are available as libraries

JS Framework (Vue or Angular)

  • I'd learn while building the site but increasing my knowledge on javascript
  • Trendy on JS (non-React) communities
  • Easier development since complex services are integrated

Combining advantages

I decided to use Gatsby, a React Framework. I created a Server Side Rendering Application. And it offered:

  • Similar to previous version: Home, About and Case Study pages.
  • Beautiful design of the layout and typography to encourage reading and exploration.
  • Reader experience improved: Dark mode, reading time, scrolling progress and social share options integrated.
  • Blog post format to share stories and resources with the community.

What changed

  • I removed the contact page. People contacted me by LinkedIn or direct email.
  • I had creative control as owner of the code.
  • I designed my logo and used only white and black as brand colors.
My self-made website to showcase my UX portfolio and blog posts
Visit this website | See the code

Results and improvements

  • Performance and SEO were outstanding.
  • Second page's result on google search, after social media profiles and links.
  • Trendy features: It had dark mode, social share and a polished UI that engaged interviewers.
  • I got a new job, after presenting this project and the case study.
  • Updates were simple. I used Github to admin my code and Netlify to auto-publish the site.

The downside

  • I had a learning curve each time I needed a change in the UI: It was built using a Gatsby starter. It was based on Typescript and shadowing components to change the UI.
  • The blog post had null community engagement compared to the Medium version. Even as reading experience, because of the long format. (According to colleagues I interviewed).

First Iteration

I reordered the priority: Content > Features. And I rebuilt the website using a simpler starting point. This year (2020), I'm improving the content strategy, UX writing and use of analytics.

This latest version includes

  • Based on last version, a new Home and Case Study pages.
  • My resume as a direct download.
  • Hotjar analytics to get heat maps and customer satisfaction metrics.
  • A personalized UI style for long-format reading.

What changed

  • I used the feedback from recruiters and hiring managers during interviews.
  • I removed the About page. They preferred to know me better by checking my social links.
  • Besides the code, now I control the design. I use familiar technology as SASS and MDX.
  • I focused my learning curve on writing better. So I wrote some blog posts and linked them in the Home page. They're part of my SEO strategy and have higher engagement with the community being hosted on Medium.
My self-made website to showcase my UX portfolio and blog posts
See the code

Results and improvements

  • First result on Google Search for: jantonioavalos.
  • Improved performance on image rendering and site speed is better.
  • Organic visitors and leads coming from content search and back-link startegy.

The downside

  • Besides the previous users' feedback, I haven't met users. So, as soon as I double the content, I'm running usability test with recruiters and colleagues.
  • Owning the 100% of the platform can be more demanding than producing the content. So I needed better planning. I moved from Trello to JIRA and Notion to track website and content tasks, respectively.
My kanban board in Notion to track content creation
Notion board

To come

My Jira sprint board
Jira sprint board
  • Mini design system. I'm redesigning the initial mid-fid mockups, and designing a UI focused in content. I'm using Figma, Sass and Storybook.
  • A headless CMS. I enabled a first version on Netlify CMS that needs to be improved. This will help to write something or make correction from any device. No dev environment needed.
  • New posts series about Information Architecture. I have some drafts in Medium to publish soon.
  • More case studies. I'm writing about Personas and a Video training webapp I designed in my previous job.
  • The resources page. I'm gathering some artifacts, slides, and talks I've done. They will help to the UX Community and bring more users.
  • Heatmaps and metrics. If more traffic, I'll configure more details of hotjar and google analytics.