It's visually pretty, but I find the behavior of the scrolljacking very off-putting. There are two specific problems here: one is that there is no visual feedback when scrolling, making it very unclear if scrolling is even working properly. The second is an inability to use scrolling to quickly skim through the pages, since scroll actions are "locked" to discrete events, which is essentially the opposite of how scrolling works everywhere else.
As an example of how to do a similar effect in a more usable way, have a look at the "Apple Watch Series 2" page. While it retains the full-screen "tiles", you'll note that some elements (but not all) are allowed to scroll. This reinforces that yes, scrolling is in fact happening. In addition, scrolling never "stops" -- you can get to the bottom of the page as quickly as on a normally scrolling page.
Thanks for the feedback! You're right, there is no visual feedback aside from the scrubber at the right. Bad UX on my part. Going to rethink the entire homepage. That Apple page is a great example.
Nice work cover all, and I'd take the "scroll-jacking" comments with a grain of salt. You have an arrow at the bottom which is a common convention to let people know to scroll. Perhaps you could have the type fade in or animate some other way while scrolling.
Also, keep the photos. I saw a couple comments telling you to remove these but I disagree. You may not be a photographer,, but these server as an introduction to the case studies. If you have high-res assets from the projects themselves, use these instead of a random photo. For instance, the Hamilton Benefits Group website has a couple really nice images that can tie into the case study and still work as s nice hero image introduction of what's to come. Just make sure there's a direct connection.
The main problems I found were with some of the images in the case studies and the previous and next buttons at the bottom of these pages as well. Again, the Hamilton Benefits Group page is a great example of this problem. The first couple of webpage examples seem stretched too wide (fixed height and adaptive width? Too lazy to dig through the code to see why, sorry). The previous and next buttons look nice with the color over lays on hover but the image in the background tiles as the page expands in width. A media query with background: cover should solve this when the page width hits a certain point.
I also noticed a video on the 901 very good cocktails page not centering properly. Again, too lazy to look into the code to see why but this should be a fairly simple thing to fix. You should also look into saving these videos without an audio track. When an audio track is present, even when there is no audio in the video, Safari adds a speaker icon in the tab to let users know there is audio playing in this tab that you can mute. Since there is no audio in these videos, this notification is incorrect and misleading to users.
I like the design of my homepage but yeah, a lot of people think the scroll-jacking is annoying. Rethinking this so it's more intuitive.
There are a lot of bugs I've just noticed on Safari that I was not aware of— thanks for pointing those out. I'll look into removing the audio file on the videos.
Thanks for your detailed feedback!
Hey! Going to be super critical with my suggestions. Hope you take it well. :)
Agree with everyone else, the scroll-jacking is wonky. It also seems a bit weird to cycle through infinitely.
The imagery and typography choices are beautiful, but they tend to compete with your actual work. I would suggest showcasing more examples of your work rather than sourcing the photos from Pexels.
"Hire Me" CTA should link to a contact page, not an open-ended email. Especially since email links typically open in Apple Mail, which is usually frustrating (at least for me, a user who only opens Apple Mail by accident when clicking mailto: links).
Topics Over Tea section needs some line spacing - thought it was a jumbled paragraph at first glance.
Colophon in the footer seems a bit weird to me.
Resume is beautiful.
Need to update Instagram logo throughout.
Replace RSS icon with icon that represents blog on contact page.
Hamburger menu items animate too slow.
Wow thanks for this very detailed response! I really appreciate it :)
Regarding a few of your points:
- Definitely redoing the homepage to eliminate the weird scroll-jacking.
- I can see how the photos compete with the work and don't contribute to understanding fully what the project is about at first glance. I really like the photos, but since I am a product designer and not a photographer, it doesn't make sense to showcase photos.
- Did not even realize email links open in apple mail for some people. Going to add a contact form for sure now.
- Not sure where to put the colophon otherwise
Nicely done. I really like your typography choices. My favorite pages are the project pages. It's nice to see some thought behind the project as opposed to just visuals like many I have come across. I like the design on the home page but have was let down a bit because of the scroll-jacking. All in all very solid.
Thanks for the input, Andy! I'm glad you like the typography, I definitely agonized over that part.
And yeah, I definitely need to redo the homepage since a lot of criticism is in regards to the scroll-jacking.
Hey Vandana! Overall, really strong. Your work is presented clearly and it's easy to understand your role, what you wanted to accomplish, and what you produced. This is surprisingly hard and many designers struggle to do this well. So good job! If the goal of your portfolio is to get an employer's attention or land a contract gig, I think this will definitely help you :)
The homepage scrolling functionality is a little wonky. I like this form of "scroll jacking"—where you orient the user to the content on a scroll event. But it doesn't seem to work well on my trackpad (it scrolls up when I'm trying to scroll down). I think it just needs some tweaking. Not a big deal.
Thanks for your feedback! I'm happy to hear that my work is presented clearly— that was my goal.
As others have already mentioned, I see that the homepage scroll functionality is unfortunately very buggy. I need to take a stab at fixing this or just go with another approach from the homepage design.
Nice portfolio, Just wanted to ask any relationship with India? :)
My parents are from there!
as most of the portfolios I've seen here it's too much about the shape and not enough about the content, your work is good and it speaks for itself. sometimes overproducing is a big deal and I think that's where you're at, people who could hire you or be interested in your work spend 8+ hours a day staring at a screen, and seeing stuff that is pretty similar to what you're doing but for brands/products. my advice, as always, is cut the crap and skip to the chase. tell us what do you do, how do you do it, why do you like to do it and what have you done on each of the projects you're displaying.
Nice one! I just think that the VP mark isn't consistent with the website's style. Maybe you should rethink of a new VP logo
My first impression was "Wow that is ultra minimalist.. I wonder how this works?" Then all the large images loaded and things snapped in to place (I'm on a high speed Fios connection). I thought everything was very beautiful after that initial page load.
I personally think you should ignore the Scrolljacking complaints since that is par for the course here on DN and highly subjective to the tastes here.
However, I think you should heed the insight you have listed in your first case study:
INSIGHTS Too much information is overwhelming
If you were to edit down the copy in each of the case studies I think they would be a lot easier to read for hiring managers and recruiters. Unfortunately, they often don't have the time to read a long case study let alone 5 of them.
Trying to find the balance between detailed case studies and too much copy has been difficult. But I see your point, recruiters don't have that much time.
I'm stunned by how you put your typography choices and layout. Great! Oh and the content. Sand-dunes ftw :)