What does a UX Designer ACTUALLY DO?(Explained using GIFS)

My goal is to help you decide if a UX career is something you REALLY want to pursue without investing too much time and money upfront. You might be looking to transition from a different field into UX design but don’t have the work experience or relevant educational background.

Well, I am glad you are here.

A UX designer does a range of activities. From presenting solutions, analyzing tasks and activities, building prototypes & wireframes, gathering requirements, specifying interaction design to conducting usability studies.

In case you have not read it, the first article in this series on getting started in UX Design, was a personality checklist on whether UX would be a good fit for you.

 Is UX design a good fit for you? 8 personality traits you must have.
People who succeed in a UX design role have two things in common. Firstly, they enjoy what they do. Secondly, their…uxdesignmastery.com

I believe your personality has a huge say on how successful you will be in your career. The more aligned your personality is to what you do, the easier it will be to continuously learn the craft and execute it at a very high level. 
 
On to the next checkpoint.

What does a UX Designer ACTUALLY do?

The second article in this series looks at breaking down some of the most common on-the-job UX design activities you must be prepared to do to be successful in a UX role. Obviously, some of the UX activities will vary depending on what sort of company you will join (agency, software development company, etc), your UX project budget, how big the team is, and how much time you have on a project.

Fortunately, these UX activities are taken from a study of over 1000 UX professionals conducted by the Nielsen Norman group. So you will get a general but realistic overview of UX work. 

So let’s get started.

1. Presenting solutions/concepts

As a UX designer, you will be required to communicate your ideas and design solutions verbally, on paper, in a slide presentation, in a written document, as annotations, as a wireframe, and as a prototype. 

It sounds straight forward but what a lot of designers don’t realize is how unclear communication can result in your solution being completely misunderstood by clients, developers, or project stakeholders.
 
Here are some quick tips that I personally use in order to communicate effectively when presenting design solutions:


Explain the problem — what is the background or context to the solution being presented and why is it important
Try to tell a story or scenario around the solution that will better explain what is being presented
Explicitly ask if everyone understands to make sure your audience is on the same page and no one is lagging behind 
Intentionally pause. Don’t rush through your presentation but create moments that encourage feedback and questions
Repeat any feedback you receive. This will help ensure everyone understands what changes will be made.

2. Persuading others

Every now and again you will be required to defend your design decisions to a client, your team, or a product owner. A lot of designers find it hard to justify their design decisions because they, unfortunately, approach design as an art. You looking to create the coolest interface which is beautifully designed. Though that might sound reasonable, it not the best approach. You will end up frustratingly scaling back your design to something more pragmatic or arguing about subjective things like color and imagery.

 A better approach to persuading colleagues about a design approach is to test it with real users or back it up with research data. Find out what the target user group thinks about your design, make changes, and bring that into your design presentation.

3. Analyzing task or activities

An important part of the research phase of a project is to immerse yourself in what your user is trying to achieve. This is done by breaking down the project into key activities/tasks that you require the target user to perform. An analysis of the current state of those activities is needed to understand the pain points and opportunities that exist and should be addressed. 

Some of the most common ways I use to analyze a task is to:
– Gather and interpret analytical data from Google analytics or heatmaps
– Run an audit and perform the task yourself
– Watch a real end-user perform the task

4. Building prototypes and wireframes

Probably the most well known and often overemphasized UX activity. I do enjoy this part but I always create low fidelity deliverables that focus on user flows and functionality. I don’t want to spend time thinking about fonts, icons, colors, and imagery. I am fortunate to work with a UI designer so I definitely don’t have to worry about that part. Though important in the presentation of your solution, wireframing and prototyping builds upon key insights discovered in the research/discovery phase of the project. 

When we look at the full project timeline as a UX designer, you will probably spend more time researching and testing than crafting a beautiful prototype. The key here is not to produce polished designs but is to rapidly illustrate your ideas clearly enough for a UI designer/developer to understand and work from.

5. Collaborating with subject matter experts

