RESPONSIVE WEB DESIGN



Design Portfolio



Designing and building a responsive design portfolio website, while simultaneously exploring the user-centered thought that went into its design.



Blagovest Dimitrov

(Solo)



February - May 2022

3 months



Designer, Researcher, Tester &

Developer



understand.



Just like every other novice designer, I have encountered the problem of building credibility for myself due to the lack of demonstrated application.
Yes, the good old need-experience-to-get-experience loop. Then as I was tailoring my portfolio to catch the attention of recruiters, the revelation hit me. I realized that I can demonstrate my user-centered design process by presenting a case study about building my portfolio website.



Challenges





Capturing the attention of both the public and recruiters while simultaneously demonstrating my capability as a creative, thinker and person.



Solution





Developing an intuitive flow together with an enjoyable experience while exhibiting my professional capabilities as a designer.



research.



The first steps taken were to identify the end-user and their pain points. The focus of the initial research was on understanding and empathizing with recruiters, seeking out their pain points and their point of view on how portfolios could fail to meet their criteria.

​For secondary research articles and interviews of recruiters, lead designers, and creative directors were reviewed to better understand the problem. The interviews were documented and analyzed, outlining both the praised and frowned-upon practices.


Full User research report

Empathy Maps





In order to organize the data collection, empathy maps had been created for each of the interviews. This has greatly helped to highlight preferences and reoccurring complaints. Example:



Pain Points





Reoccurring complaints were then broken into three different categories, where pain points were categorized.





1. Limited Time and Attention



  • Recruiters don’t have enough time to spend on portfolios.

  • Limited time results in a limited ability to scroll-through portfolios effectively

  • Unnecessary content (images, animations, text) distracts recruiters
    ​
  • Lack of visual cues makes reviewing the portfolio cumbersome


2. Lack of user-centered design



  • Recruiters find it hard to navigate the portfolio and to understand case studies and vital information

  • Over-saturated portfolios tend to frustrate the user.

  • Users are frustrated when candidates design their portfolios to their own liking rather than the liking of the recruiter.

  • It is harder for users to engage with content without an engaging story.


3. Lack of focus on the design process



  • Users are unable to understand the involvement of the designer in the project.

  • Candidates fail to present their understanding of the problem.

  • Users are unable to understand why certain methods have been chosen
    ​
  • Users are unable to learn as much about the process as the final result


Personas





Creating personas allowed for a deeper understanding of the target audience. Furthermore, it allowed for summarizing the initial search data, communicating it, and later reflecting on it.

Two personas were created for this case study each representing different pain points and a different
end-user.



User Journey Maps





User Journey Maps were generated in order to gain a better understanding of what improvements could be made and how the user navigates through the portfolio.



analyze.



For my portfolio, I decided that it will best suit me to follow Jakob's Law of the Internet User Experience. A clean and sophisticated look, intuitive interactions, and flow, combined with sequential information architecture.



Site Map





For a seamless user journey through the portfolio, I chose sequential information architecture. This means that the users will be guided through a defined path and take in only the information that is presented to them at that moment.



Competitive Audit





A competitive audit of other portfolios had been conducted to highlight features and practices that I either liked or disliked. More than twenty different websites had been referenced. Combining the data gathered from the audit with the initial user research helped me make a selection of widely used and tested features that I included in my portfolio.



design.



The design cycle for this project was quite simple. Due to the fact that a very limited Contend Management System was used for developing the portfolio. The ideation cycle was a constant back and forth between sketching and trying to implement it in the CMS and work around its limitations.



Sketches





Colors





The colors used in the portfolio are the same ones I use for my brand. A subtle way to add some of my identity to my portfolio. The color palette features 7 colors between black and white. This allowed me to achieve a minimum of a 7:1 contrast ratio across the whole portfolio allowing people with

visual impairments or color vision deficiencies to seamlessly interact with the site.



Typography





The typography in this project was chosen to go together with its simplistic design. Two versatile sans-serif typefaces have been used. Both possess elegant, geometric, and neutral yet friendly appearances.



Buttons





Only one type of Primary button had been used across the entire portfolio. Featuring a dark and a light version for better visual communication.

The main use of the buttons in the portfolio is to solely guide users across the website and provide a better flow of browsing.



Visual Interest





A variety of visual elements, color differentiators, and font styles were used to guide the user through the information, draw attention to specific elements and make skimming possible. All of this was done using visual contrast between objects and text combined with Gestalt laws.



test.



Iterations were made based on user-generated feedback. The feedback was gathered by conducting a usability study that outlined the research questions, key performance indicators, methodologies, and information regarding each participant. Insights were gathered through the user's interaction with the product. These insights later resulted in actions that were used to improve the design.




In order to ensure the consistency of the usability study, a script was developed and delivered to the participants. It included an introduction, an explanation, and a scenario.


The sessions were recorded and transcribed into actions. The actions were organized into a table that categorized each action by the specific page it affected its urgency and type of correction. During the iteration process, all actions were marked as completed.




conclusion.



My career switch to UX has proven to be a long but exciting journey so far. The process of building and presenting my portfolio has been transformative and grew my design skills.


Now that I have completed this task, the upkeep and improvements will never stop. I have installed a web analytics service that will help and report website traffic. This will help me gain a better understanding of my audience, their age, gender, location interests, and how they navigate the website. Furthermore, success will be measured by how many recruiters contact me and their feedback on the portfolio.


I want this site to represent me and my growth as a designer. In other words, we will be growing together.

With that, if you have any complaints or comments, I would love to hear them. All feedback will be appreciated.



Reach out to me




Copyright© Blago Design 2022