Client
Myself
Year
2023
Team size
1
My role
User researcher, User interface design, Web development
Overview
After taking a considerable long break from design since April 2023, I decided to jump back into job hunting my next design role. I looked at my previous portfolio which was created back in late 2019 and thought that the visuals and case studies were outdated. Furthermore, there were some bugs in my old website which I couldn't solve and I decided to revamp it.
The early stages of design and development
Designing through code
I have to admit that coding is one of my skills that have assisted me in designing better software products but it was never something I consider myself to be good and having to re-learn all of these skills requires time and effort. I knew that whatever I designed has to be easily coded out by myself so I utilise an approach called Hot Potato introduced by Dan Mall.
The 2nd iteration
I posted my first iteration of the portfolio on Linkedin and it receive positive feedback from my connections. However, I feel like it can be better as it felt like an unfinished product and didn't show my design skills too much so in the spirit of constant improvement. I improve further again both in visuals and technical.
In this version, I introduce more illustrations and tried out CSS Grid to organise information. At this point I was only using HTML, CSS, and a little bit of Bootstrap. I chose CSS Grid due to its flexibility in terms of layout control and it was easier for me to pick up.
Testing out the illustrations and Lottie animation
Besides coding, illustration was also something I can do and I would say I'm better at it compared to coding. I think illustrations' visuals can attract users to find out more about the content of the page. Moreover, I was also trying out animating them with LottieFiles
Something wasn't quite right….
I launch this second iteration after a 2 days of designing and coding. I also showed it to some of my designer friends to gather feedback (there are senior and principal level designers who provided valuable feedback)
What didn't feel right about the two iteration?
Simplify, simplify and simplify
The friend I showed my previous design to recommended me to use Framer as I could focus on putting more effort in designing a better UI for my portfolio without having to worry about technical feasibility. Framer also a CMS function which would allow me to create new case study pages within the website itself so that I no longer have to redirect the visitors to another site.
Listing out the information architecture
Before I create the wireframes again as shown below, I wrote down what each of the pages needs in terms of information and which one should have a higher hierarchy than the others.
I decided to cut down all other pages and content that would not be necessary and focus on only 4 items which were the Home, Design, About and also Case Study page.
Getting the visuals right
In this version of my portfolio, I wanted to make things right. I spent more time choosing the colours and also the typography that would fit the style perfectly.
Introducing the latest version of my portfolio!
Other pages
What are some limitations as of now
After spending a week re-designing and writing case studies into Framer CMS. The final results were astonishing and I could finally say that I'm proud of the this new version.
Although it is now a lot a better and the final outcome matches with my designs in Figma. There are still some elements I wish I could have more control on.
Case study page lacks customisation
Due to me being a rookie in Framer I might miss out some functionalities on customising the case study page as I couldn't adjust the spacing between paragraphs, images and so on. I think over time when I'm more experience with the tool then I'll improve it further.
Unable to link my custom domain
As I'm using the free tier of Framer, I couldn't link my custom domain name that I bought.
Side projects that exist outside of the website
I have a lot of side projects done in the past and most of them written and published on Medium. For these projects as of now, they will need to sit externally as it doesn't make sense for me right now to re-write all of them in Framer's CMS.
Thank for reading my case study and I hope you find it useful and inspiring!