As a UX Designer, you have to work with others on topics you might not have any experience in. For instance, you may be asked to redesign an investment banking workflow but not have any financial experience. It will be up to you to seek out this information from experts and end-users involved with that field through whiteboard sessions, UX design workshops, interviews, and on-the-job walk-throughs. You must approach each project as a novice and be willing to learn from others.

6. Gathering requirements

This activity ties into the collaboration with subject matter experts. At the start of a project, you will be required to gather as much information about the problem you are trying to solve in order to tackle it effectively. 

You can go about this through
– Interviews
– Surveys
– Analytical data
– Testing sessions
– Audit
– UX Design workshops

7. Specifying interaction design

When creating prototypes, you will be called upon as a UX Designer to specify the actual interactions a user will encounter. Depending on the size of your design team, this could possibly be done by someone with more expertise in micro-interactions and animation and your role in that setting is to ensure the interactions add and not detract from what the user is attempting to do. 

A great way to learn is by 
– Finding inspiration online (Google “micro-interaction” or “web animation”)
– Learning an animation tool
– Recreate interactions you find using the animation tool 


8. Conducting in-person usability study

Running an in-person usability study is probably one of the key skills a UX designer should master. It requires one to be organized, comfortable with guiding the user, asking the right questions, ability to adjust based on the user responses, and keeping silent when necessary. 

One must be able to watch the time but make sure to get the insights they need for their project research. Lastly, wrap up the session well by asking the participant to do a post-questionnaire, and thanking them for their time.

9. Making storyboards, user journeys, and Information Architecture

All the research, data, findings, and ideas can be translated into artifacts that help stakeholders, clients, and developers better understand what needs to be built. Storyboards outline how a user’s story will unfold shot by shot, for the purpose of pre-visualizing interactions. 

User journeys are a series of steps a user goes through to accomplish a task while Information Architecture is the design of data in a way that makes it easy to build for developers and navigate for users.

10. Conducting design review/heuristic evaluation

This involves personally running through a website or application and marking it against heuristics or best practices. This helps uncover existing problem areas and identify opportunities for improvement. Issues that are identified are categorized into high, medium and low levels of priority for resolving. To be able to run such an evaluation one has to be well versed with best practices and key user goals.

Bonus activity: Review data from analytics

Quantitative data is very useful in understanding what users are currently doing. From it, you can establish conversion rates, understand page performance, and uncover themes/patterns. Therefore learning a tool like Google Analytics will level-up your research skills drastically.

In conclusion

As you can see, the UX role is multi-faceted but it’s important to know when starting out as a junior you won’t be expected to do all these activities alone. Also depending on the size of the company and project budget, you may only be able to perform a subset of these activities. 

Personally, I have done all these activities as a Senior Designer and employ them quite frequently on every project.

If you really enjoyed this article as much as I enjoyed creating it, show your love, share it, make it clap and leave a comment on which activities you do the most. 

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.

UX Case Study template

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.

My portfolio on Behance.net

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.

Recruiters don’t have time

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

  1. Project Title & Subtitle (A headline and subtitle that indicates the name and goal of the project)
  2. Client/Company/Project type
  3. Project date (When did you work on the project)
  4. Your role (What you were responsible for on the project)
  5. Project Summary/About this Project (An overview that summarizes the project, goal and results)
  6. 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)
  7. Solution (What method/process were used to solve specific problem, user needs, business requirements and/or pain points? How did features address the objectives?)
  8. 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.

Abbey Lee, Amazon
Rachel Cheng, Facebook

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.

Mariah Ho, Apple

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.

Bre Huang, Uber

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.

Pratibha Joshi, Sprinklr

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. Usually the first two. If nothing stands out or if the work is unclear then they will quickly move on.

Pratibha Joshi, Sprinklr

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?

Rachel Cheng, Facebook
Rahul Jain, Google

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:

Slyvia Yu, SimpleLegal
Slyvia Yu, SimpleLegal
Bre Huang, Uber
Lim Zhiyang

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.

