How to tackle at-home design tasks when applying for jobs
You are ready to dive in and apply for design roles. Sooner or later you will definitely encounter an employer that has design tasks as a screening procedure. While on-the-spot tasks are more stressful, heavily depend on a thorough preparation beforehand and require you to be quick on your toes in delivering, at-home tasks are more flexible. They might be framed as a 1-hour task or a 6-hour task, but, as long as the presentation is not on the same day, you are not bound to spend exactly that amount of time. And most probably you end up spending more than that, at least for the first one.
The set-up for a design task
Most experienced designers won’t agree to test-tasks as a selection method because they represent a poor use of their time. People with long years of practice behind have already demonstrated their competence several times and won’t appreciate this distrustful relationship. As such, they will likely drop out of the selection process for any position that involves a test-task (seethe comments made by Chris Kiess on this topic). In their case, recruiters should be aware they need to create a different hiring experience.
Coming back to fresh designers, when you are at the beginning of a design career, you should look at these tasks as opportunities to demonstrate your potential and polish your skills. You are in front of a practical situation, which is a bit different from the booth camp briefs that had quite of leeway.
Definitely, please be aware of companies that try to trick you into doing their work for free. The easiest things to do, before actually starting to work on the task:
- Search for reviews of the company and/or reach out on LinkedIn or on other professional networks to some people that work there; ask if they would recommend it.
- Ask the person you are in contact with, if you are allowed to use the task results in your portfolio.
- Ask any questions related to the brief that you need clarified in order to gain more context on the task.
Given that you have green light, next (4) create a template that would fit the style of your portfolio. Alternatively, consider a style that goes in a different direction in order to show your versatility. You can set up the template way before your real design task, ready for use with some adjustment when it’s the case, or you develop it for your first task in a way that allows you to re-use it also at later moments.
For this step you need to dig up or freshen your knowledge about design processes, as they represent a valuable source of information for structuring your answer to the task. Moreover, this will come handy when tasks specifically require details about your process and, even when they don’t, you still have more to gain by showing them anyway.
When deciding which structure, consider that of a design sprint or IDEO’s method or a product vision board or adapt the philosophy of design thinking to fit your own way of organising work to deliver results (more frameworks here). No matter your choice, create a template that you can easily follow and fill out to show your approach.
For complex study cases, you can use the same process highlighted in your portfolio. For example, I used three variations in my current portfolio:
- Context — Challenge — Generative research & results — Evaluative research & results — Solution (Typography, Color palette, Business perspective, Visual design, Prototype & results) — Take away
- Context — Challenge — Research — Solution (Design logic, Typography, Colors) — Testing results — Lessons
- Context — Challenge — Ideal features — Process with 4 iterations that encompass (a) research, (b) findings and © implementation — Enlighten
If you look closely, you will notice the steps are all following design thinking theory, but present the process in a slightly different manner each time.
When preparing your template beforehand for simpler design tasks, look at design challenges or ask your peers in your network for examples — these will be good starting points.
You can start with this example, a 6-hour task I received recently as part of the application process for a freelance position:
”Learndirect is the UK’s leading online course provider. They help people gain qualifications in everyday skills like maths, English and IT. The course details page is text heavy and poorly laid out making it difficult for users to pick out the relevant information. Your task is to redesign the course details page, addressing the key UX and UI issues — course detail page.
- High fidelity desktop design ready for a developer to turn into a workable page.
- Document explaining all your design decisions and showing any research and analysis.”
I didn’t have a ready prepared templated and decided for a simplified visualisation of the process: Emphatize — UI & UX Analysis — Design decisions.
Follow your process and fill in your template
Now that you have decided on your framework, (5) use it for your particular task. Express the objective of your task in a concise form and establish which visuals are most representative for your solution, as well as which text-support is needed. Depending on the focus of the job, you might consider placing more emphasis on UI or on UX.
In my case, I opted for showing the overview of the task (before and after) from the beginning and then brining in the explanations. Each step (Emphatize — UI & UX Analysis — Design decisions) is placed on a different slide together with a list of relevant elements to the task.
(A) Overview of the task (before and after) & Emphatize (fig. 1)
a. Understanding the brand
- What the brand stands for: List of 3 adjectives that can be associated with it based on the brief or the recruiter’s answer to your question or your own perception after checking the website and the ”About” section.
- Style guide: typography, palette, iconography etc.
b. Understanding the users and their context
- Profile: location, age, interests, life stage, needs or any other elements that you consider relevant for your context (simplified personas).
- Jobs to be done & interaction with the website: ask a few friends/colleagues to give you feedback on how easy it is to find the needed information, to decide to take action or to attain other goals connected with the re-design.
c. Understanding the competitive landscape
- Look up 2–3 competitors in the same field.
- List them and notice how they deal with the problem you are trying to solve.
(B) User interface (UI) & User experience (UX) Analysis (fig. 2)
Based on my own reflections and on the feedback from 3 friends I had a list of issues in the order they came up (some of them are not visible in fig. 2, as the real page was a lot longer). Since a lengthy list is hard to follow, consider grouping the concerns under several categories to create a better hierarchy — I used ’Top navigation’, ‘Above the fold’, ’Benefits’, ’Pricing’ and ’Other’.
My research was not representative, as none of my friends were interested in a training course in UK, but it represented a proxy for real user tests.
(C ) Design decisions for better conversion (fig. 3)
Here I distilled my readings and experience related to designing and optimising webpages. I used an insightful article on behavioural economics principles in design to structure the changes I deemed necessary based on the UI & UX analysis and to further justify my decisions. Fig. 3 shows only the final design, without the iterations — trying other colours, several layouts, variations of text and text spacing (Note to myself: improve the template to make clear that there were iterations before this current form).
If you check the website of learndirect (and is not yet optimised) and you look at my solution, you may notice that I didn’t develop a full page. Lots of information present on the website is not visible in my solution. This has to do with the time already invested in and with my belief that proving my competence doesn’t entail a full page design.
Moreover, I believe that using shorter pages consumes less energy and it adds up to have a positive impact on our environment. Following on this topic, if you have other ideas related to sustainable design practices, I’m excited to hear them — please reach out to email@example.com.
Prepare the epilogue of design-tasks
As for any impactful experience, carefully (6) construct the end of your at-home design task, which is also the next stage of your application and development.
Firstly, ask yourself what you would do next in the context of your solution and/or what you would do, if you had more time. Depending on who the recipient of the task design is, you can include this information as a section in your template. You can also decide to have it in the email message, thus bringing it in front and creating a bit of suspense about your solution.
- Test the new design with potential users.
- Test if a certain image or word gets better results (in this case, for eg. testing ’award’ versus ’certification’ and the original hero image versus the new one).
- Test the flow and iterate on the feedback.
- Do a card sorting activity to determine intuitive top navigation categories.
(Get more ideas from JP Design Academy).
Secondly, ask yourself what kind of feedback do you need to improve and ask the relevant questions when sending in your task. Ask specific questions and don’t overwhelm (3 might be the magic number).
- What is confusing?
- What is memorable?
- What is missing?
- What could be removed?
- What could I have done better?
- Please comment on my choice for navigation.
- Do you feel this layout will allow potential customers to easy access the most important information?
- Did I grasp the brand identity right?
- Have I identified the issues correctly?
- Would a different visual direction have more appeal?
- Why do you think so?
Read more on how to ask for feedback in this article from DesignLab.
For at-home design tasks:
- Get information on the credibility of the company asking for the task.
- Ask for consent to using the result in your portfolio.
- Clarify any questions related to the brief and the goal of the task.
- Decide on the process you will follow and create a template.
- State the goal concisely and determine best visualisation and best text-support.
- Prepare the end: what you would do next & questions that will help you improve.
Tools used in the example: Figma, Sketch, Google Forms & Whats app. Special thanks to CareerFoundry who opened my eyes to the world of UI and UX.