How I redesigned my portfolio

Some thoughts and notes about the process of my portfolio's redesign work

Deliverable

Well, a new portfolio!

My Role

Gotta do what you gotta do

Feedback Givers

Gilly Leshed

My fellow colleagues at Cornell DTI

Platform

Web

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)

User Testing

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

Static hero image losing detail on mobile

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.

wifi

My solution

Hero Image + Text layout

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.

wifi

Creating the new hero image (animation?)

wifi
Sketch

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.

wifi
Static prototype

Then based on the sketch, I enriched the details and set the tone of visual style to be clean and crisp.

wifi
Final version

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

Original project cards not prominent enough

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.

wifi

My solution

Project title + project mockup

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.

wifi

Creating the new project cards

Foodopian

A Social Media App for Foodies

wifi

Aplanner

An Academic Planning App

wifi

Need to change: infographics

Original infopgrahics was not mobile-friendly

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.

wifi

My solution

Mobile-friendly infogrphics layout

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.

wifi

Creating new infographics

Here are two examples of the new version of persona from two project detail pages

Final design

wifi