Rachel Cheng, Facebook
Pratibha Joshi, Sprinklr

What you can do next

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 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.

  1. 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. 
  2. 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. 

Ecommerce project by Calvin Pedzai

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.

What should be delivered

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

Target audience

Young males and females 25 to 35

Target audience: Blake

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

Target audience: Sarah

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

Target audience: Crystal

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

https://www.beatsbydre.com/
https://boostedboards.com/

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.

UX/UI portfolio projects for beginners #1 Blog Website


One of the hardest things to do when starting your design career is to create a design portfolio of impressive work.

But many have not had any substantial design work experience and the UX/UI projects they have done, are not worth putting up.

The Dribbble portfolio work they have is beautiful but often not technically feasible and has not enough real-world constraints for the work to be considered industry standard.

How do you start a design career without work experience or a college degree?

What level of detail is best to provide in a user experience designer portfolio?

How do you build a UI design portfolio?

Well, I’m glad you asked.

A good portfolio is made up of relevant, well considered detailed design projects.

At UX Design Mastery, we have created a simple and not overly complicated series of portfolio projects or practice projects, that will test your skills and help you create a well rounded UX/UI portfolio project that a recruiter will definitely take notice of.

Included in each portfolio project is a client brief that has the following:

  • Timeline (For this to be realistic each brief has a timeline that is as close to in work)

  • 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, client 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)

A little about me

(You can skip this part if you are ready to get down to some work)

When I started out in design, I had no portfolio projects or commercial experience because I had not been to a design school, let alone worked for a design company. I was coming from a technical background (software developer) but knew design was a passion because of a part time design job I did for a real estate company.

It was the most alive I had felt doing work.

You know what I mean.

When you get into the zone and can’t do anything else but DESIGN.

However I never fully considered it as a potential career at the time, until I left my developer job.

I decided to create a portfolio of conceptual work that would not only showcase my skills to potential recruiters but also help me track my growth.

In total I must have done 12 projects.

I would research on forums and help boards for reoccurring problems real people were complaining about and try to design an appropriate solution.

That gave each project, real world constraints and limitations that recruiters absolutely loved.

It was not long after I posted my portfolio that I got headhunted.

Repeatedly.

Without a degree or work experience. Woah.

But well thought out detailed portfolio projects.

I hope these portfolio projects do the same for you.

If you are ready to create some awesome work, let’s begin!!


Advice Quotes: (A few things to consider from recruiters)

We don’t want work that simply copies everything else. Our clients come to us to help them meaningfully resonate and differentiate. That means that we need to be on the bleeding edge of what is relevant, inspiring and thought-provoking.

Karin Soukup, Managing Partner, Collins


On a good/bad day I look at maybe 20–30 portfolios. Most of the time for maybe five seconds before I decide if it’s worth exploring further. So my first recommendation would be to make sure you grab the audience straight away. Show me something great and/or unexpected. Ideally both.

Haraldur Thorleifsson, CEO, Ueno


Show me how you’ve gone from insight, to concept, to solution, to impact with a real project example. That will help me understand how you work and think, and assure us you can do it again.

Katie Dill is Director of Experience Design at Airbnb



Client brief #1 Blog Website

Client:
Name: Vibz
Fonts: Use any you like
Colors: Use any you like

Timeline:

2 weeks to 4 weeks

Objectives

We would like a unique blog website that can:

  • Show featured articles on Homepage
  • Article page
  • Show all category sections
  • Allow readers to signup to a newsletter
  • Showcase our Instagram feed
  • Ability to Search through content
  • Guest authors
  • Social Sharing and liking of posts
  • Article ratings

Platform
Please design for responsive web. So we require desktop screens as well as mobile screens.

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

Target audience
Young males 25 to 35

Pain points
Searching for inspiration about lifestyle, health, news, music, movies and gadgets (Our category sections)
Get bored with uninspiring content 
Hate having to return to websites to check for new articles

References


Please conduct some research on the following blogs we love and get ideas to include

GQ website

Men’s Health

