Portflio Case Study

Portfolio hero image

Understanding the inner workings of our world's technologies has always brought me joy. When I was young I was the kid who asked if I could have your broken printer, TV, or sewing machine so I could take it apart and see the purpose of the inner machinery. Later, when I had more skill, focus, and ability to research I started diving into creating usable technologies from scrap. I built my desk out of materials sourced from a school that was being demolished, I melded together my bike from my local bike shop’s pay-per-pound bin. More recently I’ve uncovered that I took the more difficult routes because I have fallen in love with solving the unforeseen problems of translating constituent parts into a usable solution, this is why I developed my own website.

Objective

The aim of creating This portfolio website was to introduce myself to HTML, CSS, and the basics of Javascript so that I can better communicate/design with development teams in mind and have a foundational knowledge of web development.

Tools

Figma, HTML/CSS, Basic Javascript, Huffing and puffing to deal with that one bug that seems to not get resolved no matter what you change. Ohh I just needed to delete that one line, great, I wish I knew that an hour ago.

In the process of creating this portfolio, I generated the following deliverables

Competition research, user flows, Hi-Fi wireframes, the website (you’re looking at it!), User test guide, browser compatibility test report, website hosting decision rationale document.

Research

From the start, I set off not to create a website that was groundbreaking but rather to create a portfolio that was inspired by the well-treaded path. This has the benefit of being able to leverage well-established heuristics and mental models of my users and ease development hurdles. This decision ruled out the current trend of a one-page design or any kind of portfolio with high-level JavaScript.

In search of simple, yet beautiful, portfolios I turned to popular submissions on Behance and Dribble and noted what I liked and more importantly what I needed.

 Portfolio Findings Image

Now that I had my list of what I wanted my portfolio to look like I needed to answer, “what are recruiters, hiring managers, and direct reports looking for?”. To answer this question I reached out to Nicole Ciminello, Senior Product Designer. Ms. Ciminello informed me that when she searches for junior designers she wants to see the designer’s thought process. Second, she wants to see if she can easily navigate and understand the structure of the designer's website.

Separately, I needed the portfolio to be visually appealing to keep my target audience, that’s you, eyes on my website and more tolerant of minor usability issues via leveraging the aesthetic usability effect1,2.

Development; harder than expected

I’ve always taken to learning new subjects, applications and processes, fast, and that’s something I’ve taken pride in. That was not the case for web development.

Portfolio Development Issues

Testing

Once my semicolons and floats were in order I moved to validate my assumptions and overall ease of use of my portfolio. My test situations and open questions were targeted to validate if my navigation touch points were understood by technically skilled users, direct UX reports, and non-technical users alike to avoid usability issues and to address any omissions in content that hiring managers may want to have access to.

Portfolio Development Issues

I was not surprised that testing went well as I wanted my website to be based on well-established mental models. But I still needed to validate my assumptions.

Conclusion

I still love the process of solving unforeseen problems, but after developing my website I’ll need a break from learning new technologies because this process was arduous and long. I did grow a lot as a designer during this process, maybe not in my design skills as I intentionally limited complexity, but in my ability to communicate/empathize with developers and design with them in mind. Specifically, this will help me decide if I should design in a way that is responsive to users’ viewports or if the layout should scale based on percentages. Also, I can now confidently take on low-level web development projects so that more senior developers can focus on bigger more complex issues in front-end and back-end development issues. I look forward to continuing to learn more about frontend web development, mainly javascript, so I can leverage more complex user experiences and so I can continue to pull back the layers of our modern online experiences.

This Portfolio
Built From the Ground Up
Bocav
Solving How We Study
Current Projects
What I'm Building
Root
Live Your life
About Me
Meet the Goof Behind the Design