How to Make a UX Engineer Portfolio?

The most important thing before you start working on your UX Engineer portfolio is to figure out what is expected of a UXE, which isn’t as easy of a task as it sounds. In this article, we’ll reveal how pioneering companies like Google define the role of UX Engineers and we’ll provide a simple template that you can use to build your portfolio.

For years, major companies have been actively recruiting UX Engineers. Still, the responsibilities of the position are not clearly defined. Different companies and articles interpret the responsibilities of the role very differently. The struggle of defining a role is not new to the world of UX. To this day, there are various interpretations of what a UX Designer should do.

In the majority of cases, UX Engineers are described as out-and-out UX experts and UI designers with front-end engineering skills. So how can you make a UX Engineer portfolio, when the position you are applying for is yet to be defined? First, you’ll need to examine how thought-leading companies define the role then find what they have in common.

Defining UX Engineers based on job descriptions

UX Engineers must possess a considerable skillset that covers UI and UX design, research, and front-end development. It is very important that you at least speak the language and have a deep understanding of all these roles, even if you won’t actively participate in their work. Whether your responsibilities will lean towards design or development depends on the company.

Google considers UX Engineers as “the synthesis of design and development.” Therefore, UX Engineers need both types of skills so they can efficiently collaborate with “researchers and designers to define and deliver new features, test new concepts and assist with final implementation.”

The skills of a UX Engineer

As a UX Engineer, you are expected to possess a considerable skillset that covers UI and UX design, research, and front-end development. It is very important that you at least speak the language and have a deep understanding of all these roles, even if you won’t actively participate in their work. Whether your responsibilities will lean towards design or development depends on the company.

  • From the UX toolbox, prototyping – especially high-fidelity prototyping – is the most common requirement mentioned in UX Engineer job posts. As for research, you will need to be able to create personas, storyboards, and user-flows. What’s more, usability testing, heuristic evaluation, and developing information architecture could also be part of your job. Last but not least, iterations and iterating are both emphasized keywords, so make sure to use them in your portfolio and resume.
  • When it comes to UI design, you will be expected to be able to create high-quality, reusable UI components. You should be familiar with Photoshop, Illustrator and/or Sketch. You should also have a wide range of UI frameworks. Responsivity is an important keyword here, as well as in development.
  • For the development part of the job, the majority of posts require experience with HTML5, CSS3, and JavaScript skills and experience. You should know how to write clean, semantic, and reusable code. Experience with mobile development, version control, and responsive design are also expected of a UX Engineer.

So the keywords you should sprinkle into your resume and portfolio are: iterations, prototypes, reusable, HTML5, CSS5, JavasScript, and responsivity.

A computer showing programming language
Your programming skills will be tested in person, however, you should still include some of your previous work in your UX Engineer portfolio or resume.

Soft skills and responsibilities

Being able to effectively collaborate with researchers, UX Designers, UI designers, front-end developers, and product managers is key. As a UX Engineer, you will have to work together with each of them: you will be required to bring expertise to each of these roles, and help the communication and collaboration between design and development. In the end, you will to define and translate concepts into front-end UIs.

Degrees and experience

When it comes to degrees, a BA in Computer Science or Interaction Design are the hottest ones. Experience-wise 2-5 years are what most posts ask for. If you haven’t worked as a UX Engineer before, professional experience as a UX Designer or front-end developer will do in the majority of cases. Having finished a UX course is also plus in most cases.

Do I need a portfolio as a UX Engineer?

The answer is yes; most job posts call for a portfolio. Based on Google’s UX Engineer job description you need a portfolio that demonstrates “effective design process, and interaction and visual design skills.” When it comes to the development part of your skillset, you should include previously finished work. Furthermore, once you get invited to an interview – in the majority of cases – you will be tested on your programming skills.

To demonstrate your design process and visual design skills, you need a portfolio with well-structured case studies. When it comes to building it, you have two options: code your own portfolio website on a platform like WordPress, or focus on the UX side of it and use a portfolio-building platform like UXfolio. Whichever option you choose, the below template will help you create a UX Engineer portfolio that can prove your skills in each of the mentioned fields. 

The structure of a UX Engineer portfolio

  • Home page
    • Link to resume, contacts, Git, and short bio
    • Links to case studies
  • Case studies

Portfolio home page best practices

Have you realized that many portfolios look very similar? That is because there are templates and structures that simply work. By now, recruiters are used to certain layouts that they can navigate with confidence. So the first thing to remember is that you shouldn’t try to be different for the sake of being different. There are ways to infuse your personality into your portfolio without sacrificing usability. For example, you can use a unique color palette, photo, fonts, and copy that shows who you are.

Make sure that your name and title are prominently featured. If you want to be a UX Engineer, do not call yourself a UX Designer: be confident and state that you are a UX Engineer.

Keep your bio short. Tell recruiters which parts of the job are you passionate about, and don’t forget to include keywords: UX design, research, UI, front-end development, HTML, JavaScript, CSS. Also, mention your experience (if you have it.) So far, the recruiter knows that you are, indeed, a UX Engineer, and you have the required skills to get the job done.

Banner showing a screen with an open portfolio

Your case studies should take center stage in your portfolio, so feature them right on your home page. Take this as another opportunity to showcase your eye for visuals. Create consistent thumbnails that are also beautiful on their own. This can be hard to achieve, but you can check out some examples from other UI and UX Designers who have managed to do it. By this part, the recruiter got a taste of your flawless visual design skills too.

Case studies by UX Engineers

As you’ll see, UX Engineer case studies will have a very similar structure to UX case studies. However, their content should be slightly different, as UX Engineer skills encompass UI and UX designs as well as research. Once again, the above-mentioned keywords can help you highlight the right things: iteration, prototyping. These steps of the design process have to take the spotlight of your case studies.

Furthermore, you will have to shed some light on your eye for visual and UI design. The best way to do is through an impressive hero image that reveals final designs. So do not keep the outcome for your conclusion: go all out right at the beginning.

Whenever possible, you have to also mention challenges in development, how you solved them, or how you communicated the design concepts and collaborated with the front-end team. While writing your case study, don’t forget that you will be the link between these teams.

  • Introduce the project
    • Give a short trailer of the product that you have worked on.
  • Share the problem
    • What problem did you and your team have to solve?
  • Talk about your role and the team
    • Show humility by giving credit
    • This part is very important for UX Engineers
    • Mention collaboration between design and development
  • Talk about the UX methods
  • Talk about the challenges
  • Show design iterations
    • This is also very important in a UX Engineer portfolio
    • Show the prototypes for the different iterations
  • Share the solutions
  • The final UI
  • The impact of your work
  • Learnings
A user-flow with post-its
Make sure that your knowledge of UX methods is clear from your portfolio.


There is some hostility out there towards companies that are posting UX Engineer jobs. This is mostly due to the fact that the role is not well-communicated. UX Engineers are not supposed to replace or substitute for UX Designers or developers. Instead, their job is to make sure that the best results are achieved through the understanding and effective representation of all sides that are involved in the product development process.

Build your UX Engineer portfolio with UXfolio

If you don’t want to build your portfolio from scratch, try UXfolio! Our tool was built with UXers is mind. From your portfolio home page to your case studies, we’ll help you to effectively communicate each step of your process. Our portfolio templates were built based on extensive research and interviews. The text and section ideas will save you plenty of time, especially if copywriting is not your favorite thing. You can sign up and try UXfolio for free!

FacebookTwitterLinkedInCopy Link