Ux Portfolio | UX Design Mastery

50 UX UI portfolio intros you can “borrow” from Google, Apple, Facebook & Uber hires

This article is for aspiring designers who are still creating a strong introduction to their UX or UI portfolio. You may be struggling with how to summarize who you are and what your skills are on your resume, LinkedIn profile, personal portfolio website or even your social media page.

In this article I am going to share with you 50 examples of proven design portfolio introductions from designer hires from Google, Apple, Facebook, Uber, Apple, Spotify, Airbnb, and Amazon. Alot of these examples are from portfolio websites and resumes and we will dissect when to use one. I am also going to explain why it is important to have a great portfolio introduction and the basic structure of one.

Why is it important to have a strong design portfolio introduction?

Firstly, this is definitely what a recruiter is going to read and evaluate first as a potential indicator to whether they should hire you. A portfolio introduction that is vague or incorrect about the person or their skills raises red flags and doubt in the recruiter’s mind from the start and sets the tone for the rest of the interaction with your work. A bad first impression could ultimately hurt your chances of landing a dream job.

Secondly, as a designer you need to be able to sell your skills, your passion and your personality well enough for a potential recruiter to buy into you. People see selling as a bad word but it ultimately makes life easier if you know how to do it. When it relates to your design career you will be ask to not only sell or persuade people on your skills, your ideas and leadership. Look at your portfolio introduction as a concise but holistic statement that you want the marketplace to know about you.

Side note: Obviously portfolio introductions are one part of building a strong first impression with recruits. If you want to learn about enhancing your case studies as well, read this article.

UX Portfolio Case Study template (plus examples from successful hires)
A UX portfolio Case Study template for making your portfolio simpler and less overwhelming with the aim of getting you…uxdesignmastery.com

I have grouped the examples into three types of design portfolio introductions based on length. Which one to use depends on the platform that the introduction will be on. In certain cases like a resume, it needs to be brief but on your personal website or LinkedIn profile you can stretch it out abit more.

Basic structure of a good portfolio introduction

The key elements of this type of design portfolio introduction answers the following questions:
– Who are you
– What you do
– Where you work
– Which city you are from
– What you are passionate about

There are no hard or fast rules to how to structure your personal portfolio introduction but addressing 2 to 3 of these questions will go a long way. As you will see in the following examples, answering those questions creates a strong first impression for your work.

Let’s get started.

1. Short and punchy intro (6 to 15 words)

Josh Mateo, Spotify
Senior Product Designer at Spotify in New York

Will Chan, Facebook
Product Designer at Facebook.

Vera Chen, Facebook
Hello, I’m Vera Chen.
I create Better Experiences for Users/ People

Hiroo Aoyama, Facebook
I’m Hiroo, a product designer. Incoming Product Design Intern at Facebook.

Shelby Lindblad , Facebook
Multi-disciplinary designer in Oakland, CA

Jason Yuan, Apple
Graphic and User Experience designer currently based in Providence.

Sanat Rath, Google
Hi, I’m Sanat. I make word processors delightful at Google Docs.

Sophie Gardner, Google
Product designer, formerly at Google and Palantir.

Wei Huang, Google
I’m Wei, a User Experience designer at Google

Tiffany Wu, Google
Hi! I’m Tiffany Wu, a designer passionate about bridging gaps between people and their goals.

Simon Pan, Amazon
Simon Pan is a Product Designer based in San Francisco.

Christopher Michon, Amazon
Christopher Michon is an Art Director who is designing & illustrating in Seattle.

Tobias Ahlin, Spotify
I design, tinker & teach.

Hold Breton, Spotify
A product designer who values durability, transparency & cadence.

2. Meaty intro (18 to 31 words)

John West, Uber
Hello, I’m John. I’m a Designer in San Francisco & I do UI, UX, branding, animation, packaging and print.

Xiaoxue Zhang , Uber
Currently working at Uber, focusing on Machine Learning and Design System. Previously working as a front-end developer at Tencent for 3 years.

Bre Huang, Uber
I’m Pre, a process-driven product designer and illustrator on a quest to make smart, friendly and impactful experiences for people. Joining Uber Feb 19.

Xiaoxue Zhang , Uber
Currently working at Uber, focusing on Machine Learning and Design System. Previously working as a front-end developer at Tencent for 3 years.

Cas Lemmens, Apple
I’m Cas Lemmens. I design systems. I work as a Human Interface Designer at Apple. Previously Spotify and Hyper Island.

Hailey Cook, Apple
I’m a mission driven designer looking for new opportunities in San Francisco. Check out my work and say hello!

Jesse Chase, Airbnb
Jesse chase is a product designer in san Francisco, currently Sr. Experience Designer at Airbnb.

Keith Ahn, Airbnb
Hi, I’m a designer based in San Francisco. I’m currently a Product Designer at Airbnb. Former Product Designer at Venmo.

Ismael Barry, Airbnb
Product Designer passionate about serving people by solving for their needs and understanding the gravity of those decisions as they Impact our world.

Moneta Ho Kushner, Google
I am creative director and designer from Seattle, passionate about building digital experiences that improve customers’ lives.

Alex Lakas, Google
I’m Alex, a product designer at Google. Over a decade of experience focusing on desktop, mobile, social gaming, e-commerce, & early stage product design.

Rahul Jain, Google
I’m a Product designer focused on creating design concepts and experiences that empowers people and solve real-world problems.

Carson Young, Google
Hi! I’m Carson, a digital product designer. Former UX Design Intern at Google. Student at York Sheridan Design.

Abbey Lee, Amazon
Hey Hey,
I’m Abbey
I’m a visual problem solver and user experience designer who has a passion from motion, visual design, human-centred goodness and the outcome.

Angela Bang, Amazon
Meet Angela. Living and working in the intersection of design and tech — still wants to be an astronaut when grown up.

Brian Lee, Spotify
My name is Brian. I am a digital product designer, born in Singapore, based in Stockholm, Sweden. I currently work at Spotify, with a focus on growth and activation.

Tal Midyan, Spotify
Tal is a multidisciplinary designer and creative based in nYC. Currently working at Spotify as Senior Art Director. Here is a collection of projects for different artists and brands.

Andres Arbelaez, Spotify
Hey! I’m Andres.
Incoming Product Designer at Facebook and CoLab Fellow at IDEO. I study Human-Centered Product Design at the University of Maryland.

Amruta Buge, Spotify
Amruta is an Interaction Designer at Google interested in crafting effective design solutions to create meaningful user experiences.

Mohit Gupta, Facebook
A product designer with a focus in user experience, visual and interaction design. Previously at Facebook and Universe. Currently looking for full-time opportunities.

Hailey Cook, Apple
I’m a mission driven designer looking for new opportunities in San Francisco. Check out my work and say hello!

Kathleen Warner, Facebook
Oh hello there, I’m Kathleen.
I’m a product designer who sometimes jumps into frontend. Currently on News Feed at facebook.

Julia Liang , Apple
I’m glad you’re here!
I’m a designer, artist, and activewear enthusiast based in Berkeley. Thank you for taking the time to view my work!

