My Portfolio Process: A Designer's Tale of Strategy and Execution

We all know building a portfolio website can be a mundane task, accumulating all those past works and deciding which to feature, thinking about the information architecture, the design direction, interaction design, visual design of the site, working within your own constraints, writing project case studies?? 😭 Arghh!!

Monkey and Computer GIF from Giphy

Really exhausting work and truly not for the weak! Explains why a lot of designers & developers find this particular process truly excruciating! And sadly, I was in that category too as a User Interface and Experience Designer or a Product Designer.

“

”

"The best way out is always through" - Robert Frost

Regardless, I had to go on this inevitable journey if I wanted to put myself and my work out there, continue moving to new levels in my career, work on amazing digital products with amazing people whilst also getting a good pay, and if I wanted to change the trajectory of my life for good so that I could buy that dream car of mine, yes dream car, that German Beast! Motivating, right?

I'm Ready GIF from Giphy

I'd like us to dive into my process and see how I was able and the cues I used to design what I had been procrastinating on for over a year in a short period of time.

APPROACHING THE PORTFOLIO LIKE A PROJECT

I approached my portfolio's design like a project given to me by a client. From first-hand experience, it's easy for us designers or developers to say we are going to design, build or work on our portfolios and just drop it after starting it.

Realising and acknowledging that problem, I needed something to keep me in the loop of working on it. I had already taken accountability on Twitter by posting that I was going to work on it this time for good after my friends challenged me to just get something up, but even that could not have been enough to keep me on track with working on it as side projects, school, extra learnings, dabbling with new tools or just being sucked into the internet rabbit holes would have caught up to me, again!

So, for this I had to role play (be both the client and the service provider), approach the project as if it was giving to me by a client and as we know, there's always rewards with or doing something for a client. For this, the rewards of the client were:

• Getting their work out there.
• Move up the career chain.
• Exposure to work on amazing things with amazing people.
• Make good money.
• Change trajectory of life.
• A shot at beginning the walk of buying the dream car of client, yes, that German beast.

But before getting to rewards, we have to solve a problem for the client, right? And what was or were the problems?? Well, I tried talking to myself like I would a client. You know the same ol questions we always ask but I will limit them here:

• Why do you need this portfolio website?
• What is it that you are trying to achieve?
• What do you hope it does for you?
• Does any event depend on this portfolio website launching? If so, timeframe?

You can also take a look at Dan Mall's project's questionnaire to get a good look at questions to ask in order to get an understanding of client needs before beginning your next project.

To answer all of the above questions I asked the client; a well-designed and updated portfolio website is an invaluable asset, offering 24/7 accessibility to a global audience, demonstrating your skills, fostering networking, providing doors to opportunities, creating strong impression that you mean business.

A well designed and updated portfolio website is the first step to getting noticed by the companies you want to get noticed by!

I listed my problems and my rewards as both client and service provider, and I got to work.

So first, define your PROBLEMs and REWARDs as to your WHY you are getting a portfolio website. Make them tangible and meaningful as to sticking through to execution.

VISION, FOCUS AND INFORMATION ARCHITECTURE

The Professor welcoming... La Casa De Papel GIF from Giphy

Well, you can address me as Le Professeur in this, and this was... say, my plan or strategy for the portfolio site? Let's get into it then.

I really struggled with identifying what I wanted out of the website. My head was all about the place with the vision and focus especially as a first-time portfolio builder. I mean, I could have just copied one or a style of one, but I wanted to get a genuine and intentional touch and approach as to what I wanted to do, achieve and cover with the site.

Also, another reason I couldn't get to grips what I wanted to achieve early was because Hick's law got the better of me, I had reviewed or went through a lot of other portfolios at that time and defining my own style wasn't that easy or natural at the time being, I had seen a lot of options so It was hard to decide which style I wanted to go with or which style would fit me best.

Settling on my vision took some time, probably two days or more. And to get at that I really had to reflect on not only what I wanted to achieve with the portfolio meanwhile but how I wanted to grow with it or see it evolve.

As a first-time portfolio website builder, I wanted something I could grow with since this was going to be my own little corner of the web and I was designing and building this from scratch with a buddy of mine and not relying on themes to do the work. I figured the site would be something that captured all or most of the things I am interested in professionally at the moment or would be in the near future.

That brings us to the IA - information architecture of the website.

La Casa De Papel Gif from Giphy

INFORMATION ARCHITECTURE OF THE WEBSITE

