dashboard with a yawning emoji

It’s a trend that is engulfing my LinkedIn feed – pretty dashboard interfaces composed of high contrasting gradients, soft but massive drop shadows and graphs that are showing incredible market upswings. Generally these dashboards are coming from junior product designers looking to land their first gig. We’ve all been there, trying to solicit our newly acquired skills to anyone who will take us. I’ve got some bad news for you, a fluffy one page dashboard won’t cut it.

You might attract the interest of a recruiter who doesn’t know their potatoes, but send work like that to any design or tech agency and they will roll their collective eyes and put you on the reject pile. For all they know you have downloaded a free UI template, tweaked the colours, rounded some corners and claimed it as your own (I hope you haven’t been that lazy).

What should I do instead?

I know what you’re thinking, “Alright Billy big balls, what’s the answer? How do I get from the reject pile to the interview elite?”.  Referencing a lyric from Thou Shalt Always Kill by Dan le Sac Vs Scroobius Pip:

Thou shalt not use poetry, art or music to get into girls' pants. Use it to get into their heads.

Essentially, you might have something eye-catching, but what does it mean, what does it do? You need to engage your audience otherwise they will quickly lose interest and move on. So how do we get into their heads? Simple, create a case study. I know, way more effort than a single page dashboard that will get you 23 likes on instagram (1 of those likes is from your other account, and another is from your mum), but that dashboard won’t get you any work. 

What should the case study be about?

Well to an extent, it doesn’t really matter. What the employer is really interested in is your workings. What was the reasoning behind your design decisions? How did you come to your final solution? It’s all about the journey, they want to see reasoned design approaches. Even if it doesn’t look good or the solution is wrong in their opinion, it shows them that you are a conscious and capable designer. 

How to create a half decent case study

I’m going to make a dummy case study for you below to give you the template of a good process. Does that make it a dummy, dummy case study?

The hardest part for me is coming up with a case study idea. Just an FYI, don’t redesign Netflix, Spotify or any other big wig. They don’t deserve your free creativity and there are a million other reskins out there already. I used the Sharpen Design Challenge Generator, it’s a great tool for coming up with interesting fake projects. 

My case study challenge is to: ‘Design a checkout flow for a ceramics studio’.

Screenshot of the design challenge generator
Sharpen design challenge generator

Step 1. Create a brief

Now that you have a case study idea, put your client hat on and write a brief for a designer to fulfil. 

Example

“We are a ceramics studio from Brighton, UK. We’ve been established since 2005. Currently we take bookings via phone and email but would like to allow for bookings online. We want to be able to show customers all of our class types, costs and availability. Then allow them to book their slot.”

Step 2. Research

Spend some time looking at other businesses in that field, what are their offerings like? Is there a common process for this? Do you know of other industries that have better processes that you could modify and implement into this project?

Step 3. Wireframe

Don’t skip this step, you may have a clear journey in your head already but it’s always best to layout that journey in a low fidelity manner before pouring hours into a hi-res design only to find that you’ve missed some really important steps. Are you going to wireframe for mobile or web? Generally I wireframe for the device that gets the most traffic. If there is budget/time I wireframe for both.

Example

I have done a mobile and desktop wireframe for the pottery case study. You can view the prototypes here:

wireframe designs of pottery website

Step 4. Test

If you want to blow your potential employees minds then run some tests! Don’t know how to test? It’s pretty easy really. Write down goals you want the participants to achieve and then ask them to complete those goals. Try not to guide the participant on the journey, if they get stuck then that’s good. It means you need to tweak the journey. Run the test on three participants per major breakpoint (three at desktop, three at mobile, maybe three at tablet if you think there will be a lot of tablet traffic) and then use that data to implement changes. Who to interview? Obviously this is a private case study so you probably don’t want to pay people to do this. So ask whoever is willing. Your partner, your Dad, that guy who always says good morning to you on the field where you walk your dog (maybe not that person, stranger danger, but you get the idea).  

Example

My wife kindly offered to be tested (I bribed her with chocolate). I’m only doing the one test as this is a dummy dummy case study and I don’t have the time or inclination to do more but you definitely should! Do as I say, not as I do. This test went swimmingly well and so I don’t need to make any changes but that’s exactly why you need to test more people. You will often find that most users will do fine but then you will get one who completely fails it. That is the important stuff, you don’t want a third of your traffic to get stuck do you? Think of the loss in revenue! 

Here is the recording of the user test.

Step 5. Design

Now you have a clear, tested journey, it’s time to design. Remember, you are not reinventing the wheel, of course your employer wants to see creative flair, but not at the cost of usability and functionality. For every design decision you make, remember to ask yourself, does this work for everyone? Is it accessible? Is this journey common practice? How will this work on other devices? When I design I tend to produce designs for large monitors all the way down to the classic iPhone. Try to be inclusive with your designs (except for Internet Explorer users, screw them, (check out my IE fallback page for my site)). 

Example

Following on from my wireframe designs and testing results I have come up with a hi-res design for the site. As this is a fictional brand I also created the logo and came up with a simple and accessible colour palette. I have only done the desktop and mobile breakpoints, but if you want to be really thorough for your own case study then you could also create all the common breakpoints in between. 

Desktop and mobile high resolution designs of pottery website

Step 6. Prototype (optional)

I find the best way to demonstrate to clients and developers how I envisage a product to work is by creating prototypes. I use a mixture of prototype flows with Adobe XD and interactive animated journeys using Principle. This really helps realise the entire design journey and also makes you the designer think about all the micro interactions that will help enhance the process. You don’t have to do this step, but it will make you stand out against the pack. 

Example

Here are the flow journeys for desktop and mobile. I also spent a couple of hours in Principle creating an interactive prototype of the checkout journey at desktop. Again this is a fairly basic example, you could go even deeper and produce further prototypes but it’s good enough to catch an employer’s attention. Watch the video below and/or test out the prototype here.

Pottery prototype

Step 7. Present

You have created a fully fledged case study. The next and final step is to present it. You may need to recreate it for different formats such as your online portfolio, socials and your CV portfolio. Don’t just show the final product, remember to include the whole process. The point of this case study is to show potential employers your entire work process. 

Example

I have put together a PDF showcasing the entire case study process. This shows potential employers my reasoning and thought processes behind the case study. They can see that I can think critically and competently produce a full project just from a basic brief. I have included links in my PDF so it’s easy for the reader to view the relevant work in its entirety rather than trying to cram everything into one document. In areas of the document I have lied, such as the user testing section, again that’s because I haven’t really done all of the testing but I wanted you to see what I would write if I had done the full process. 

Image of case study PDF

Send it out

If you do all of these things you will have a much better chance of getting noticed by a potential employer.  You will no doubt learn some new skills and techniques. It’s also something way more interesting to stick on your socials, you will get way more engagement and who knows where that engagement might lead? You could always take the case study even further by producing technical specifications for developers. You could even develop a design system for your project. What are those things, I hear you say? I can’t be arsed to tell you, google it.