How I redesigned my portfolio
Some thoughts and notes about the process of my portfolio's redesign work
Well, a new portfolio!
Gotta do what you gotta do
My fellow colleagues at Cornell DTI
Why I want to redesign my portfolio
Having been using this old design for my portfolio for about one year, I decide to redesign my portfolio completely because the old design had some usability issues in terms of responsiveness. As for visual design, I want to make the look and feel of my portfolio more crisp and clean while maintaining its playfulness at the same time.
The original home page (mobile)
The original home page (desktop)
In order to know how people feel when they read and interact with my portfolio, I invited some friends to do a user testing.
Need to change: static hero image
Though the hero image was beautiful and unique, it lost some details on mobile as the image was scaled down to fit a smaller screen. For instance, visitors can not read "UX Designer" clearly in the isometric typography art on mobile.
Instead of a static hero image with text inside, I decided to use a parallel layout to display image and HTML text. In this way, those text can still be read clearly on mobile.
Creating the new hero image (animation?)
Inspired by my own portrait, I wanted to increase the sense of identity on the new homepage by letting an illustration of my portrait be the new hero image.
Then based on the sketch, I enriched the details and set the tone of visual style to be clean and crisp.
In order to add the final stroke of playfulness and personality, I animated a rain inside the sunglasses "I" wear. Hooray, Done!
Need to change: project cards
Though the original cards are in vibrant and elegant colors, they did not show enough details about the project. Visitors said they can not know what the project looked like with the original design.
In the new design, I added a project mockup (or a glimpse) with the project title. In this way, visitors can know the project name and what it looks like at the same time.
Creating the new project cards
A Social Media App for Foodies
An Academic Planning App
Need to change: infographics
The original infogrpahics on my portfolio like persona / user journey map were mainly large static images, but they are to read on mobile devices because all information was scaled down.
Instead of using a large static image to incorporate all information, I used pure HTML-based layout to display information in order to make it look equally nice and neat on mobile devices.
Creating new infographics
Here are two examples of the new version of persona from two project detail pages