By FRANCIS CACCAVALE
A user experience seeking small yet poignant optimizations, that will help a relatively trivial website/portfolio convey information with lightning speed yet aesthetically.
As a competitive market of site builders (Squarespace, Wix, Framer et cetera) creates influence and pressure, a new threshhold begins as whether an individual wants to generate a generic 'Squarespace et cetera' template or try a hand at web development into the influence of Squarespace templates.
The only issue is that after Squarespace generates hundreds of portfolio templates for individuals globally, the landscape may become complacent as to 'this is what a portfolio has to be, UI, fonts, colors et cetera'. This design intends to create a stochastic approach to break a mold, which means to create a baseline prototype solely from experience and build a design process from a prototype.
Low-fidelity frames [mobile]
After creating an initial low-fidelity prototype based purely from experience to create some level of a baseline, user observations were made along with some feedback.
User Journey Map
"I like how in the baseline mobile prototype, the project cards resemble an app drawer from an Android or iPhone device."
User
Ensuing are key insights:
After the 'Empathize' stage, some optimizations would become obvious.
Omission of javascript
A finding initially, was that an effective website may go quite far with only html/css as a static website.
One can omit optional javascript to ensure speed of the website. Novice users are aware to the fact that javascript has an ability to collect personal data or 'cookies' arbitrarily to create security issues, i.e. what Richard Stallman would identify as ‘the javascript trap’.
Opt a single-column website
A user opening html pages in new tabs while navigating may distract or create an arbitrary time-lapse, even if only an illusion. Applicable only to desktop
Ctrl-f
As an executive decision was made into the final implementation to omit javascript, one advantage of omitting javascript is that a ‘search keyword’ function (ctrl-f) is already built into most browsers.
Beginning the design (after the baseline phase) means addressing each critical insight.
A key optimization (particularly to the mobile version) was to emphasize project cards as an app drawer from an Android or iPhone device. A user will immediately associate each case study as a potential app or similar experience. See Frame 2 below
Responsive frames
In terms of navigation, color accented vectors will help trace user's eyes towards the project-cards, respectfully. Letting the background color of black (#000000) with an opacity of 40%, creates a middle-ground of light and dark modes as an optimization of sorts. See Frame 1 above
Responsive frames
To help identify the designer as to this particular instance, a small collection of poems is available copyrighted and authored by me. Exhibiting multiple facets of the particular field may increase dynamacism to the portfolio as a whole. See Frame 3 above
As a minimalistic approach to the desktop aspect, a decision was made to let this prototype be a single-column website with hovering effects rather than mulitple redirections. How to init a case study overview without having to redirect to a new tab is still a discovery with engineering, however a prototype was made to understand what this could appear as. See below
High-fidelity prototype [desktop]
A primary takeaway from this design is the idea to encapsulate a dynamicism of one user experience designer into a portfolio, as to fitting as many UX aspects into the portfolio as possible, aspects being the many subsets of UX: engineering, interaction, researching, writing et cetera.
UI style guide
Last updated: June, 2023