Deliverables

  • Research section (refer to references provided and find features that should be added in order for our blog to be competitive)
  • Sketches of initial ideas
  • Sitemap/journey map 
  • Wireframes
  • Visual mockups on desktop and mobile of
    • Article page
    • Homepage
    • Category page
    • Article page
    • Menu
  • Highlight 3 enhancements or unique features you have included to make our blog stand out and solve pain points
  • Results section:Feedback from testing with 5 random people
  • Link to this project’s deliverables

Nice to have

Video walkthrough (Screen record an Invision prototype)

Additional message from client

Make it pop!!!


Inspiration (Life’s cheatsheet)

If you are still unsure about where to start I have a couple of very cool blogs done by the best agencies and design companies in the world.

Here are two case studies for you to analyze:

Adidas Originals Tumblr blog by RESN
Inside Design blog by RallyInteractive

Here are other awesome example blogs:

The Awwwards site is great source of inspiration. Make sure to bookmark it and visit it often.

https://www.awwwards.com/sites/coda-story
https://www.awwwards.com/sites/oceanographic
https://www.awwwards.com/sites/the-official-squarespace-blog
https://www.awwwards.com/sites/vogue-arabia
https://www.awwwards.com/sites/sojournal
https://www.awwwards.com/sites/ubisoft-stories
https://www.awwwards.com/sites/caleo-magazine
https://www.awwwards.com/sites/disconnect

Go through them and find features you think will work for this brief.


Download the PDF version of this post so you can work through it.

UX portfolio teardown: Real portfolio example that secured internships at Google and Microsoft

You may have seen a number of UX portfolio examples online but you are still not sure what makes them work.

Is it the colors, the layout or the type of projects?

I am starting a series on UX and UI portfolio teardowns on the blog that you might benefit from in order to ultimately get a job. Will take guessing out of the way and focus in on what really works to land a job.

UX portfolio Cedric

Today I look at Cedric Ith’s UX portfolio by quickly exploring his website, a single project and resume, to tease out the portfolio elements that helped him secure internships at Google and Microsoft. You might not be targeting these companies (You don’t really rate them ;)) but there is still alot you can learn from how his portfolio is structured and translate that to your portfolio.

 

UX Engineer and Interaction Prototyper. Exploring VR/AR/MR.

This is not a comprehensive teardown but structured in such a way as to simulate a recruiter, potential team lead or creative director who have to go through a 50 resumes a day.

Ready?

Let’s begin!!

Portfolio Website

http://cedricith.com/

UX portfolio example_img1

 

 

Let’s dive into a project

Since the first one has a high likelihood of being selected. Will go for that one.

ux portfolio example_img2

ux portfolio example_img3

 

ux portfolio example_img4

 

And lastly for the resume.

ux portfolio example_resume

 

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.
Simon Mogren
Head of Design  - BBDO

Takeaways

So what lessons should you take away from this UX portfolio example?

  • Recruiters don’t have a lot of time to read through your portfolio. Ensure your best and most relevant work is the first one listed.
  • Have a download link to your resume.
  • Use testimonials as powerful social proof.
  • Use language that is understandable for your headings.
  • 2–3 really good portfolio projects are enough to get you an interview and possibly the job
  • Between you LinkedIn, portfolio website and resume, ensure you use a consistent and relevant job role throughout.
  • Identify job keywords and ensure your resume has them.
  • List your experience first as this is what is most relevant to a recruiter or employer.

 

If you really liked this post and want to see more of these, drop me a comment or just share this page.

Cheers!!

5 Free UX Design tools in 2024 (that are actually free)

Updated for 2024

Have you ever looked for free UX design tools online only to find that the software has a trial version for 30 days or asks you to start a trial with your credit card?

Definitely not helpful.

So I decided to compile 5 UX Design tools that are actually free wireframing tools and free prototyping tools. Most of these UX design tools are open source which ensures on some level that they are free. Are they the best free wireframing tools out there? Debatable but a really good start if you need a UX design tool that you don’t have to pay for. I explain what you can do with it, what other people have to say and share a tutorial so you can have a good feel for the tools.