Netta Marshall, Airbnb
Hello stranger, I’m Netta, a digital designer living in San Francisco. Let’s take a look at what I’ve been creating.

Sally Chan, Spotify
Hello! I’m a designer at the intersection of physical and digital products and services. I do that by making connections out of seemingly disparate ideas to create something meaningful for people.

3. Detailed but relevant intro (34 to 70 words)

Andre Salver, Facebook
I’m a strategy-minded product designer, passionate about designing for emerging technologies, developing wide applications for those technologies and bringing them to market. Also a recent graduate of MHCI+D and Product Designer at Facebook.

Nisa Andrews, Uber
I’m an independent decentralised apps designer and product designer at Uber. I’m passionate about solving problems for humans, particularly where physical and digital worlds meet. Peep my work below or learn more about me.

Ben Minard, Apple
My name is Ben Minard and I am a UI/UX designer at Apple Inc, in Cupertino, California. I recently graduated from the University of Illinois at Urbana-Champaign with a BFA in Graphic Design. Feel free to drop me an email at khdfkd@gmail.com and check out my work on Dribbble.

Craig Dehner, Apple
I’m Craig Dehner, and I help companies enhance their mobile experience through smart UI design and motion. Between working on the Human Interface team at Apple, to cutting edge startups like Airbnb and Lyft, the interfaces I’ve worked on have reached millions.

Eric Lobdell, Airbnb
Bay Area designer passionate about problem solving exposing and building consumer facing products. Currently designing a new typeface, hand-lettering, and collecting vinyl, I’ve poured my heart into many startups and worked at a handful of great companies: Google, MLB, Opera and #M. You can find more of my work on Dribbble. If you’ve got an exciting challenge and you’d like to work together, let’s talk.

Kaiwei Wang, Google
As a designer, I try my best to make sure the design decisions are the results of a human-centred process. I keep learning new tools and trends while telling myself — the user gives the most valuable insights and the team is my strongest backbone.

Kevin Chang, Google
Hey, I’m Kevin
I’m a product designer & engineer with skills and experiences that allow me to take ideas from concept to mock to prototype to production.

Formerly AR & VR at Google Daydream, design at Google Lens, product at BayRu. Computer Science and creative writing at Stanford University.

Yuan Gu, Amazon
Hello, I am Yuan

I am currently a UX Designer at Amazon. I have worked on a variety of projects on different platforms including but not limited to iOS, Android, Windows, etc. The best part of my job is to work the design magic around customer’s needs and seeking the balance between usability and aesthetics. This is a showcase of the projects I’ve worked on and hope you will enjoy it.

Samuel Hoang, Amazon
I am a product designer crafting the future of user experiences for consumer devices and services. This is my portfolio of publicly released work. Many of my current and past projects cannot be included here due to Non-Disclosure Agreements.

Conclusions and takeaways

Feel free to try different portfolio intros. Don’t feel boxed into one format but try what suits you at that point in time. To conclude your design portfolio introduction should answer the following questions:
– Who are you
– What you do
– Where you work
– Which city you are from
– What you are passionate about

What to do next

Bookmark this article so you can read it later.

Help me get the word out by sharing this article on platforms like Pinterest and X(formerly Twitter).

Check out these popular articles related with portfolio creation or just follow for more unique UX articles like this one. Cheers!!

5 reasons why you are not getting any UX interviews and what to do about
This article is for those of you who are struggling to making any meaningful progress towards the goal of getting your…uxdesignmastery.com

Is UX design a good fit for you? 8 personality traits you must have.
Is a UX design career a good fit for you? 8 personality ux design skills you must have. How to improve ux skillsuxdesignmastery.com

5 reasons why you are not getting any UX interviews and what to do about it

This article is for those of you who are struggling to making any meaningful progress towards the goal of getting your first UX role. I recently had a student reach out to me to help them figure out why their portfolio was not getting them interviews and what it would take to land just a junior UX role or even an internship.

After doing a short UX course and crafting a website portfolio of projects, you may still have not gotten any responses for the UX positions you applied for. You haven’t really had anyone to guide you as to what exactly you should be doing, or where to go from here and you starting feel pretty down about the whole thing. You put a lot of effort in the classes and designs and its frustrating to think it may all have been a waste of time.

I have fortunately been through the same experience while transitioning from a totally different field but more importantly, managed to overcome those challenges to the point of being head hunted for my first two UX roles. In addition, as a UX team manager who goes through a ton of UX portfolio applications so I am able to shed some light of why certain candidates get the call for an interview and others just don’t make the cut.

Let get started with a blunt but necessary truth you might not want to hear.

Your UX portfolio work is currently not good enough.

It is imperative to understand that you are in competition with a multitude of other designers for the design roles that you are applying to and very few actually get called back for an interview. Your portfolio application is that first critical touch point that a recruiter will have with your credentials and your skills. You can not afford for the quality of your portfolio work to be ordinary or you will be passed over.

One of my core responsibilities as a team manager is hiring capable designers that will be a good fit for what we need in the team and the business as a whole. In a day, I can look at close to 30 to 40 applications and spend roughly 2 to 4 minutes on each one. This means your portfolio has to present your best and most relevant work right from the start.

But what is good enough work? Let’s get into detail about common mistakes and fixes that I regularly encounter.

1. Half baked UX case studies

I find that too many times, applicants will submit a UX portfolio with case studies that have 3 or 4 screens and no other detail. Don’t be lazy when creating UX case studies. You have put in so much time and effort into learning about the design field, joining groups, watching videos on UX, doing UX courses then you fail at the last hurdle because you put a small amount of effort into actually crafting proper portfolio case studies.

UX portfolios are different in that we are assessing your skills against what is typically expected in a UX role. Research analysis, testing, wireframing, data metrics and presentation. Design screens alone will not tell us much about all these skills and we will go someone else who shows these attributes more prominently in their UX portfolio.

If you need a reference, I have written an article a successful structure for UX case studies complete with examples. Even if you are starting out as a graduate, transitioning from a different field or applying for a junior role, this will give you strong starting point.

UX Portfolio Case Study template (plus examples from successful hires)
Your portfolio is the most critical piece of the puzzle when it comes to selling your design skills to recruiters and…uxplanet.org

In case you don’t read the article the key 8 point template structure is as follows. The article goes into much more detail with examples.

Project Title & Subtitle (A headline and subtitle that indicates the name and goal of the project)
Client/Company/Project type
Project date (When did you work on the project)
Your role (What you were responsible for on the project)
Project Summary/About this Project (An overview that summarizes the project, goal and results)
The challenge (What specific problem, user needs, business requirements and/or pain points that the project solves. Were there any technical constraints or business KPIs you had to keep in mind? Who are you users and what are their specific needs)
Solution (What method/process were used to solve specific problem, user needs, business requirements and/or pain points? How did features address the objectives?)
Results (Project success metrics, awards, reflections, project next steps and/or lessons learnt)

You can also check out an example of how to actually create a good case study from scratch using this template.
UX Case Study Example #1 plus free template
Today I am going to fill in the UX Portfolio Case Study template from scratch and I will use an example UX case study…uxplanet.org

