A UX/UI design portfolio website which was created to showcase my skills in designing and Frontend coding.


Roles

  • UX Design
  • UI Design
  • Frontend Development

Tools

  • VS Code
  • Adobe Photoshop
  • Adobe XD

Timeline

  • Overall: 2 months
  • Research: 3 weeks
  • Design & testing: 1 month 2 weeks


Research

I began my research by understanding more of what the target audience was looking for in an individual. This led me to many sources of information from forums to websites, videos, and articles on what qualities and skills are desired by hiring managers and recruiters.


User flow

Here's the user flow diagram that was made to give a visual understanding of what the structure of the website would be and how the user would interact with the website.

NOTE : the Case study is a part of the homepage and can be found by scrolling down, whilst (Joshuarichard.com, Demarara Bank Limited, Health Hub, About and Contact) are seperate pages.


Wireframes

I translated my ideas into low-fidelity wireframes. Then, I improved them by adding a few stock images and information that i had prepared. After a few alternations, my wireframes were defined enough for some user testing.

  • Adobe XD was used in wireframing.

  • Both high-fidelity and low-fidelity were created

Usability Testing

I created a fully-functional, high-fidelity prototype of the website. At the same time, I started recruiting subjects to participate in testing who fit my criteria. I did 3 usability tests in the first round and 2 after iterating on the issues that were identified:

issue 01

a few participants pointed out that the font "Arial" caused an unpleasant experience.


solution 01

After reviewing multiple fonts i found that " Poppins " a popular font was the best fit. To which i received approval from the testing participants.

Homepage using " Arial " font.

Homepage using " Poppins " font.

issue 02

Some participants found that the roles panels of the case study on the landing page were unnecessary and gave an unpleasant look to the design.


solution 02

To combat issue 02 i removed the small roles panel and created a single panel that would display the name of the project along with the roles i had taken upon be shown when the user would hover over the project image.

Case study's pannels " Before " alteration.

Case study panel upon hover " After " alteration.


Ui Design

Once the usability issues were resolved, I moved on to design the final screen in Abobe XD. My goal was to create a visual identity that aligned with my idea of an attractive portfolio. Also, I've checked other portfolios for references for inspiration.

  • The visual style I was aiming for was one that is fresh with a mixture of black and white.

  • I created designs for laptops and mobile devices.

Thank you for reading my case study!

Want to work with me? Feel free to contact me!

I look forward to hearing from you.