5 Free UX Design tools in 2024 that are actually free

  • Pencil Project
  • Mockflow
  • Wireframe.cc
  • Fluid.ui
  • Moqups

    Semi-free

  • Figma

Ad
So let’s dive in.

 

Pencil Project

An open-source GUI prototyping tool based on the Mozilla platform that can be used to create site wireframes and mockups.

What can you do with it?

  • Wireframe creation
  • Flowchart/Diagramming
  • Drag & drop
  • Templates
  • UI prototyping

What users of Pencil have to say

Pros: Pencil project is an Open Source software with multiplatform support

It has an important library of shapes for the creation of models and interfaces, with the look and feel of the most popular systems and platforms such as Android, IOS and Windows.

It has extensions to be worked from the web browser Mozilla Firefox

allows linking between the sheets of a project to optimally simulate the browsing experience between the screens of the model

Cons: As graphical elements are inserted in the multiple sheets of the documents tends to put the software slower

Pros: The ease with which this tool can be used offers impressive results and in a very friendly way. You do not have to be an expert to use it, you just have to be clear about what you want to do and the tool makes everything easy for you.

Cons: I have no problems for this product as it is the perfect tool for flow charts. It is very easy to use.

Overall: Speed when starting my personal and professional projects.
Speed when building flow diagrams.

Pros: Very intuitive. Great variety of icons. I don need to know about sistems development in order to working with it.

Cons: I think that its not easy to download. I couldn´t download my work in another format like .pdf or .jpg.

Overall: To learn about sistems design. To make templates and mockups for my tecnology project. To express graphically process in a sistem.

 

Get a feel: Pencil wireframe tutorial

Site address: https://pencil.evolus.vn/

1. How does the community contribute to Pencil Project?
The community on Pencil Project actively creates and distributes different collections for free, enhancing the resources available to users and showcasing the collaborative nature of the tool’s user base.
2. What export formats are supported by Pencil Project?
Diagrams created in Pencil Project can be exported in various formats such as PNG, PDF, ODT, or even as a web page, providing users with flexibility in sharing and presenting their work.
3. What types of diagrams or models can be created using Pencil Project?
Pencil Project allows users to create flowcharts, apps for desktop/web/mobile, or general-purpose diagrams. It offers a built-in collection of shapes and stencils specifically for prototyping apps for Android and iOS.

Mockflow

Web-based solution offering wireframe drag&drop editing, template library, real-time collaboration, wireframe export and sharing tools.

What can you do with it?

  • Wireframe creation
  • Collaboration
  • Presentation tools
  • Drag and drop
  • Feedback management

What users of MockFlow have to say

Pros: You have everything you need to plan and design your web / mobile development project in one place. A free plan that is more than generous so anyone can start using it.
Amazing tools and presets to do about any wireframe you imagine. Mockflow offers integration with popular apps like MS Teams, Confluence, Trello, and Slack, enabling smooth collaboration and communication among team memb

When considering the use of Mockflow, there are several advantages and disadvantages to take into account.

On the positive side, Mockflow offers 50 additional tools that aid in enhancing the design process, along with a variety of premade templates that can expedite your work. It provides a centralized platform where you can conveniently create, share, and collaborate on design projects. Furthermore, designing with Mockflow is described as super easy and quick. Mockflow comes with presets that speed up the wireframing process, saving users time and effort that would otherwise be spent on creating shapes from scratch. This tool is designed to enhance productivity and streamline the design process, making it an excellent choice for individuals and teams working on various design projects.

 

Cons: Not many cons with this, the only comment I would have is to improve the copy and paste, it uses some sort of flash technology, understandable with what it offers but it can get annoying when you’re used to right hand click copy, and it does not show the copy or paste so you have to do a CTRL+C and CTLR+V to paste. (this might be a Firefox only related issue, just saying)