Initial thoughts were to go with a homepage and an about. A two-page root navigation where everything else was just included or fitted in the two (projects, resume, case studies.)

But with that approach it would have probably been clogged up with information and visuals hence causing information overload. And because I was thinking long term of what I had also wanted to get my hands into, I decided to break the two-root navigation down, extend and include my future interests in it which led to having a 6-page root navigation, where I had pages focus on specifically what the navigation or page name said descriptively. I will talk about the decision making behind the design direction in a bit. I wanted not only a portfolio website but a personal website also, my own little corner on the internet.

Updated Navbar

LANDING PAGE

The landing page was depicted by my initials ATMR which is also the domain name. There is no HOME spelt out directly on the navigation. You had to click on the logo or initials ATMR to navigate to the homepage if you were on another page or refresh the site link with the domain name to go to the homepage.

The landing page is the starting point for visitors. By design, mostly targeted for the 20 seconds of hiring managers so they get a quick overview into the kind of designer that I am.

I didn't want the landing clogged up with several projects, case studies or writings, I have dedicated pages for that. So instead, after the hero introduction which is the overview of the type of designer I am, the next section on the landing page includes a featured section & includes project and article which can be toggled between using a tab bar.

I could have used a carousel for that, but I wanted to drive engagement, so using a tab bar that could be toggled and allowing the visitor to do what he/she wanted looked like the way for me. It made the user feel like they are in charge when they scroll the site. Also, in the featured section there was also a button that could link to other pages of the site, and they were View all projects or articles button.

Images of Landing page

ABOUT PAGE

From my research and multiple article readings on "building the portfolio that gets you noticed by hiring managers" on Medium and the web, one is allowed to be flexible on their about page, they can add personality, & I see people add a lot, I mean, it's advised to add personality, a story of me, where I was were born & to whom, how I got started in design, my hobbies outside my professional work... But I think there's nuances to that and could hugely depend on where one is at in their career progression. Remember: a hiring manager probably goes through 10s or 100s of portfolios for applications.

So, the nuance of adding a lot of personality to one's about page? If you are far off in your career progression and have a really interesting story you think would indulge someone? Well, you can explore around with that and add in a lot of personality.

But for someone like me, a mid-level designer, who's trying to get my next job ASAP, I didn't want to try that. I wanted to maximise the opportunity of the page, keeping it business whilst adding a bit of personality. So, I would say add some personality if you are mid-level or a junior, allow the seniors to do the most, they are at that level. Ultimately, the decision's left with you to make.

Just remember, it is your portfolio, and it is being designed and built by you probably, but you are not building it for yourself. I kept in mind my elaborated story might not be as important as I think it is or would be to someone out there, so I kept it a bit strictly business! I wanted to maximise or make use of my seconds or minutes of attention given to me by the hiring manager. As mine was built for that purpose, it was to be my little corner on the internet where my work could be referenced, and it could lead me to other doors of opportunities.

As I mentioned before, I treated mine like a project for a client.

About Page Shots

PROJECTS PAGE

For the projects page, I was stuck on the page naming, it was between going with "case studies" or "projects." How I saw it, I knew I wanted to have most of my projects of real life on my page. However, I wasn't sure I was going to write a case study for all of the projects listed or not sure that I'd write them instantaneously. We all know how hard and demanding it is to write case studies and writing case studies in a way it would attract and retains visitor's attention? Haha! Even harder.
For the case studies, I had wanted to write about only my most recently completed projects & projects I am really proud of or thought had a good impact.

So why did I settle on naming the page Projects? It was simple at the end, I narrowed it down that case studies could be a part of all projects, but not all projects would have case studies on my site. And for a case study to be written, there needs to have been an existing or a completed project already and a will to write one. So, yea, simple!

Projects Page GIF

Though I wanted to share the case studies of my projects, there certainly would be projects that have no case study on at a point in time and I could just show the visuals and some basic information about that project or a link to the live project rather than skipping it out totally. And that would not have happened had I name the page "Case Studies."

Project with Case Study GIF

I wanted the visitor to know I have worked on a lot of projects even though not all of them had a design case study, a design case study shouldn't be the grounds for not showing off one's cool projects, right?

Project without Case Study GIF

ARTICLES PAGE

In my near future plans I wanted to start writing, whether it is writing about what I learn, what I worked on, or is working on, my ideas on certain things tech related, new findings about dabbling with a new technology or just life... I wanted to write about it and make it a habit. I read somewhere that when you write you discover new ways to understand something.

