Design Portfolio top tips with Jon Vieira

InfoSec People got in touch with Jon Vieira, a London/UK based Designer, with over 12 years experience across Product Design disciplines (Interaction, UI, UX and Motion) and working with companies in the UK, Brazil and the US. Jon currently works as a Product Designer for Facebook, he is also UXMC (UX Master Certified) by the Nielsen Norman Group and won multiple awards for his design portfolio.

We asked Jon to share his knowledge and provide tips and advice for others getting into the Design industry, focusing on how best to create a design portfolio.

Getting started…

What is a design portfolio and why is it so important?

Portfolios are online today, but traditionally they were a physical book with your design pieces, which you could show or send to agencies when looking for work.

I believe a portfolio is the best way a designer can showcase their abilities. Think of it as the glass façade to your store where you show your best work / products, so people are attracted to get to know more about you. It’s not the end game, as it’s usually the “conversation starter” between you and a client or potential employer.

This might be different for more strategic / leadership positions, or professionals not so much focused on the visual side of design, but still having some sort of a showcase, even if it’s about showing how you think, and what you can offer, is essential.




Can I get a design job without a portfolio?

If by portfolio we are talking about a live site or showcase, the answer is yes, you can. But if we’re referring to a way to show your work, then no. It doesn’t matter if your portfolio is a PDF or a site, you need to provide a potential employer with your offering.

Again, it might come down to more than just the portfolio, as lots of work comes from a good network and you also need to be able to articulate your thoughts or case studies after someone liked your portfolio.

Is it best to design my own portfolio from scratch, or can I use an existing site to upload my work too?

It depends on how much creative you want to go. Existing platforms (e.g., Behance, Dribbble, etc.) will be limited to what the structure they offer, but you can be somewhat creative (especially with Behance).

There are alternatives in the middle, such as Webflow, which has a templating system to start with but allows for a lot of flexibility.

But if the goal is to have a very custom portfolio, even on Webflow, it will require a lot of technical knowledge or the involvement of a developer / engineer.

Where do I start and what do I need to think about?

There are two sides of it: design and content.

For design: it’s the same process as for anything: planning, mood-boarding, exploring, until you’re happy with a direction.

For content: I tend to start writing my cases on a document and, as with any digital project or website, try to find a common structure that can be scaled to multiple cases, e.g., Intro, what’s the Problem, how it was explored, what were the results / learnings, and so on.

There’s no right or wrong, but for Product or UX focused portfolios it’s very important that this rationale is present, so it’s not just a showcase of nice (or not) visuals. The product thinking behind jobs is very important whenever it can be included.

In some cases, you can’t show much due to NDAs or other reasons, and in this case try to be creative by creating excitement so that you can discuss more on a call, or maybe password-protect that case (or the entire portfolio).

Those would be the biggest considerations on the portfolio side, but one last thing I’d say is to keep all channels consistent: CV, LinkedIn, Dribbble, etc., so that no matter where users come from, they connect the dots when they move across these – meaning: tone of voice, branding, messaging, all needs to be connected somehow, according to each specific platform we’re talking about.

What if I don’t have any projects to show case?

This is tricky and common amongst junior designers, and what I’d say is that you need to have projects somehow. They don’t have to be commercial, but the more real they are, the better. If you need problems to solve, the world out there is full of them, so just pick one and be creative about how to tackle.

I’m saying this because the first ever app I designed for a portfolio was a fake coupon app for McDonald’s that I did based on banners I was creating for an agency… but I had students in the past approaching people with small business and offering “free” (or very cheap) work in exchange for a case study, which might be a great start.

We all have been students and worked for free at some point, it’s tough, but you need to be creative and start somewhere.


How do you choose how to design your portfolio?

As I pointed earlier, I tend to start pragmatic on the content side, so I can see what visuals I can use to support the content – as a UX professional I need to consider what my main users (recruiters, agencies, etc.) need to consume, so I start there.

Then, as with any design process in any companies in the world, it’s a big mess of absorbing as much inspiration as possible and trying all sorts of different things until you’re happy.

PS: Don’t bother if your process is messy, as I know it probably is. Reality shock: it’s the same in every company, from startups to Facebook, from agencies to FinTech’s, it’s always a mess. Processes and tools are there to help you, when applicable, but not to lock your creative flow. However, keep in mind your user / audience and keep a good structure / process on your case studies so it’s easy and relevant for their consumption – again, on ALL platforms, including CV.

What is in trend in design right now?

I never know how to answer that question, hehe, but for the past year or so I’ve been noticing how the use of motion design and micro interactions is gaining more and more space, so it might be a good way to add some delight to your portfolio.