On the downside, the free version of Mockflow comes with limited features, restricting its benefits primarily to wireframing and creating mockups. Additionally, users may experience performance issues when dealing with multiple pages on the platform.

Overall: I was in a rush 5 month ago to plan a large web / mobile application for a client. I use a lot of wireframing tools depending on the project, but I wanted to try something new and had seen mock flow a few weeks back so thought why not give it a try. At this time I was mostly looking for speed, to catch up with the planning stage. Within 1 hour of playing with the wireframing tools, I had designed 30% of the project. At this point I was sold, and had already bought the license and am I glad I did, it opened up access to all the other tools such as able to see a site map of your application designs with one click, with other tools I always had to draw those by hand, now I can just export. It also gave me access to a website builder, design collaboration and annotation, banner designer and timeline manager. This puts everything I need to get this project from planning stage to production in one place. Love it, keep up the great work!

Get a feel: MockFlow tutorial interaction

 

Site address:https://www.mockflow.com/pricing/

Wireframe.cc

Wireframing software providing unique url for sharing and bookmarking, version control, annotations, click and drag drawing.

What can you do with it?

  • Wireframe creation
  • Collaboration
  • Revision history
  • Interactive elements
  • Mobile interface

What users of Wireframe.cc have to say

Get a feel: Wireframe.cc  tutorial and examples

Site address: https://wireframe.cc

Fluidui

A tool that allows you to design prototypes, wireframes, mockups and collaborate in real time.

What can you do with it?

  • Wireframe creation
  • Collaboration
  • Drag and drop
  • Revision history
  • Screen capture
  • Prototyping
  • Usability testing
  • Interactive elements
  • Mobile interface
  • Feedback management
  • Page linking

Site address: https://www.fluidui.com/plans

Moqups

A streamlined web app that helps you create and collaborate on wireframes, mockups, diagrams and prototypes.

What can you do with it?

  • Wireframe creation
  • Collaboration
  • Drag and drop
  • Prototyping
  • Diagramming tools
  • Flowcharts

Get a feel: Moqups tutorial and examples

Site address: https://moqups.com/

Figma

Figma is a semi “free”, online UI tool to create, collaborate, prototype, and handoff. Figma lives in the browser and works on Windows, Chrome, Mac, and Linux. All of your work is autosaved which you can access with Figma’s version history. It’s lightweight, fast and doesn’t need to be installed to use or share files.

Figma has a Starter package on its pricing page that has the following offering

  • 3 Figma and 3 FigJam files
  • Unlimited personal files
  • Unlimited collaborators
  • Plugins and templates
  • Mobile app

Site address: https://www.figma.com/

Now it’s your turn

I hope you enjoyed my list of 5 free UX design tools, that are actually free in 2024.

What to read next:

Check out my other reviews

Axure vs Sketch: What the best tool for a UX Designer

Axure vs Balsamiq

Freebie: UX Sketchbook, 15 Free printable browser screens

Looking to communicate your design concepts more clearly? Struggling with draw a straight line let alone a wireframe sketch? Not to worry, we have created something just for you.

 

 

Sketch out your concepts on a grid, write out your project feature notes and detail the scenario for that sketch. A variety of grid based browser screens are available for desktop and mobile views. This sketchbook is designed to make sketching and design communication easier with your team or client.

All the screens are completely customizable, as the source file is provided and exports can be resize how you want them.

 

 

DOWNLOAD THIS RESOURCE

 

 

Was doing your degree a waste of time? UX-related degrees you might already have

Completing a degree can be so hard.

It’s been years of blood, sweat and tears in trying to finish your degree. Towards the end, you may have had a quarter mid-life crisis along with a few mental breakdowns since you never really had a passion for that degree. Having heard about UX design, it may seem like a pretty good career to pursue. However several questions inevitably crop up.

What would be the best degree to pursue if you want to do UX design? Do you really have to go back to school to start a whole new degree? Was your degree a waste of time?

Obviously, this can be seriously stressful if you do not have the time nor the money to go back to school.

In this post we will focus on UX-related Bachelor degrees that you might already have and how useful they could be in a UX role.