Also, I wanted to write because I had been getting back into engineering again & learning different technologies so sharing my thoughts about my learnings or findings would be cool. Moreover, I felt it would help me communicate better in a professional setting, and as someone seeking and looking to work remotely a lot & in lead positions or positions of influence, communication and clear communication is a very essential feat I hope to have in my toolbox.

I paid for the annual Medium subscription sometime in May in 2023 and I just thought I could leverage sharing my thoughts or informed thoughts through my website and on Medium just as I consume content on there.

So why name it Articles and not blog, posts or writings? Well, most of the writings I would be doing would be researched and informed, so I thought Articles was the right name or word for that.

On this page, I look to be sharing my thoughts on design, engineering, business, the tech industry and tools I dabble with. Because most of the contents I consume are related to the aforementioned.

Deeply, I wanted to shift from being a consumer more to being a maker, and writing was a medium through which I could achieve that.

Mobile Responsive view of Articles Page

RESUME

Well, this one was really interesting. There were two approaches as to how I could see this playing out.

Upon click of Resume on nav-bar, a visitor would be taken to where they can download the resume or view the resume before downloading it like a google drive... OR upon click it opens a dedicated resume page like all the other pages on the website itself, with a concise information about experience, key skills & noting when last the resume was updated and CTA button to download the full resume.

I went with the 2nd approach whilst understanding that it included an extra click to view or download the actual resume. But it was a trade-off I was willing to make.

Resume page

CONTACT PAGE

This page will have my contact information, because all through this website a baseline goal is to maximise conversion and create doors to new opportunities. Have a recruiter, hiring manager or potential client call or email me if they found the site and content appealing... I wanted to have a way of reaching out to me stand out, so a dedicated contact page made sense!

You'd notice the contact information; my emails and phone number are bold and large and can be easily copied to clipboard, all in an effort to be reachable.

Also, in the case a client, recruiter or a hiring manager preferred virtual video meetings, there is a way to accomplish that by scheduling a meeting on Calendly. This is my overall vision, focus and design direction of my portfolio website explained.

iPad Responsive view of Contact page

COMPONENTS CRAFTING

Most of the reasoning behind building components is reusability... I wanted a common or simple design language all around the website and that meant I had to make use of Brad Frost's atomic design principles.

In that way I had to create organisms and make them templates with just a little aesthetic change throughout the website. That sounded interesting so it was the route I went for hence.

I wanted consistency and I wanted the experience to be smooth and intuitive for the users or visitors of my site, but I also had development in mind. I wanted implementation to be less of a headache than it normally is. I wasn't going to build this with a no-code tool.
So, I designed it with the frontend engineer doing the implementation, my good friend, Barrie Potter in mind and consulted and communicated with him throughout.

Moreover, I will have to be doing some implementations work on my website in the near future so yea, I had to be nice to both my friend and I with the design and the implementation, plus it was a project we wanted to spin up quickly so creating components, variants and reusing them through the website was key.

TECH STACK USED

I'm currently getting up to speed with frontend technology skills again. I love the idea of conceptualising, validating ideas and giving them life from a designer's perspective. But in the near future, I see myself shifting towards or being a design engineer which encapsulates both design and engineering and is something I am very curious about. It just sounds magical and sexy!

My buddy, Barrie Potter building the website with code was a way to force myself to stick to that long term goal of mine in being a design engineer because I know I will have to do things myself later to improve on it.

For the tech stack to design and build this website, the tools and languages my buddy and I used were:

• Figma - for wire-framing, design and handoff.
• Tailwind CSS - for additional styling of components and content
• NextJs - for Static Site Generation (SSG) on the Articles page, Client-Side Rendering (CSR) or Server-Side Rendering (SSR) on other pages, and its optimisation capabilities, especially routing.
• Netlify - to deploy the website and changes made to the website through the repository or Sanity immediately without us having any hands on it.
• Sanity - is a headless CMS, to headlessly create and manage content that the website could use or request. The content from Sanity is sent to the Articles page.
• Google Analytics - for gathering insights into the behaviours of users, the performance of the website and to see how it could be later improved.

Mobile Responsive View of Website

To summarise, I just wanted a minimalistic website for a home on the internet that I can grow with and improve on with time, thank you for following with me on my little story, I can now say I'm proud to have join the percentage of techies who have a personal website and portfolio that is hosted online. A plan well executed...

Le Professeur smiling from Giphy