UX Case Study Example #2 plus free template
You may be wondering how should you organize a large amount of project information in a case study so that it isn’t…uxplanet.org

Without these case study sections in your portfolio, there are too many questions left unanswered about the project work and you skills which in turn sows doubt into a recruiter’s mind about shortlisting your application.

2. Put your best work first

This is a simple one but it is surprising how many people do not do this. If you have 4 good case studies in your portfolio, put your best ones right at the top of your portfolio. As a recruiter, I should not have to look for them. Again as I have said previously, and maybe that needs to be reiterated:

Recruiters do not have time to go through your entire portfolio

The first 2 to 3 case studies in your UX portfolio are most likely to be reviewed so make sure they are your best.

What does best work mean? It means work that is relevant to the company you are applying for and has enough depth structure wise to showcase your skills. For digital agencies, showcase web projects. For mobile app companies, showcase mobile app case studies, even if they are conceptual. That shows relevancy to the work that the company does, otherwise a recruiter has to make a judgement call on how your skills could apply to their business. Other portfolios that are better aligned with what the company does, will more likely get a call back.

3. Make the recruiter’s job as easy as possible

As designers we tend to forget the objective of a portfolio. A portfolio is meant to showcase your skills to a prospective employer or client about your skills.

The recruiters are ultimately your real audience not other designers.

So we have to cater to their needs as much as possible.

Use a platform or format that will be easy for them to go through the work. Whether its hosted on design sites like Dribbble.com or Behance.net, complied in a PDF document, make sure the recruiter can easily open the file format on their machine. Export work as PNGs/JPGs and don’t assume a recruiter has the program you used to create the work.

If you are hosting your portfolio on a website, make sure that the site is up and does not have usability issues when navigating your work. Nothing worse than opening a link that leads to a 404 error page.

Provide the correct contact details and ensure links to the external sites that you worked on, work. Otherwise take screenshots of the final implementation and present those as opposed to a site which might be down.

4. The company/role might not be for you

With the individual that reached out to me for help with their portfolio, we soon discovered after a series of conversations that they were applying to the wrong companies. We had to take a step back from the applications and portfolio creation to honestly evaluate if they were passionate about the field.

The truth is your passion for a field does come through the work you present in a portfolio.

If it’s all over the place and no attention to detail has been displayed, it’s clear to the recruiter that you might not have the right attitude to the work and potentially to your future role.

We eventually figured out that they would rather be doing a role that involved video game UX. That gave us a end goal to aim for and dictated everything else, the type of case studies to create, the companies to apply to, the role to apply for and the designers to network with.

5. Test your portfolio

This last point is pretty straight forward but it will require you to be vulnerable and humble enough to ask for help. Being a UX candidate I actually expect you to test your portfolio with other people. It’s what you will be doing on the job on a weekly and potentially daily basis. At least get their honest opinion on whether they would hire you and if there are any glaring mistakes in the portfolio. This is challenging to do but let’s consider the alternative.

If you prematurely send out your portfolio to really good companies and you don’t make it in, there may be a company policy in place the prevents you from applying again until a certain time period has elapsed.

This could be as long six months. And if you are email blasting your portfolio to every potential position available, you may be potentially shooting yourself in the foot.

My advice is to apply to a couple of similar positions (2 or 3) and get feedback from those applications. Then use this feedback to revise your portfolio to match the needs of the next company you are applying to. This way you can iteratively create a better portfolio every time you apply.

What to do next

Hopefully the points in this article have been helpful in identifying where you need to improve and if you are terribly overwhelmed give me shout and let’s see where I can help.

UX/UI projects for beginners #6: Food App

This is the sixth design portfolio project for UI and UX designers looking to build a portfolio of credible work. A detailed client brief that is time-boxed, detailed, and crafted realistically enough to give you a hands-on experience of doing a real project. Each portfolio project is meant to help you create realistic work you can add to your portfolio and test if design really is for you.

Today I have a saucy one for you, excuse the pun. A UX/UI project for beginners on designing a food app.

We all have at some point felt too busy (lazy) to cook and reached out for our phones to order some delicious food. The convenience of ordering food is undeniable and such a ubiquitous reflex that we do not even think about it. I personally enjoy cooking for the family but there are times when I cannot due to the kids, an event or work.

Designing an app is unique in that there are particular guidelines and best practices already outlined for Android and IOS that are different in some way to web patterns. This challenges the designer to be able to understand how platforms affect design.

As is usually the case, I have included the following with each design brief:

Timeline (For this to be realistic each brief has a timeline that is as close to real-world work as possible)
Objectives (What is REQUIRED by the client. This part usually trips designers up as they go off designing what is not required)
Platform(Where your designs will live. Understanding these platforms will give a well-considered solution)
Target audience (Users always come first and the design must accommodate the target audience’s pain points)
References (If you are not sure where to start, clients normally give a set of examples or references they like. The closer the design solution is to the references, the fewer revisions a designer will have to do)
Deliverables (Most importantly how the solution should be delivered. These represent what a well-detailed portfolio case study looks like so hit it out of the park)
Recruiter advice (Portfolio advice from creative directors, CEOs and leading design creatives from the biggest companies)

Let’s begin.

UX UI Design Portfolio Project 6: Designing an Food App

Client
OhSoYum

Timeline
1–2 weeks. The project is expected to be completed within two weeks.

Objectives

We are looking to create a food delivery app that will allow users to order food from their favorite restaurants and have it delivered to their doorstep. The app will need to be user-friendly, visually appealing and efficient. “Online food delivery has become a $200 billion global industry, yet there is still plenty of room for growth as people increasingly opt for the convenience of delivery.” – Bloomberg

Success Metrics to Consider:
User acquisition and retention rate
Order volume and revenue growth
User engagement and time spent on the app
Positive reviews and ratings

Target Audience

Marcus Lee, 32 | Busy Professional
NEEDS
Does not have the time to cook and prefer to order food online for convenience. They prioritize quick and reliable delivery and are willing to pay more for premium services. Health conscious and wants to eat healthy meals. She also has a tight budget and wants affordable options.

Sophia Patel, 37 | Health-Conscious Eater
NEEDS
College student who prioritizes healthy eating and has specific dietary restrictions. Always looking for options that fit their lifestyle and are willing to pay more for high-quality, healthy food. On a tight budget and wants affordable options

Sandra Jenkins, 35 | Budget-Conscious
NEEDS
Has two kids and a busy job. She needs an app that offers healthy options for her family as well as quick and convenient delivery options on a limited budget. Wants to feed her family healthy meals but doesn’t have the time or energy to cook after a long day at work.

Requirements

The app should allow users to browse and order from a variety of restaurants in their area.
Users should be able to customize their orders, including special instructions and dietary restrictions.
The app should provide real-time updates on the status of their order, including estimated delivery time.
Payment options should be secure and user-friendly.
The app should have a feature for users to leave reviews and ratings of restaurants and drivers.

Platform

The app should be compatible with either iOS or Android devices. Pay attention to IOS and Android guidelines.

IOS guidelines
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

Android guidelines
https://material.io/design/usability/accessibility.html#hierarchy

