Personal website case study
An empiric study with a personal touch
What is a case study?
According to Wikipedia
A case study is an in-depth, detailed examination of a particular case (or cases) within a real-world context
https://en.wikipedia.org/wiki/Case_study
But why write one? Isn’t it enough to just know how to write code? The answer is, not if you want to stand out from the competition.
Employees want to know who they are hiring. After all, they are investing the time and money to vet and potentially hire you. Personality matters, as well as your ability to write, speak or express yourself through some other medium to get your thoughts across. The bottom line is, you need to be able to explain your decisions.
But what does that mean for us Devs? Unless you are a blogger, I think an effective case study page doesn't have to be long but it has to be concise and descriptive. I also think the Dev should explain why they chose the subject to study, and discuss their hypothesis beforehand (before beginning the study) and after.
Also to be discussed are any problems that came to light, and how they were solved. Do be sure to include any relevant media/notes/evidence of work.
Examples
I like this example from Jen Simmons, though I wish she used real content (instead of lorem ipsum) and went into detail about her thought process. I will build upon this template going forward
Template
Study title: personal website
Intro: a short introduction detailing what the study is about/purpose/goals etc
Hypothesis: the idea to test
Methods: tools/research methods used along with explanations
Photo: [a picture of the style guide? A screenshot of an affinity mockup of the homepage]
Goal: to build a website that will get me hired. Apply the skills I've learned at PE
Conclusion: a summary of findings. Was the hypothesis supported?
Now that we have a loose template defined, I will use my recent project, my business card website, as a case study
Business card project
Most people think websites are all the same. I know I did. It’s just a bunch of content on a screen, right? I couldn't have been more wrong. Any website worth your attention span has hours of planning for the content strategy, font, colors, UI (user interface), etc. The concept of a business card website was introduced to me by Derek @perpetual.education.
Much like its paper equivalent, a business card website is meant to tell people who you are and what you do. However, we are working with a different medium (the web) so that allows for more pages (and content to include).
Since the goal is to attract prospective employers (and clients) why not include projects, experiments with code, writing, and whatever other skills you have that offer proof of your abilities? Now that we have a bit of a project overview, let’s go back to the template.
Case study
Since we got the intro and name of the study out of the way, let’s talk begin with the hypothesis.
Can we use a familar data structure/concept (a business card) to present data on the web? Will it result in Marco getting hired as a web developer?
Methods
As a design student at PE we get lots of opportunities to research for our projects (such as this one!) so I know the drill by now. I started by analyzing the competition! I researched other developers to see what their websites looked like.
Naturally, I ended up stumbling upon some well-known people in the industry, namely Wes Bos. I found his uses page was a great place to see an overview of the websites of different people in the web development industry. I used this as a jumping-off point for my research.
I clicked on the Dev category to see if any other business card-style webpages exist. I was surprised not to find any, many of the websites were either pretty heavy on portfolio work, wrote about their past/current work (or let their resumes do the talking) or were broken (either layout-wise or 404).
Luckily for me, my design-thinking skills kicked in. What does a business-card website really have on it anyway? At bare minimum
A bio (or LFPS). Something to make you seem personable
Some of your projects that showcase your skills
a way to reach you and/or social media links
Instead of reaching for the code editor, I worked out the layout for the various pages in Affinity Designer. I also included my LFPS.
I'm a front-end Web developer with an interest in accessibility and user experience. I am excited to combine my experience as a neurodiverse web user with my technical skills in the areas of
PHP
HTML
CSS
JS
To improve the web for everyone
I even started thinking about different themes (day and night)
One of the hardest parts of this project for me was the content modeling/strategy. I definitely got lost in the weeds so to speak, spending too much time planning out the content instead of testing out how the content would look at various layout breakpoints. That’s where I am at now in the case study. So I will update this post as I go!
Well explained! I look forward to the next steps : )