Try it yourself: https://tombrewsviews.github.io/my-path

Project goals

1. Showcase the most critical insights I've gathered on my product designer path

2. Rethink and solidify key design processes

3. Improve my engineering skills in HTML, CSS, and ReactJS

Delivery process

This is an experimental project where I'm staying away from design tools like Figma and design each page in code as I'm developing it. There are many pros and cons to applying this approach to product design. The high level of control of the final interactions and animations is the most significant benefit of designing directly in code, but the "zero to hero" delivery timeline makes the process on average ten times longer compared to creating Figma prototypes. Important note, not all interactions can be achieved in Figma, which works in favour of designing in code for designers who want to have the ultimate control of the final UX.

Reveal interaction

Hiding the additional information for some items makes the most of the progressive disclosure design pattern, simplifies the content layout, and enables discovery mode.

Common page

To have one page that can be opened in the context of any other page I'm using a modal pattern to list a few case studies.

Menu challenge

Designing directly in code is challenging at times. There are a number of technical obstacles on the way to achieving desirable results. My ideal implementation of the menu would have the bar slide on click, but getting it working is another thing altogether. At these times my MVP mindset kicks in and I decide to ship over spending more time on polishing. Perhaps one day I will come back to it.

Scrolling animations and overall UX

I'm thinking this site could have way more cool effects like parallax scrolling and animated transitions, but staying in favor of shipping I decide to keep it simple, some might say boring, for now.

Used libraries

rive-app/react-canvas, testing-library/jest-dom, testing-library/react, testing-library/user-event, use-gesture/react, animate.css, gsap, particles-bg, react, react-animate-on-scroll, react-dom, react-modal, react-router-dom, react-scripts, react-scroll-motion, rive-react, web-vitals