References

References that our company would like the app to follow in terms of structure and layout. It will be your job to replicate something close to these examples but add your creative flair to it.

Uber Eats: https://www.ubereats.com/
DoorDash: https://www.doordash.com/
Grubhub: https://www.grubhub.com/

Deliverables

• Onboarding screens – These screens will introduce the app to new users and explain how to use it. They might include a welcome message, an explanation of the app’s features, and instructions on how to create an account.

• Home screen – This is the main screen of the app that users will see when they open it. It might include a search bar, categories for different types of food, and a list of popular restaurants.

• Restaurant details screen – When a user selects a restaurant, they will be taken to a screen with more information about that restaurant. This might include the menu, photos of the food, and reviews from other users.

• Ordering screen – This screen will allow users to place an order from the restaurant they’ve selected. It might include options for customization, like choosing toppings or specifying dietary restrictions.

• Payment screen – After a user has placed an order, they will need to enter payment information. This screen might include options for different payment methods, like credit card or PayPal.

• Order tracking screen – Once an order has been placed, users will want to know when it will be delivered. This screen might include real-time updates on the status of the order, like when it’s being prepared, when it’s out for delivery, and when it’s been delivered.

• Profile screen – This screen will allow users to manage their account information, like their name, address, and payment methods. It might also include options for viewing past orders and saving favorite restaurants.

Testing and Results section

Show your wireframes to 5 people and ask them using your designs what they think about them, what they would improve, and an overall rating.

Take their feedback, iterate the designs, and have a final round of testing with 5 users. See that you improve your overall rating. If not go back to the drawing board and change your designs and retest.

Advice from recruiters

I want to see case studies that demonstrate a deep understanding of user needs, a creative approach to problem-solving, and a passion for delivering exceptional user experiences.
John Smith, Senior Product Designer at Doordash

I’m looking for designers who can demonstrate how they’ve solved complex problems in simple and elegant ways. I want to see how you can take a user-centered approach and turn that into a product that’s both delightful and effective.
Haraldur Thorleifsson, Head of Design at Uber

Show me how you’ve used data and research to inform your design decisions and how you’ve collaborated with cross-functional teams to deliver successful products. Don’t just showcase the final design, but also the process and the challenges you faced along the way.
Jane Doe, Senior UX Designer at Grubhub

Your portfolio should showcase your ability to think critically about design problems, communicate your ideas clearly, and collaborate effectively with others. It’s not just about pretty visuals, but about the insights and rationale behind your design decisions.
Kim Williams, Director of UX Design at Amazon

I love to see designers who can showcase a process, not just the end product. How did you get there? What were the decisions and tradeoffs you made along the way? How did you incorporate feedback and iterate? All of this tells me a lot about how you approach design problems and how you work with cross-functional teams.
Julie Zhuo, VP of Product Design at Facebook

What to do next

Download a portfolio project PDF of this design project and all the other existing design projects to review in your own time.

UX/UI projects for beginners #5: Property Website

This is the fifth design portfolio project for UI and UX designers looking to build a portfolio of credible work. A detailed client brief that is time-boxed, detailed, and crafted realistically enough to give you a hands-on experience of doing a real project. Each portfolio project is meant to help you create realistic work you can add to your portfolio and test if design really is for you.

Continue reading “UX/UI projects for beginners #5: Property Website” »

UX Case Study Example #2 plus free template

You may be wondering how should you organize a large amount of project information in a case study so that it isn’t overwhelming to recruiters? What information is vital to include in a portfolio case study? Or maybe you are just struggling to bringing together your wireframes, strategies and sections into a clean, attractive narrative. Don’t worry this article is for you.

I recently shared a UX case study example in the previous article that described how to use the free UX Portfolio Case Study template to rapidly create comprehensive case study for your design portfolios from scratch.

The free UX Portfolio Case Study template is based on over 60 portfolios of successful design hires from Facebook, Amazon, Uber, Twitter, Apple, Google, LinkedIn, Dropbox and the insights of top design recruiters from around the world.

What you are going to learn

Today I want to walk you through another UX case study example on how you can use the UX Portfolio Case Study template from scratch, to create a UX case study for your UX portfolio. We will walk through the creation of each section, step by step so that you can replicate the process for your cases studies.

The project

The UX portfolio project I will use is one I did as a Senior UX Designer at a digital marketing agency. The brief was to completely redesign a responsive web platform for one of the leading investment firms in South Africa, Alexander Forbes. I worked with a project manager, a UI designer, a back-end developer and a front-end developer.

I did the work some time ago so the challenge becomes trying to remember what I did and collecting enough content for a solid case study. This is where the template comes in handy.

The secret sauce

The core idea is to try to separate your case study creation process into a writing component and designing component so that you can tackle each one without getting stuck or overwhelmed.

The template ensures that your case study has a good project narrative and understandable structure.

This also allows you to plan more effectively what design artifacts you will need in your case study. It’s a system by which you can then rapidly roll out multiple case studies without forgetting anything that’s relevant to a recruiter or client.

In case you did not read the previous article, the UX Portfolio Case Study template has 8 critical sections that recruiters are looking for.

UX Portfolio Case Study template sections

Project Title & Subtitle (A headline and subtitle that indicates the name and goal of the project)
Client/Company/Project type
Project date (When did you work on the project)
Your role (What you were responsible for on the project)
Project Summary/About this Project (An overview that summarizes the project, goal and results)
The challenge (What specific problem, user needs, business requirements and/or pain points that the project solves. Were there any technical constraints or business KPIs you had to keep in mind? Who are you users and what are their specific needs)
Solution (What method/process were used to solve specific problem, user needs, business requirements and/or pain points? How did features address the objectives?)
Results (Project success metrics, awards, reflections, project next steps and/or lessons learnt)

Making it as concise and easy as possible to digest

Now writing and condensing long texts for these sections can be very challenging. I have included how long each section should be so that you have a guide to your writing length. Let’s walk through each section of the UX Portfolio Case Study template and fill it in.

1. Project Title & Subtitle

Length: Project Title (1 line) & Subtitle (1–2 lines)

This one is pretty straightforward. I used the name we had for the project at the agency. I generally like to use the client’s brand name as it is recognizable to recruiters and brief enough to fit any case study cover. I also added a sub-title to further explain what was built for the client and give more context around the project title.

2. Client/Company/Project type

Length:1 line

Unless stated in the title, this helps build more context to who the project was for. This was a commercial project for a client so I wrote the name of the client’s brand.

3. Project date/duration

Length:1 line

When or how long the project was helps the recruiter establish whether this is your most recent work and most importantly, to gauge where your skill level is. Always try to put up work that is recent because it’s an accurate reflection of your skills. This one was a bit of an old one that I had not drafted a case study for.

4. Your role

Length:1–2 lines

This is a section to state everything you did and were responsible for. Recruiters are looking to accurately assess your skills in the context of the entire project’s execution. I state that I was the Senior UX Designer on the project then briefly note down all the activities I did for the project over the course of several months. If you worked with someone on the project make sure to state it.

5. Project Summary

Length: 1–2 paragraphs