For mine, since I have a stronger focus on the “visual end” of projects, I opted to go for something strong on that side, exploring 3D shaders. I needed to work with a creative developer (specialised in this type of thing) and make sure effects and motion timings / easing curves were properly done.

But this is my first time going so overboard (which was good, I got awards on FWA, Awwwards and CSDA after all…), as before all my portfolios were nice but way simpler using WordPress (and the Semplice plugin), and it landed me where I am today anyway…

Can you recommend any design tools or software to use?

I’d say Webflow is a great tool, with lots of resources you can “plug in” to make it customisable without much technical skills (you’ll need some, always…).

Second to it, WordPress is also great for customisation, using Semplice as I said or even Elementor.


How many projects would you suggest featuring?

Not less than 2, not more than 4, unless you’re REALLY good and can show relevant stuff.

Pick the best / most relevant, not necessarily the most recent.

What do you do to keep on track of making sure your portfolio is up to date?

I don’t,  my last portfolio was live from 2018 until now, and I added a new case study in 2019. There’s no time to make it so often, and I honestly envy designers that can update it on a yearly basis (I have a friend that does it and always wins all awards…).

It might be bad advice, but just take it easy. Make it strong and solid enough (that’s why: content first!) so that it lasts.

How do you choose which projects to feature?

It comes down to what you want to be known as. Picture where you want to work, think about what they look for, and that will dictate all else.

In my current portfolio I even showed a lot of personal stuff (like the Playground case below), because I like working on the strong interaction / motion side of Product Design, so it’s always about being strategic in that sense.

What do I need to include in each project case study?

An intro and what is your role, to the bare minimum. But ideally: what is the problem, what is the team, what / how explorations were made (aka your line of thinking / product thinking), results and / or lessons learned.

I was only able to display all of this on my QuantumBlack case study due to NDAs (and just a glimpse, as there was so much more), so for the other jobs I tried to emphasise what you get from working for them, e.g., for a huge company like Facebook: the XFN aspects, working across multiple platforms and teams and disciplines for large scale solutions.

About Jon Vieira…

How did you start your design career?

I’m from Brazil, the son of a photographer / video maker, and I basically started by playing with Photoshop and Adobe Premiere when things got modernised. I then did a lot of After Effects stuff for fun, while I enjoyed programming as a hobby (I was a teenager back then).

Eventually, there was this thing called Flash (RIP), which put all of that together: design, video, code, and that’s how I officially started back in 2006 doing websites (mostly portfolios for myself lol).

After a few months I decided to start an agency (back at home) and things grew and happened, until I was working remotely for a few agencies abroad, and then ended up in London.

PS: my father was my first (free) client hehe.

Where do you get your inspiration from?

For more pragmatic solutions and product thinking, from real world products (forget Dribbble or anything cool when you’re here…)

For more visual explorations, Dribbble and Behance for sure.

I’d say, though, lots of my craft was inspired by Claudio Guglieri as I used to stalk his work back when I started.

What would be your advice for someone starting out in their design career?

First of all, get strong design foundations, and understand what each role does. A researcher is not the same as a UX Designer, and a Product is not the same as UX / UI “per se”. All of these are interconnected somehow, but it takes time to understand where you fit in this.

Don’t ignore the craft (unless your thing is only Research) and “traditional” design: Gestalt, all design theories, art, architecture, film, photography, etc., the more subjects you fall in love with, the better.

And finally, go deep into interaction design – it sounds simple, it’s usually obvious, but there are so many nuances to this.

And then everything comes together as you apply UX thinking, UI / Visual design, motion and interaction concepts to products.

Can you recommend any design courses to take?

I’m mostly self-taught in design (my degree is Marketing), so I’m currently unaware of smaller scale courses at the moment, apart from good stuff I hear about Hyper Island (despite it being presential – not sure now with Covid).

For more UX / Product thinking related stuff, NN/g (Nielsen Norman Group) is a great conference, although very expensive. But I would recommend picking maybe one or two courses to begin with if you want, starting from the more basic stuff going on to more managerial ones. I myself did about 20 courses there and paid more than a car’s cost to them so far…

If you speak Portuguese, let me know as I can recommend a few good Brazilian courses / bootcamps for Product Design or Design Systems!

Check out Jon’s award winning portfolio here:

If you’d like to feature in one of our blogs you can contact the team at

InfoSec People is a boutique cyber security and IT recruitment consultancy, built by genuine experts. We were founded with one goal in mind: to inspire people to find the careers that inspire them. All our actions are underpinned by our core values:

  • Always do the right thing
  • Be the best we can be
  • Add value

Working with exciting cyber and IT scale-ups and FTSE100 corporates, we find the cyber and tech leaders today who enable secure business tomorrow.