...
...

After months of application and finally landing at Cure.fit as an internship in 2018, I realized the importance of a portfolio which not only presents your work, process but also how you approach things and your personality. Before designing my portfolio, I used multiple social links while applying at various companies, and with this current era of online application recruiters are bombarded with such portfolio links, and they spend only minimal time on each. I started designing with the motive to make this time worth and engaging for the user while presenting myself in the best way.

Why website?

There are multiple ways in which one can share a portfolio, and it can be a portfolio pdf, Behance, or Dribbble link, website etc. Where most of the online portfolios like Dribbble help designers share what they are up to, mainly focussing on visuals and UI. These platforms are perfect for reach and online presence, but most of the time, companies are not looking for such content.

“Content is the king” is valid for portfolios as well, but the presentation is what helps you stand out from the crowd. Here are a few points which helped me decide to have a website as my portfolio:

  1. All content under one link - The conventional method of sharing multiple links in the cover letter makes it difficult for the recruiters to navigate.
  2. Gives personality to your portfolio and helps you make a proper story out of your content.
  3. Problem with sharing a portfolio pdf - Users never prefer downloading pdf, and a good quality portfolio generally has a high load time.
  4. SEO (Search Engine Optimization) brings organic users to your content

Research and Exploration

Before I started exploring ideas, It was essential to know my users, their goals, and things that need to be taken care of. Articles online really helped me know for whom to design and what to design. I studied several articles on medium, smashing design, nngroup, and other sources about designing portfolios. Checking other portfolios on the web was also a crucial part of the exploration, how they are trying to solve problems and trying to find out the reasons behind some decisions.

Why spend time on extracting the data which is readily available on the web.

Being on my internship, I also talked to a few designers over there to understand what they look for in a portfolio.

The Fun part: Design

Making sure that users can easily navigate through your content is an essential aspect for every product. Once I was evident with the users' intent and what are the things to be focussed, it wasn’t tough to work on navigation.

The idea was to make it simple and sweet, content being the hero and serving the purpose rightfully, with no complications, flying elements, animations, etc. At the same time, content can’t do everything on its own, building a story is essential; content with no context does no good. I decided to kick off the experience with an introduction, then taking users to my case studies, where the user may dig deep down into the details.

...
Branding and Visuals

It was challenging to get sure of the visuals I wanted for my portfolio, and it should not only give a unique personality to it but also empower the content. It took me some time and quite some iterations, but in the end, the result was satisfactory.

...


About page

Every page has its story and for this page the story was about my life. I wanted to make sure anyone who lands on this page gets to know my professional as well as the personal self, Who is Kunal Satpal? What he believes in? What does he enjoy?, and what matters to him the most? Everything had to be answered.

...
Development

I was no developer back then, it took me quite some time to perfect every part of it, but in the end, it was amazing, and I also learned a lot about development in the process. Thanks a lot to Praduman Goyal and Dhruv Bhanushali for helping me out with this.

Installing google analytics

A very minute task, adding 3 lines of code to every page of the website and you can track every aspect of your website performance. Google Analytics is a very powerful tool which helps in analysing user behaviours, check drop rates, bounce rates, exits, session time and do this for all different cohorts and time frames.

Launched on 26th September 2018

The launch is where the real journey started; it is the part where designers start validating their assumptions and working according to the feedback and new insights. I got several messages on social media from people who liked the website. I also got a handful of feedback on my website, from the readability, layout to the content. It was really a experience for me

After the launch

Launching was just the first step of what all that has been started, the following section is the journey of how and why I kept on experimenting with my portfolio and what all I learned in this time.

But where do I start?

  • By putting out your portfolio on the web and showcasing people. You’ll get lots of love and feedback at the same time.
  • Keep it alive, present it to as many people and designers possible, know their views/feedback for the same.
  • Don’t hesitate with the feedback and note them all.


...


December 2018: The first experiment

One significant feedback I got from my colleague Sai Nihas- “There is much description on the home page, what purpose does it serve”

I knew my users already, they are busy people bombarded with a number of such websites. Are they willing to read? Too much text and content on the home increases cognition and it's only about a few seconds, they drop out. Our busy users with a very low attention span needed something that they can consume easily.

...
...
...

After Math

With the help of google analytics I found that the average session duration increased tremendously and drops from home page also reduced. Well the terms were really overwhelming and I had to study and understand them properly before jumping to any conclusions.

...

Installing Hotjar in the meantime 🔥

This website is still evolving, and with hotjar integration, the heat maps, misclicks, scroll percentage, etc. I was able to know more about the user behaviour.

February 2019: Projects Under NDA

In february 19 when I was looking for internships, a sudden roadblock occured, my last two projects both were under NDA and I can not share them publicly i.e. I can’t put them on my website.

This is when I decided to create a pass key system that will let users view the case study on the website itself if they have the pass key.

May 2019: Insights from Hotjar 🔥

Hotjar provided the data for the deep scroll, the miss clicks and screen recordings.

With the increasing number of articles, case studies, blogs it was really tough to keep the scroll limited. Even adding one case study to the website means adding a full page, this wasn’t scalable.

Introducing blog cards

With a small stack of cards, more content can be fitted in the same screen size, description and subheading had to be removed to avoid cognitive overload. It also helped in differentiating between case studies and blogs moreover emphasizing on the bigger cards of case studies.



...


December 2019: Load speed and consistency

With more than a year passed, a number of things changed in my website several articles were added and now things had to be curated and images to be reduced so that website speed is not compromized. At the same time due to the lack of guidelines for imagery there was inconsistency in various cover images used across the website.

Final covers look like this.



...

March 2020: The Latest Experiment
1. Monochrome blue theme

Designing imagery for a blue based website is not that difficult but when everyone started associating this with my identity it hit me hard. A number of people ask me if I’m a big fan of blue?

...

2. Passkey! what do you mean?

People got really confused with the home page asking for a passkey, without providing any context. The next page seems very unexpected.


...


3. What’s there in the card?

The card still feels not big enough to some users for proper visibility of the content.

The previous experiment was a great success, I decided to further increase the visual content without compromising the scroll to give users a visual treat and engage them with the content.

...


The solution
1. Color neutral branding

Removed color from my brand and identity to avoid biasis and also using black to show professionalism and expertise in my work.

...
...


2. Upfornt Input field

With the imput field upfront and the subheading it is much more clear now what is the meaning of passkey and what exactly is a protected case study.

...


3. Images not bound to cards

Using clear and visible images, interaction gifs to give an enhanced visual experience to the user at the same time engaging them with the content.

...
Analysing solutions

So far I've got a good reposnse from people on the changes, It'll still takes a few weeks to get the proper data and analyse if these changes worked or not.

What's next?

Working on my portfolio website was a great learning experience for me, I learned a variety of skills from branding, design to development.

This website is still evolving. It excites me every time I look at data and try to figure out things that can be improved. There are a number of places where I know the experience can be improved mainly on analysing the effect of latest changes and where to take this forward.

Till then stay tuned :)

Next Blog
Experience at Cure.fit

See more of my works

Cure.fit Project 2018
IMG Project
Talentbite | Intern at stockroom.io
Say Hello
I am available for freelance projects, remote work or just discussing design, feel free to ping me at kunalsatpal1@gmail.com