Redesigning My Experience Page: From Clutter to Clarity
One of the most important things to consider when designing is the experience for a first time user. When you spend so much time working on something, it can be really difficult to take a step back and look at it with fresh eyes. Things that you may have built may be obvious to you, but not someone who is looking at or using something for the first time.
The experience page on my website had a similar fate. It was packed with information. It had a summary, my education, experience, volunteer experience, skills, and certifications. The problem wasn’t the content though, it was how it was laid out. Everything was dumped on the page at once, with no visual hierarchy to guide the eye. It was just a wall of text. There were some visual elements such as a timeline, styling, titles, and appropriate padding. However, that simply isn’t enough sometimes. I realized that it needed to be interactive in some capacity to reduce the cognitive load of seeing my experience page.
The First Attempt: Adding a Toggle
My first revision was adding a toggle feature, letting users switch between a detailed view and a bullet point view. The reasoning behind it was, “we can show a simple view at first, and if they want more, they can toggle between the two.” The detailed view was task oriented and meant to tell more of a story. In contrast, the bullet point view was tailored for recruiters by using action words and measurable results. It was a nice addition, but it didn’t solve the core problem. The wall of text was still there, just slightly rearranged.
I realized I was treating the symptoms, not the root cause. The page needed a complete overhaul, not just a quick fix.
The Solution: Collapsible Cards
After countless revisions and going back to the drawing board dozens of times, I finally landed on an idea that worked: collapsible cards. Each card shows the title, location, and dates worked. When you click on it, it expands to reveal more details. To make it visually distinct, I gave the expanded cards a different background shade and added a hover animation to signal that it was interactive.
The result ended up looking great as it’s no longer a wall of text. Instead, you see scannable information and something quite simple. It makes it a lot easier for someone to scroll through and find what they’re specifically interested in. The bigger titles draw their attention to the roles rather than the specific details. With a résumé, you do want your contributions to be front and center for a recruiter. However, that rule does not hold up with websites. The expectations are completely different as a viewer expects scannable and big components rather than walls of text.
The Role of Analytics
My analytics engine has been a valuable asset in the development of my portfolio. For example, I noticed a lot of visitors were coming from LinkedIn. I had a “Let’s connect!” button on my front page, but no one clicked it. Why? Because if someone’s (likely) visiting my site from LinkedIn, they’re probably already connected to me. It was redundant, and analytics helped me understand the user flow and remove the ineffective button.
People were actually more interested in my GitHub than my LinkedIn. However, the link to my GitHub was in the bottom left of the page. I instead moved it to the very front page. People now have the option of going to my GitHub or viewing the projects on my website. Something that’s really important to remember is to keep your GitHub README files in sync with your portfolio. You don’t want someone to miss key information, an example being that you have a demo of one of your applications.
The metric for the experience page that I was interested in was the bounce rate. At first glance, the bounce rate seemed low. I dug deeper and realized people were scrolling all the way down the home page, clicking on the experience page, getting overwhelmed, and leaving. It was deceiving data and to the untrained eye, it could’ve made it seem like people were liking the page when they actually weren’t. Since I made these revisions in March, the outcome was successful! People consistently visit my projects page after my experience page when they didn’t previously. On average, there have been more pageviews since the redesign, and the drop-off after the experience page is less.
The Pass / Fail Reality
A hard truth that I’ve learned is that your portfolio and résumé don’t get graded out of 100. They’re either a pass or fail. Either someone’s impressed and wants to know more, or they’re not. There’s no “That’s an 85%, here are some improvements.” In the real world of recruiting, you either make the cut or you don’t.
That’s why every detail matters. From the way information is presented to the placement of buttons and links, everything needs to be frictionless. If someone has to work too hard to find what they’re looking for, they’re not going to stick around. The choice in software that I used to build this website was my initial consideration when starting. I wanted something that could deliver an incredibly smooth user experience, and that starts with a simple and lean software stack.
Iterating is Important
Redesigning my experience page taught me a lot about the importance of iteration. There’s no such thing as getting a design right on the very first try. Iterating and revising is a much longer process rather than just building the initial version. A lot of people build out their portfolio, call it good enough, and don’t touch it ever again. I try to spend time every day experimenting and making changes. Of course, there have been a lot of experiments that never materialized, but how can you know if you don’t try? The job market is more competitive than ever, and you need to have the fastest, error-free, and accessible design to even get a chance to be looked at.