Overview

Static Hero Image

Project Cards

Infographics

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.

Your browser does not support the video tag.

The original home page (mobile)

Your browser does not support the video tag.

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.

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.

Creating the new hero image (animation?)

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.

Static prototype

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

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.

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.

Creating the new project cards

Foodopian

A Social Media App for Foodies

Aplanner

An Academic Planning App

Illustration

Inspired by Monumental Valley

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.

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.

Creating new infographics

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