One of the best ways of figuring out what kind of education and training to pursue when going for a UX career, is looking at the UX professionals already in the industry.

The industry recognized Nielsen Norman Group surveyed a group of 963 UX professionals already working in the industry to find out the degrees that they studied at university.

 

Some background

The years of experience that participants held in the industry.

A large portion of the participants held a degree but some were already working in the industry despite not having a degree and being self taught.

 

What degrees do UX professionals have

The Bachelor degrees that the UX professionals held, broke down in the following way.

 

The chart above shows how diverse education is at the undergraduate level for UX pros. Several things are particularly interesting about the top bachelor’s degrees:

Design topics represent only 11% of the total degrees. Psychology, Communication, and English commanded only 9% each. The specialty degrees for Interaction Design and HCI barely made it onto the list (most likely because they are relatively recent programs available at only a few universities so far).

The Masters degrees that the UX professionals held, broke down in the following way.

We see more specialization at the master’s level, as expected; but half of the master’s degrees were apparently unrelated to HCI and UX directly. Even so, most represent very marketable skills aimed at communications, design, technology, business, and understanding people and information.

 

How useful were these subjects

More importantly how useful were these degrees in day to day work?

 

 

Top takeaways

  • It’s important to realize that UX professionals come from so many varied educational backgrounds and not strictly traditional UX streams.
  • You almost certainly need at least one university degree, but it doesn’t have to be in HCI if you have some coursework or training in HCI topics too
  • Respondents recommended that students going into UX take a wide variety of classes. It’s difficult to know in advance which knowledge may turn out to be useful in your work, because the world of UX work is so broad.
  • It takes a combination of formal and informal education as well as on-the-job experience in order for most people in UX to become well-rounded professionals.

 

Some quotes

How to sell your ideas to executives to make them understand why they are important for the business. “Become a strong writer and everything else will fall into place.”

 

“Take something that can prepare you to work with engineers and developers.”

 

“Sciences are very useful in that they carry an innate sense of organization—alot of usability has to do with making order out of chaos, just as a lot of sciences seek to achieve the same thing.” Learn about data analysis.

Looking to break into UX? Top 8 UX Design courses UX pros wish they had taken

Transitioning into the UX design industry from a different field can seem like a daunting task considering the amount of varied information one finds on the Internet.

What should you know, what should you be able to do and should you go back to school to start a new degree/course?

Obviously, getting some training is a good start in any field.

In this post we will focus on what UX design courses UX professionals wish they had taken before starting their job.

This will serve as a great point to start from if you are considering User Experience Design as a field to work in.

In order to give you the most reliable information, this is not just my opinion but from a survey study conducted by the recognized Nielson Norman Group of 963 UX professionals already working in the industry.

 

Background of participants

To begin with here is a breakdown of the UX professionals that participated in the study.
Survey Participants’ years of experience in user experience (UX)

 

 

Now to the more interesting part.

Participants were asked what UX design courses did they wish they had taken that would have prepared them for a UX position. The results were as follows

 

 

 

Understanding the responses

Many said their education had served them well, but many also indicated there were subjects/courses in which they wished for more education. All of these courses represent topics useful to UX (HCI, social sciences, design) and / or very competitive job skills (Computer Science, marketing, JavaScript, drawing).

  • Some respondents said that many of the wished-for ux courses they mentioned had been unavailable at the time, unavailable at the university, unavailable in their country, or unavailable in the degree
    programs they pursued.
  • Others said they had taken some courses in the topic, but now they want to take more-advanced UX design courses.
  • Many people mentioned that business, organizational behavior, and persuasive techniques courses were not included in their design training, and in retrospect it would be a huge practical advantage to have those in the workplace.
  • Several people said the courses they want to take would help them be more competitive in the job market now or would help them be much more effective in their current roles.

 

Action items for you:

Identify what you maybe be missing from your skillset

Find short UX courses or general courses online that cover some if not most of these subjects and do them

Alternatively find books around these topics