In design there is a give and take between your designers and developers. In my own pursuit to code a custom portfolio, I am learning through playing both roles. This case study is a portfolio piece about building a portfolio, kind of like Inception.
Client: Me
Role: UX Designer and Front-End Developer
Mission: To learn, code, and launch my own custom portfolio that meets UX best-practice and frees me from this frustratingly limited template!
Bootstrap- Why a Starter Kit
In an introductory art class, you learn by drawing from lighted shapes and replicating other artists. As a novice developer, rather than building my portfolio by writing only the things I knew how to code I brought myself back to intro art. Using a bootstrap template as a starting point brought several advantages:
Best Practices: I learn from the best by looking at their code
Building Blocks: Taking it apart and putting it back together helps me see the context
A Research Tool: I can apply UX to my own portfolio by adding google analytics
Translation: See how my designs become code and how to best support developers
Next Chapter - Template Evaluation
As this journey continues I will add details on my design modifications, code discoveries, and user feedback on my content. For now, the draft template only contains placeholder content. I'm starting with a heuristic evaluation of the template in order to info design revisions.
If I had a Magic 8-Ball, this might be where I got the message "outlook not so good." Upon first review I'm finding several design patterns repeated that do not add a clear value to the user. Namely, the overuse of javascript to scroll based on button clicks, and large content blocks that provide little value. It appears that the template contains placeholders for additional pages but they are not included.
In order to improve the experience for my visitor there are several immediate changes that I will learn to code.
Rewrite Anchors: Limit use of javascript buttons, but allow them to direct users to relevant content sections as well as indicate what content sections are available.
Add Event Tags: Include Google Analytics on remaining buttons to test whether they are regularly used for navigation, and if so which buttons. Compare button use and non-button use against metrics for session duration, pages views, and subsequent events that indicate engagement.
Add Pages: The template lacks any subsequent pages beyond the homepage, there isn't an established format for case studies, contact forms, or other content regularly found on a portfolio.
Revise Navigation Menu: The template supports responsive design, however, the menu is condensed under a hamburger menu even when on desktop displays. The resulting menu takes to you the same anchored page sections as the buttons. The context of page location is hidden, and doesn't align with navigating to new pages even though the portfolio icons imply additional pages.
Back to Top