This is a critical section for any reader who does not have a lot of time to read through the entire case study but wants a brief summary of the project, goals, and results. They may be going through a stack of applications and only have a few minutes to scan over one or two projects in your portfolio.

I have kept my summary to three long sentences. The first is the context of the brand. The second touches on the challenge and problem we were attempting to solve. And the last sentence describes the platform this is being built for.

6. The Challenge/Problem

Length: 2–3 paragraphs

This section specifically looks at the problems the project is trying to address. While keeping this paragraph concise I dive into the details of the problem that the client and their user were experiencing. If you are struggling with this part, take a look at your client’s original project brief. The problem you set out to solve will be stated under objectives.

7. The Solution

Length: As long as needed

This is the longest and more time consuming section to fill in depending on how long ago the project was and how fresh in your mind it still is. For this section I outlined the design process steps and methods followed during the project. I wrote down the high level project steps but at this point I am already thinking of the the relevant design artifacts recruiters might want to see. Everything that I produced from sketches to visual mockups to prototypes.

8. Results

Length: 1 paragraph

The critical last section concludes the case study by outlining any project success metrics that were achieved. I was fortunate that we wanted to report back to the client how well the site had performed so this information was dug up from the Google Analytics tracking. In most cases clients are happy with just a launch and its really up to you to follow up and get the project impact.

Okay, now that we have filled in our UX Portfolio Case Study template we can move on to getting our design artifacts together. I am happy with the content I put down and importantly, I have not missed any section.

Putting it together

This part is really up to you and how you tackle it is going to depend on where you are going to host your UX case study. If you have a portfolio site you can put the text we just typed down on a page and fill in the gaps with images and project artifacts.

I have a Behance account where I house my projects and merely need to upload images and write the text in, then publish the portfolio. Taking it a step further I integrate the text and imagery in Sketch/Photoshop than just purely uploading the project’s web screenshots.

If you would like to use my Behance layout your can check out my portfolio kit with pre-made, fully customizable professional artboards for every section of a portfolio.

How to enhance your UX Case Study

Key things that I always like to include in my case studies to make them more interactive and engaging:

Brand imagery to create a more immersive narrative
A prototype/GIF of the final solution

UX Case Study Folder structure

I like to create a folder structure for housing everything I will need as follows.

Client brief (Optional)
Website screenshots (Screenshots of the final website)
Behance submission (Final design exports for Behance upload)
Wireframe screenshots (Wireframe and UI designs exports in here)

Here are some of the final case study design screens with the text we filled out in the UX Portfolio Case Study template.

The intro has most of our UX case study sections covered in one go. Super important for recruiters without a lot of time.

The About and challenge sections come directly after that.

Then we can dive into the work. Here is a tiny bit of the Solution section showcasing a wireframe and UI design.

And lastly the results to round off the case study.

Here is the link to my portfolio and the full project.

Calvin Pedzai on Behance
I conduct website and mobile app usability audits, heuristic evaluations, user journeys, competitor analysis, user…www.behance.net

What to do next

If you really enjoy this article and would like to get down to work, download my UX Portfolio Case Study template for free. Its included with the Design Portfolio Layout Guide, which includes 20 online case studies and example scripts for each case study section.

DOWNLOAD GUIDE

What to read next

UX Case Study Example #1 plus free template

How to fill in the UX Portfolio Case Study template from scratch and I will use an example UX case study from my portfolio.

In my last article, I shared the free UX Portfolio Case Study template that I developed based on over 60 portfolios of successful design hires from Facebook, Amazon, Uber, Twitter, Apple, Google, LinkedIn, Dropbox and the insights of top design recruiters.

We explored what recruiters look for in UX job applications/portfolios and then dived into successfully structuring any UX case study, even conceptual projects.

What you are going to learn

Today I wanted to go a step further and walk you through how to fill in the UX Portfolio Case Study template from scratch and I will use an example UX case study from my portfolio.

The core idea is to try to break down your case study creation process into a writing component and designing component so that you can tackle each one without getting stuck or overwhelmed.

The template ensures that your case study has a good narrative and understandable structure.

The UX Portfolio Case Study template has 8 critical sections that recruiters are looking for.

UX Portfolio Case Study template sections

Project Title & Subtitle (A headline and subtitle that indicates the name and goal of the project)
Client/Company/Project type
Project date (When did you work on the project)
Your role (What you were responsible for on the project)
Project Summary/About this Project (An overview that summarizes the project, goal and results)
The challenge (What specific problem, user needs, business requirements and/or pain points that the project solves. Were there any technical constraints or business KPIs you had to keep in mind? Who are you users and what are their specific needs)
Solution (What method/process were used to solve specific problem, user needs, business requirements and/or pain points? How did features address the objectives?)
Results (Project success metrics, awards, reflections, project next steps and/or lessons learnt)

Let’s begin.

The project

The UX portfolio project I will use is one I did as a Senior Designer at a digital marketing agency. The brief was to create a responsive website/microsite for an annual financial publication for an Asset Management company.

Now let’s walk through each section of the UX Portfolio Case Study template and fill it in.

1. Project Title & Subtitle

Length: Project Title (1 line) & Subtitle (1–2 lines)

This one is pretty simple. I used the name we had for the project at the agency. It’s brief enough to fit any case study cover but does show the brand name, and the nature of the product, a journal. I added a sub-title to further explain what the heading means, and give more context around the project title.

2. Client/Company/Project type

Length:1 line

Unless stated in the title, this helps build more background to who the project was for. This was a commercial project for a client so I wrote the name of the client’s brand.

3. Project date/duration

Length:1 line

4. Your role

Length:1–2 lines

This is a section to state everything you did and were responsible for. Recruiters are looking to accurately assess your skills in the context of the entire project’s execution. I state that I was the Senior UX Designer on the project then note down all the activities I did on a high level, for the project over the course of several months.

5. Project Summary

Length: 1–2 paragraphs

6. The Challenge/Problem

Length: 2–3 paragraphs

7. The Solution

Length: As long as needed

8. Results

Length: 1 paragraph

Putting it together

This part is really up to you and how you tackle it, is going to depend on where you are going to host your UX case study. If you have a portfolio site you can use the template content on a site page and fill in the gaps with images and project artifacts.

How to enhance your UX Case Study

Key things that I always like to include in my case studies to make them more interactive and engaging:

A video or gif of the final product
A prototype
Brand imagery to create immersive narrative

UX Case Study Folder structure

I like to create a folder structure for housing everything I will need as follows.

RAW ( I collate screenshots of the final project, UI designs and wireframe exports in here)
Images (Relevant visual imagery that can be interlaced between project sections)
Videos (Optional. In most cases there won’t be one)
Behance submission (Final design exports for Behance upload)

Here are some of the final design screens with the text we filled out in the UX Portfolio Case Study template. Go to this link to view the full case study.

The intro has most of our UX case study sections covered in one go. Super important for recruiters without a lot of time.

The About and challenge sections come directly after that.

Then we can dive into the work. Here is a tiny bit of the Solution section showcasing a wireframe and UI design.

And lastly the results to round off the case study.

