Portfolio v1 Design
& Development

Time to build a UX portfolio

Personal Project
5 min read
UX
Web Design
Development
Man hugging huge coffee illustration
This portfolio is built with the users and developer handoff in mind. Even though I coded this website, I wanted a scalable design system in which a team member could easily get into.

After 2 years worth of coffee, I managed to build an Atomic Design system and integrated the design using Tailwind CSS and Gridsome, a Vue.js-powered modern site generator.

Design Challenge
Build a user-centered, scalable portfolio design system and website.

Design process

Online Research
Affinity Mapping
PersonaI
Ideation
Wireframing
Prototyping
Reflection

Development

HTML 5
CSS 3
Vue.js
Tailwind CSS
Gridsome
NPM
Git
Netlify
Axe audit

As a UX designer, I went through a design process to ensure my design fits the user’s needs. I also made sure that what I design is possible with the technology stack I’m using. I also did a basic accessibility audit to ensure my website is user-friendly.

User Research
I am not the user of my UX portfolio.

Joining Sarah Doody’s mailing list got me one of the best resources on making a UX portfolio. After all, she specializes in UX career building. When I was first starting my portfolio draft, one of my early mistakes was thinking about aesthetic design first.

The 3 users of a UX
portfolio

Human Resources Recruiter

 Meet Tom.

Tom works as a UX recruiter at a big e-commerce company and is hiring for 5 – 10 positions at any given time. This week, Heather has a deadline to narrow down candidates for a Junior UX Designer role. So far he has 65 applications, and he needs to give the Hiring Manager his short list.

Man throwing paper illustration

Hiring Manager

Meet Latoya.

Latoya has been the design manager at the big e-commerce company for 4 years and her team is 16 people now. She is a busy woman and doesn’t have time to review every candidate’s information.

Lady with pink sweater running illustration

Your potential colleagues

Meet Penelope, Patrick, and Pamela.

These people are all members of the design team. Penelope is a senior designer, Patrick is an interface designer, and Pamela is a UX writer. They usually end up interviewing three candidates for each role: they have a group interview with the candidate, and then each has a 1:1 that’s about 20 minutes.

Lady with pink sweater running illustration

Design decisions

The results from various research studies on UX portfolios and its users became the basis of my design decision. I opted for cards rather than the common project selection menu to give the users a better project summary which included the read time, project type, and the relevant skills. Other added features are the header with section selection to give users the ability to skip to specific sections, added scroll indicator on top, view resume link, and a more project selection at the end of each project.

I follow both Dan Mall and Brad Frost when it comes to design systems and their impact on teams. I appreciated the importance of it furthermore when I tried to incorporate Brad Frost’s Atomic Design System in my portfolio design. Having components is powerful and saved me a lot of time both in design and development. The ability to redesigning a single component to change its design on every other instance is essential to design systems.

Here is an example of a project card using atomic design.

Atomic Design System
We’re not designing pages, we’re designing systems of components.
—Stephen Hay

Atoms

Card hovered
Gray pill
Red color component
Type image

Card hovered, pill, color, & typography component

+

Molecules

Labeled pill
Heading with text

Labeled Pill & Title component

=

Organisms

Kodoo card

By combining atoms and molecules, a reusable card component is built which can then be used in pages and templates.

Tailwind CSS with Vue components
Design system for developers

As a utility-first CSS framework, Tailwind was the perfect tool for me to incorporate it with my design system. The customization is seamless, letting me add my values from my atomic design system such as colors and typography. Along with Vue components, it becomes similar to a design system where each component is re-usable and can be easily managed.

By combining atoms and molecules, a reusable card component is built which can then be used in pages and templates.

Kodoo card code

Accessibility audit
Design and development for everyone

As a utility-first CSS framework, Tailwind was the perfect tool for me to incorporate it with my design system. The customization is seamless, letting me add my values from my atomic design system such as colors and typography. Along with Vue components, it becomes similar to a design system where each component is re-usable and can be easily managed.

Pills with improved contrast

By using black text the contrast is improved

HTML attribute code

By using black text the contrast is improved

HTML attribute code

ARIA landmarks for better navigation

Insights
Areas for continued development

Previous version (v1) wish list:

This portfolio is built with long-term updates and maintenance in mind. Accessibility improvements, portfolio usability, and user-testing are on my top to-do list. I would also like to have this site as a JAM stack project in the future with more CSS animation.

Visit my first portfolio

P.S. If you don’t see any of the above improvement on this current version, coffee is on me.

Sleepy boy illustration

Credits

Pablo Stanley
Open Doodles
Carolina Cajazeira
Lottie File
Sarah Doody
UX Portfolio research and tips

Make sure to give these wonderful humans money!

Toyo grill mockup

Last Project

4
/
4

Previous Project

Girl illustration
Tester illustration
2
/
4