Extending the DDM modules in Liferay with custom field types isn’t that easy. This blog post is the result of our attempts...
Monthly Design Review #2 – Museum pass case studyIbn Renders
Time for our second monthly design review! Last time, Gert guided you through his design for the POI Service application for our client Lineas. This time we’ll look at something completely different: the design of a case study for the Museum pass project for our client publiq.
First things first, what is a case study? Put simply, a case study tells the story of a project you’ve completed. You tell your readers what you did and how you did it. In this blog post, we won’t go in depth about case studies themselves, but focus on their design elements. Ultimately, these (along with compelling copy) will transform your story into an enjoyable document. For this post, we’ll use the case study for the Museum pass project. Note: the case study itself is written in Dutch, but the design principles hold up regardless of what language the content is written in. Additionally, we’ve added cyan guide lines to every picture, to make it easier for you to see how everything is lined up.
Designing the top of your case study
Unlike Drake, we’re not starting from the bottom, but the top of our case study. The first thing you want to make clear to your readers is what your case is about. An ideal motivation to show off your project’s name or logo! However, don’t be shy and show your own logo as well. You don’t have to make it huge (your readers will probably already know whose case study they’re reading), but make sure it’s there.
Below the logo of the project, we like to show the reader what expertises we used to complete the project. We show all the ones we offer, even if we didn’t use every single one of them. We do this because a future client may be reading this and might be interested in one of our other services. Don’t withhold any information that could be useful. You can however choose what your reader looks at first by highlighting important items and greying out others, like in the example below. If you consistently highlight things like this, you can continue using it in the future and it’ll always be recognizable for returning readers.
Tips and tricks for designing the body text
After the tags, we arrive at the most important element of the case study: the body text. You really need to make sure it’s easy on the eyes for your readers. Don’t disturb them with a big 14pt font size, but don’t make them search for their reading glasses with a 8pt size either. A nice 10 to 12pt should do the trick. Also make sure your line spacing (leading) is pleasant enough, so readers don’t stumble while reading. Perhaps the most important thing of all is to choose a nice font. Don’t try to be special, just make it readable. A nice Helvetica, Arial or similar font is fine.
Now, you probably know that most people who get a case study in their hands don’t immediately read the whole thing. Some people just don’t have the time to read your text, but are still interested in your project or business. To make everyone’s life a little easier, but especially for people short on time, we offer a keyword system on the side. These keywords allow people to grasp key concepts of the case in just one quick glance. It’s also a good idea to connect these keywords with the text. In this example, we used the same red color to connect the keywords on the side with relevant words in the body text. The other handy thing about this keyword system is that the avid reader will also have a bit of room to jot down notes.
With all this body text, you need something to keep your readers engaged. Give them some visuals! This could be pictures of your project being made, being used or the project itself if you can make pictures of it. Examples are screenshots of your application or a picture of someone using your mobile app on a phone. If you have absolutely no visuals to work with, you can try stock footage. Try to avoid these as much as you can though, since they can quickly make your whole case study seem ‘fake’.
Another thing you can do is try to visualize numbers in a graph. Be careful not to overdo it though, you don’t want to make things too complicated. Simplify your graph and highlight the most important detail(s). In the graph of this case study, we chose to highlight the peak of users at launch time. We wanted to show how successful the launch was, while the other days weren’t as important.
Properly closing off your case study
What do you want your readers to do when they’re finished with your case study? Throw your case study away and never think of you again? Of course not, so make sure you add a nice footer with your contact options. The hard part is putting a lot of different information in a limited amount of space. Play with your alignments for a bit until everything is spaced evenly. Make your preferred contact options bold and show your logo again like you did on the front page. Don’t overdo your footer with flashy colours or weird visuals. Add a CTA, guide their eyes to your website and make sure they know where to find you. That’s all. Missions successful!
Do you have feedback on this post or suggestions for upcoming posts? Let us know in the comments below! You can download the digital case study of the Museum pass with this design below, or check out the case study on our website.