Here is the link to my portfolio and other UX case studies.

Calvin Pedzai on Behance
I conduct website and mobile app usability audits, heuristic evaluations, user journeys, competitor analysis, user…www.behance.net

If you would like to get down to work, download my UX Portfolio Case Study template for free. Its included with the Design Portfolio Layout Guide, which including 20 online case studies and example scripts for each case study section.

DOWNLOAD GUIDE

UX/UI projects for beginners #4: Agency website

This is the fourth design portfolio project for UI and UX designers. A detailed client brief that is time-boxed, detailed, and crafted to give you a hands-on experience of doing a real project. Each portfolio project is meant to help you create work you can add to your portfolio.

The other projects in the series from UX Design Mastery

UX/UI portfolio projects for beginners #1 Blog Website

UX/UI portfolio projects for beginners #2: eCommerce site

UX/UI portfolio projects for beginners #3: Travel App

A little about me

My first job in design was for a small design agency as the Lead UX/UI designer.

I met the CEO over coffee for my interview and he hired me on the spot and asked me to name my salary.

That totally took me by surprise because it meant I had successfully transitioned from being a Java Developer to being headhunted for a design role within a year. He had pointed to the fact that my portfolio had demonstrated enough creative potential to get the job done rather than work experience.

You see, I had not done an internship, gone to a design school, or worked in a design company but I still had great portfolio projects that I had conceptualized from nothing. The design projects were detailed, tackled a real problem, and demonstrated my design process and design skills.

The same thing could happen to you. I was fortunate that I had practiced my design skills to the point that someone could see the value I could bring to their company.

A key takeaway is I had designed solutions to projects aligned with what I actually wanted to do on the job.

So if you want to work for an agency do a number of campaign projects. If you want to work for an app development house, do a number of mobile app designs. Treat all your conceptual projects as gateways to where you want to be. This is what these design projects are for.

Today’s project is to create a responsive agency website for desktop and mobile.

About Design portfolio projects for UX and UI designers

Included in each design brief is the following:

Timeline (For this to be realistic each brief has a timeline that is as close to real-world work as possible)
Objectives (What is REQUIRED by the client. This part usually trips designers up as they go off designing what is not required)
Platform(Where your designs will live. Understanding these platforms will give a well-considered solution)
Target audience (Users always come first and the design must accommodate the target audience’s pain points)
References (If you are not sure where to start, clients normally give a set of examples or references they like. The closer the design solution is to the references, the fewer revisions a designer will have to do)
Deliverables (Most importantly how the solution should be delivered. These represent what a well-detailed portfolio case study looks like so hit it out of the park)
Recruiter advice (Portfolio advice from creative directors, CEOs and leading design creatives from the biggest companies)

Let’s get into it

This time we look at an agency website project.

UX UI Design Portfolio Project 4: Designing an Agency website

Client
Choose any design agency brand of your liking

Timeline
2–3 weeks

Objectives

Create a responsive website that allows an agency to:
• Market who they are, what they do and what they stand for
• Showcase their work case studies and awards they have won
• Contacted by potential clients
• List available positions and receive job applications

Platform

Please design a design agency website for desktop (1200px wide and mobile view 365px wide)

Limitations/Specifications

The site must load quickly hence any interactions or large imagery must be kept to a minimum.

Target Audience

Deliverables

Compile a case study on Behance(Get a free account) laid out like this; Name of project, date, your role, project type(Concept)
• Research: (Refer to the References provided)
• Highlight 3 enhancements or unique features you have included in the solution that makes the site unique and allows it to stand out from other design agencies
• Sketch of conceptual and initial ideas
• Wireframes and prototype of
⁃ Homepage with work, values, team, and contact us calls to action
⁃ Our work with filter by industry, date, and awards
⁃ About us with values and team bio
⁃ Contact us with a map and form
⁃ Careers with a culture section and application form

These should be both desktop and mobile screens

• Testing and Results section: Show your wireframes to 5 people and ask them using your designs what they think about them, what they would improve, and an overall rating. Take their feedback, iterate the designs, and have a final round of testing with 5 users. See that you improve your overall rating. If not go back to the drawing board and change your designs and retest.

References

References that the company would like their website to follow in terms of structure and layout. It will be your job to replicate something close to these websites but add your creative flair to it.

Advice from recruiters

I don’t want to see every piece of work that you have ever done. Pick your favorite pieces. It doesn’t need to be for the most famous or biggest clients as long as you are proud of it and want to talk about it.
I would like to see more personal projects in portfolios. The work that you did in the best of conditions and with full artistic freedom

We want to see work that is consistently good. The best portfolios take a well-rounded and curated approach to showing work. Ideally, we’d see a handful of solid logos, examples of web design, examples of illustration, and some editorial work.
They should briefly describe the work and the particular role they played. We get a little nervous when someone’s portfolio includes a lot of team projects. We want to clearly understand someone’s strengths and weaknesses before we hire them.

Telling the story of your work — how it all relates, why it’s important — matters. Additionally, it’s important for designers to show that they understand the goals of their work and that those goals touch on both user and business needs. A pet peeve of mine is when there really isn’t a good reason behind the work, or the designer doesn’t show any interest in or understanding of its impact on the business or user.

If you would like a portfolio project PDF of this design project along with other projects you can download it below. Included is a portfolio project layout template that outlines how to present your project your final case study.

UX Portfolio Case Study template (plus examples from successful hires)

Your portfolio is the most critical piece of the puzzle when it comes to selling your design skills to recruiters and clients. It’s the single most vital component of any design career move you will ever make.

A UX case study is a detailed but summarized presentation of a design project, its goals and objectives, the research methods used, the process to find a solution and the results achieved.

I hope to share with you a UX portfolio Case Study template for making your portfolio simpler and less overwhelming with the aim of getting you a job interview and potentially a higher paying job. I happen to have stumbled upon it through trial and error but it has resulted in me being headhunted for my last three Senior roles in UX at two agencies and a product company.

But first let’s start at the beginning.

When I was trying to design my portfolio, I used to spend countless hours digging up relevant work from past projects, downloading a ton of device mockups, and implementing every tactic from articles on portfolios that you can find.

The problem with that was it had been months and I was still not done. Every little inspiration I found, seemed to demand a new version. I also was not getting any interviews for the job I had applied for.

How long should a portfolio case study be? What should I include? I felt stuck and overwhelmed by every single detail.

The worst part was, I was not even sure if what I had was good enough to get an interview, let alone a job.

You know.

That queasy, gut-twisting anxiety in the pit of your stomach won’t go away no matter how much you tweak your portfolio.

By spending time studying other design portfolios of not just every designer but successful hires, I was finally able to come up with a system that covered what recruiters actually wanted to see.

Why the structure of a case study is important

Recruiters spend a short amount of time on each candidate’s portfolio, scanning for information in the case studies that relates to the role’s skills and responsibilities.

To stress how each important your case study detail and layout is, let’s look at how two recruiter personas who have different business needs might look at the information provided in a designer’s case study.

Recruiter 1

Peter

CEO
Works at small mobile app company, limited staff.
Results orientated, only has 5 minutes to look through a portfolio.
Looking for a freelancer/part-time designer.

