Context

💎 Let's start from the top, this project begun with a UX audit I made for 👨🏻‍💻 Gleb Redko's website. My client wanted to upgrade his portfolio website before applying to new job positions. In the client's opinion, the website he made about 5 years ago needed upgrading.

💎 First of all, I had an in-person meeting with the client for understanding his goals, needs and preferences. Throughout the UX audit process, my client decided to redesign the entire website and he hired me as a UX/UI designer for these needs.

💎 How about a website of a developer and graphic designer in one person? Turned out that my client had some special UX/UI challenges 🙀 for my designer's brain.

❗️All the materials published got client approval❗️

🔑 UX Challenges

📍 UX needs and goals:

💎 1. The website needs to be user-friendly
💎 2. Navigation requires to be simple and clean
💎 3. The website must highlight the client's skills and experience in both web development and graphic design
💎 4. The website visitor needs to have the quickest way to reach the project page
💎 5. Find the best way of presenting projects of 2 categories: web development and graphic design

🎨 UI Challenges

📍 UI needs and goals:

💎 1. A style of the website still requires to be kind of provocative but not off-putting

We had several meetings to define the right style for the client's website. The process of identifying and finding the correct style became quite challenging for me.

The client wanted to have a rebellious style for expressing his personality and making a simple barrier for pushing away HRs or CEOs of companies that are not right for him. In the client's view, a progressive company with a healthy atmosphere will pay attention to his education, skills, work experience, not to the website style. I have to admit, he's got a point! At the same time, the website required not to be too aggressive taking into account that a detailed portfolio, even for a developer, is a key for finding the right job position.

💎 2. The website should incorporate his range of portfolio in web development and graphic design
💎 3. Graphic design projects and web design projects have different layouts and specification
💎 4. Dark mode is a must-have feature

💻 Development Challenges

📍Development needs and goals:

💎 1. The website is made using the Bootstrap 4 framework.
💎 2. So I didn't need to create an adaptive design but I needed to keep in mind that all the components will be based on Bootstrap 4 elements.
💎 3. The website is a single page application written in Vue.js
💎 4. Hi-fi prototype must be done using 12 columns grid system (65 px each column, gutter 30 px because of Bootstrap 4 framework).
💎 5. Hi-fi prototype must have a clear and logical comment section for simplifying the development process.

✏️ Website Sketches

Moving forward, there are different methods I could use to find a solution to such a challenge. First of all, it is research on the topic of how did other developers and digital designers already created their websites. But before that, I sketched 🗒 some website screens applying all clients goals and needs. I didn't want to limit my analytical skills and creativity by jumping into looking for someone's solution to my client's problem.

⭐️ Moodboard

After creating sketches it was the right time to explore the best developers and designers websites. I analysed more than 20 best websites in the tech industry, I created a mood board putting screenshots from each website into 3 categories: UI solution, projects description, features.

It was clear that my client had special goals but at the same time reinventing a wheel 😸 wasn't the best idea at all. I showed a selection of the best portfolios to my client and I took notes during that process to identify client preferences.

👾 Sitemap & Affinity Mapping

The next step was to create a website map that helped me a lot in the design process. The most unusual part of the map is that a user goes directly from the home page to the projects page. My client's goal 🎯 was to direct website visitors to the projects page so it was the best solution for this requirement.

During that time, I also worked with the client on finding the best solution for his "CV/resume" and "about" pages. It wasn't clear at the first glance whether these pages needed to stay separated or to be placed into one page. For dealing with this 🧩 puzzle, I used a simple-yet-effective tool named affinity mapping. My client participated in the affinity map process as well.

My client accepted the idea that his website would be based on principles of minimalism keeping some "bitey" 😼 avant-guard elements too. The minimalistic websites usually have a lot of negative space that, in my opinion, was crucial for this project. Negative space gently helps to highlight important pieces of information.

✒️ Wireframes

The following step was to redesign the website homepage. I started by creating all possible variations moving towards the most minimalistic ones. I needed to keep the client logo on the home page, his name and job title. The biggest question 🤷🏼‍♀️ was whether I need to keep a menu visible on the home page or the menu should be visible only when a user goes to the projects page. Then I did rapid wireframing and moved to the subsequent design process.

🎨 Fonts and UI guideline

The next step was about choosing fonts with the client. I suggested different pairs of fonts and my client choose the best pair for his website.
After that, it was the right moment to make a UI guideline and to move to 🥳 hi-fi prototyping.

🙋🏼‍♀️ Handoff

Handoff for development includes commenting section 📋 to every detail on a mockup. Prototyping was made in Figma. My client uses Figma for work as well and he was familiar with this collaborative tool so I did not need to export a prototype to Marvel or InVision.

🎉 Results 🎉

We conducted 3 rounds of the website feedback sessions and I moved to the last phase — testing the client's website. For this stage, I recruited users of different age and background. During the 💻 user testing, it became obvious that the size of project cards on front page should not take more than 3/4 of window height because 3 out of 4 users reported having problems with the navigation.

The whole design and development process took 2 months and 👩🏼‍💻☕️ countless cups of coffee.