A quick view of a candidate’s case study should answer:
– Is their work relevant to what we do?
– How much work did they do on a project
– Can they work unsupervised?
– Have they seen a project through to launch?

Recruiter 2

Dan

Creative Director
Looking for a full-time designer
Works for a large agency.
Leads and supervises the design team.
Process orientated, has time for a detailed case study.

A quick view of a candidate’s case study should answer
– Is their work relevant to what we do?
– Is this their most recent work and skills level
– Do they understand what problem they were solving (big-picture thinking)
-Did the solution solve the problem they sort out to address

These two recruiters require different forms of information and detail from your case study. It is up to you to make sure the case studies you create cover what they are looking for in order to land interviews.

Don’t just put a portfolio case study together and hope it will be good enough.

The secret to a portfolio case study that can get you an interview and explode your career opportunities lies in a creation process that is aligned with your audience’s needs.

That’s why I want to share with you this UX Portfolio Case Study template from UX Design Mastery. It is based on over 60 portfolios of successful design hires from Facebook, Amazon, Uber, Twitter, Apple, Google, LinkedIn, Dropbox and the insights of top design recruiters.

How do you write a UX case study

The core idea is to try to break down your case study creation process into a writing component and designing component so that you can tackle each one without getting stuck or overwhelmed.

This template is meant to help outline all the text that is going to be in your case study that recruiters/clients are looking for.

This ensures that your case study has a good narrative and understandable structure. This also allows you to plan more effectively what design artifacts you will need in your case study. It’s a system by which you can rapidly roll out multiple case studies without forgetting anything that’s relevant to a recruiter or client.

The UX Portfolio Case Study template has 8 critical sections that recruiters are looking for.

UX Portfolio Case Study template

Project Title & Subtitle (A headline and subtitle that indicates the name and goal of the project)
Client/Company/Project type
Project date (When did you work on the project)
Your role (What you were responsible for on the project)
Project Summary/About this Project (An overview that summarizes the project, goal and results)
The challenge (What specific problem, user needs, business requirements and/or pain points that the project solves. Were there any technical constraints or business KPIs you had to keep in mind? Who are you users and what are their specific needs)
Solution (What method/process were used to solve specific problem, user needs, business requirements and/or pain points? How did features address the objectives?)
Results (Project success metrics, awards, reflections, project next steps and/or lessons learnt)

Let’s look at these sections in detail, roughly how long each one should be and share some real life examples from successful hires.

Project Title & Subtitle

Length: Project Title (1 line) & Subtitle (1–2 lines)

A short concise headline that couples the name of the brand/application/client and goal of the project. A lot of designers tend to rush the naming of their project but it is crucial in capturing the attention of its reader. It is the first thing a recruiter is going to read to decide whether or not to carry on reading your UX case study. Make sure it is clear, understandable, and does not use technical jargon. The subtitle is optional but a great way to build more context around the Project title.

Client/Company/Project type

Length:1 line

Unless stated in the title, this helps build more background to who the project was for. If the project was not a commercial project for a client or brand, this is where you can state that it was a conceptual project, a design challenge, or a practice project.

Project date/duration

Length:1 line

Your role

Length:1–2 lines

This is a section to state everything you did and were responsible for. Recruiters are looking to accurately assess your skills in the context of the entire project’s execution. Did you work with a team, did you work unsupervised to create the project deliverables. Recruiters can make an informed decision about whether you will need help on the job or hit the ground running.

Project Summary

Length: 1–2 paragraphs

That covers the introductory part of your case study. Now we get to the body of the case study.

The Challenge/Problem

Length: 2–3 paragraphs

This section specifically looks at the problems the project is trying to address. What are the business requirements, user needs, pain points that the project solves? Who are the end-users and core target market? What platforms was the project for and where there any technical constraints or business KPIs you had to keep in mind?

The Solution

Length: As long as needed

This section is going to be the longest as it showcases how the project goals where achieved. Firstly, outline the design process steps and methods followed during the project outlines the layout of this section. Show your overall project steps, why you chose the methods you used, Recruiters want to see all the relevant design artifacts that you produced from sketches to visual mockups to prototypes.

Here are some examples for showing the overall process:

Other deliverables that you can show:

Personas
Sketches
Interview notes
Usability tests results
Whiteboards
Wireframes
UI designs
Prototypes

Results

Length: 1 paragraph

The critical last section concludes the case study by outlining any project success metrics that were achieved, awards that were won. In the case of a project that is not live, reflections and the project’s next steps are sufficient to round up the case study. Try to share any lessons that you learned to demonstrate you are invested in both the project’s life cycle and your career development.

What you can do next

UX/UI portfolio projects for beginners #3: Travel App

This practice project/Client brief is the third one in this series from UX Design Mastery after the one for a Blog website and an eCommerce project.

Design Portfolio Projects

Blog website

Design Portfolio Projects

eCommerce

Design portfolio projects for UX and UI designers

Included in each design brief is the following:

Objectives (What is REQUIRED by the client. This part usually trips designers up as they go off designing what is not required)
Timeline (For this to be realistic each brief has a timeline that is as close to real-world work as possible)
Platform(Where your designs will live. Understanding these platforms will give a well-considered solution)
Target audience (Users always come first and the design must accommodate the target audience’s pain points)
References (If you are not sure where to start, clients normally give a set of examples or references they like. The closer the design solution is to the references, the fewer revisions a designer will have to do)
Deliverables (Most importantly how the solution should be delivered. These represent what a well-detailed portfolio case study looks like so hit it out of the park)
Recruiter advice (Portfolio advice from creative directors, CEOs and leading design creatives from the biggest companies)

A little about me

Creating a portfolio project is hard work.

I still remember when I did not have a single project in my portfolio that would really make me stand out and get noticed by recruiters.

I had just left my job as a Java Developer and was about to put all my effort into starting a design career.

One of the very first successful projects I created was a conceptual mobile app for a local airline. I had recently been on a trip which was frustratingly delayed and poorly communicated to passengers.

So I decided to creatively express my opinions through a conceptual project and it was responsible for me getting hired for my first design job.

Its also my most appreciated project .

I hope this travel app project you work on, provides you with as many opportunities as I have received.

Let’s get into it

Design Portfolio Project 3: Travel App

Client Brief

Client: Choose any travel brand of your liking

Timeline: 1–2 Weeks

Objectives

Create a mobile app design that can:
• Allow a user to book a flight, a hotel and car on a specific date for different destinations
• Find the best deals on flights, hotels and car hires
• Ability to select holiday activities
• Organize all travel plans into one itinerary
• Notifications

Platform

Please design a travel app for either iOS or Android. So we require mobile screens. Pay attention to

iOS guidelines
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
Android guidelines
https://material.io/design/usability/accessibility.html#hierarchy

Target Audience

References

Please conduct some research on the following travel apps that we love and get ideas for functionality and features to include

https://itunes.apple.com/za/app/kayak-flights-hotels-cars/id305204535?mt=8

https://itunes.apple.com/us/app/expedia-hotels-flights-car/id427916203?mt=8

Deliverables

• Research (refer to references provided)
• Highlight 3 enhancements or unique features you have included to make our app stand out and solve user pain points
• Sketches of initial ideas
• Wireframes
• Visual mockups screens of
⁃ App Onboarding
⁃ Home screen where a user can book a Hotel, a Flight, a Car or an activity in a popular city
⁃ Listing page of Hotels
⁃ Map view showing hotels location
⁃ Itinerary screen
⁃ Possible notifications

• Results section: Feedback from testing with 5 random people
• Fonts: Brand related
• Colors: Brand related
• Link to this project

Nice to have

Video walkthrough (Screen record using QuickTime an Invision prototype interacation)

Pro-tip

Go through an entire booking experience to understand how the app is design.

Advice from recruiters

I wish more portfolio websites included little descriptions of what the designer’s role was in a specific project, or even pointed out some specific problems or personal thoughts about aspects of their designs. Too many portfolios now are just vanity shots and client name-dropping without actually communicating what was done.

James Cabrera, Senior Product Designer, Refinery29

Going the extra mile and making sure it’s easy to consume, well-presented, and filled with helpful context about your projects tells us a lot about your communication skills. Ideally a portfolio should be more than just a collection of pretty thumbnails and mockups — it should speak to your problem solving skills.

Ryan Le Roux, Metalab

If you’re just starting out as a designer, a good alternative to unsolicited redesigns are personal projects. These self-initiated projects are a great way to build up your design and product skills, while also putting something out into the world for people to use. You’ll learn a ton from the experience of launching something and the feedback you’ll get from your users will definitely make you a better designer.

Elyse Viotto, Shopify

If you are interested in ting the PDF download of the travel app project and all my extra example case studies download below.

UX/UI portfolio projects for beginners #2: eCommerce site

One of the greatest challenges with transitioning into a UX/UI design role without any design work experience or educational background is proving your skills to a prospective recruiter or client.

This is the s project in the series after UX/UI portfolio projects for beginners #1 Blog Website

You may have already read up online on how to become a UX designer or a UI Designer but unfortunately you still have a vague or generic guide that comprises of:

Doing an internship
Mentorship
Reading books
Doing courses
Learning design tools
Going to meet-ups

The truth of matter is that you will need a portfolio with detailed design projects that effectively communicates to recruiters and clients that you are the right person to hire.

But such design projects are few and hard to come by unless you intern with a really good company that has cool projects.

Most unsolicited redesigns and Dribbble shots lack technical feasibility and real world constraints to be taken seriously.

So what can you do to address this problem?

A little about me

My own journey into design from being a Java Developer was a challenging one when it came to creating a portfolio recruiters would take notice of.

I did not know what projects to put into a portfolio. Mobile, Desktop or app designs?

What level of detail did recruiters want to see from my work?

And just generally were to begin.

I am going to share with you two things worked for me and helped me get started.

Looking at other designers work. I was a member of Behance community and would spend hours going through the most popular projects, most awarded projects and how they were structured.
Creating detailed design projects of problems I found on forums and in the news.

I did not get a massive following of designers on Behance but what I did have was a collection of about 6 well thought out projects that helped me sell my skills. Calvin Pedzai on Behance
I

These projects got me headhunted by a digital design company who were impressed by the types of projects and the level of detail.

Each design project related to what the design companies were looking for and hiring me was a no brainer despite the level of experience.

To help you get the same opportunities and create a well-rounded portfolio, I decided to create a series of detailed briefs or practice projects that you can use.

Design portfolio projects for UX and UI designers

Included in each design brief is the following:

Recruiter advice (Portfolio advice from creative directors, CEOs and leading design creatives from the biggest companies)
Timeline (For this to be realistic each brief has a timeline that is as close to real-world work as possible)
Objectives (What is REQUIRED by the client. This part usually trips designers up as they go off designing what is not required)
Platform(Where your designs will live. Understanding these platforms will give a well-considered solution)
Target audience (Users always come first and the design must accommodate the target audience’s pain points)
References (If you are not sure where to start, clients normally give a set of examples or references they like. The closer the design solution is to the references, the fewer revisions a designer will have to do)
Deliverables (Most importantly how the solution should be delivered. These represent what a well-detailed portfolio case study looks like so hit it out of the park)

This practice project/Client brief is the second one in this series after the one for a Blog website.

Lets get into it

This time we look at an eCommerce website project.

I decided to design a solution for this brief as well so you can check out what I produced in about a week and a half, after hours.

Design Portfolio Project 2: Ecommerce website

Client
Choose any clothing brand of your liking

Timeline
2–3 weeks

Objectives

Create a responsive eCommerce website that can:
• Tell the brand’s story alongside the products (VERY IMPORTANT)
• Showcase the latest products and bestsellers on Homepage
• Access to the cart throughout the site
• Show all category sections
• Allow readers to sign for an account
• Ability to Search through content
• Immerse the user into the ethos of the brand

Platform

Please design for responsive web. So we require desktop screens, tablet and mobile screens.

Limitations/Specifications
• Page performance (Loading time)
• Limited Screen size on mobile

Target audience

Young males and females 25 to 35

Blake, 31
PAIN POINT
Faster way of discovering products when searching.

Sarah, 26
PAIN POINT
Can I change the quantity of the products I add to cart?

Crystal, 28
PAIN POINT
How do I know these products are worth purchasing and reliable?

References

Please conduct some research on the following eCommerce websites that we love and get ideas for features to include

Deliverables

Research (refer to references provided)
Highlight 3 enhancements or unique features you have included to make our eCommerce site to stand out and solve user pain points
Sketches of initial ideas
Wireframes
Visual mockups on desktop and mobile of the

-Homepage
⁃ Category page with filters
⁃ Product detail page
⁃ Menu/Search
⁃ Cart

Results section: Feedback from testing with 5 random people
Fonts: Brand related
Colors: Brand related
Link to this project

Nice to haves

Video walk-through (Screen record an Invision prototype)

Additional message from client

Go through an entire shopping experience offline and online to understand how products are sold.

Advice from recruiters

Sketches, wireframes, unused design concepts, etc. That is the work. The final design is just the end of that entire design process. Getting to see that thinking and decision making is a big differentiating factor when deciding on who to hire.
Aaron Stump, VP, Creative Director Invision

Imagine us sitting in our weekly meeting room at 5 p.m., the last meeting before home time. We open up your portfolio and see several screenshots of mobile interfaces under a project name. The work seems relevant but there’s no description of what we’re looking at. We don’t know what you did, what the goal was or how you feel about it. We’re left with questions and move on to the next portfolio. Never forget your user.
Stanley Wood, Spotify

A more effective use of time would be explaining how a project solved a client’s problem, how designs were changed based on client feedback, and anything they wished they could have done but couldn’t, for whatever reason. Those stories are far more useful and interesting than someone trying to sell their talent.
Todd Dominey, Mailchimp

More Inspiration (Your cheat guide)

If you would you like a PDF of this design project you can download it below. Included are 2 additional eCommerce case studies and 5 online examples that you refer to from the best agencies and design companies in the world.