kaixisun.com

Overview

Can I call myself a product designer without a portfolio?
I doubt it.

However, here is the biggest challenge: how could I use portfolio to sell myself as a passionate and skilled designer (I know I am!) without professional experience?

Coming from an architectural background, I have extensive experience in design. I fully used my HTML/ CSS knowledge and design skills, and managed to deliver my first UX portfolio in a relatively short time.

Tasks

UX design, UI design

Skills

Design strategy, Information architecture, Design system, Visual coding

Tools

Webflow, Photoshop, Illustrator, After Effects

Outcome

I designed and built my first online UX design portfolio in 3 weeks with no previous experience of web design and development.

Research

What should a good design portfolio look like?

After completing my UX Design course, I felt ready to design and build my first UX portfolio. Although having loads of experience of creating landscape architecture portfolio, I had no ideas how to build an online UX design portfolio and what a good UX portfolio should look like.

I started my research by reading articles on medium about UX portfolios. I read about 20 articles and counted how many times a certain feature has been mentioned in them. Here is the result:

While keeping all those to-dos and not-to-dos in mind, I decided to have these priorities in my portfolio:

1. show my personality and uniqueness as a UX designer;

2. have in-depth and story-telling case studies;

3. make the design process and outcome clear and scannable.

Strategy

Site structure

After studying of other designers' portfolios, I found Work, Resume and About are three most common sections, and chose to have those three sections in my portfolio as well.

With only one UX case study at the moment, I decided to include my landscape architecture and illustration work in the portfolio too, as they show my design experience and transferable skills as well as my personality and uniqueness.

Roadmap

Then I set up a roadmap to help me define the goals of this portfolio and understand the major steps needed to reach it.

Ideate

Wireframe

I decided to build my portfolio with Webflow, as its visual coding feature has a lot of flexibility and relatively easy to use. However, with no previous experience of building a website, I still need time to learn and practice before starting to build the portfolio.

Instead of creating wireframe and low-fidelity prototype with prototyping tools like Figma, I chose to build it directly with Webflow as self-training, which helped me learn the basics of visual coding in a short time.

Design system

Another task before starting to build the real portfolio was to create a design system. As part of my personal branding, it also represents my personality and uniqueness as a UX designer. I hope to make the design simple and elegant while leaving a warm and delightful impression.

Build

Do designers need to code?

The greatest challenge I had was building the portfolio. Although I have the basic knowledge of HTML/ CSS/ JavaScript, and the visual coding system of Webflow is non-coder friendly, I still found it hard to actually build a perfect portfolio, and had to make quite a few compromises due to my limited coding experiences.

I am not a unicorn and I do not think designers need to code. However, building my portfolio gave me the chance to work from the perspective of developers when designing digital products, and understand how to work more efficiently with developers in the future.

Design to make real impacts

After completing the first edition of the portfolio, I purchased the domain name, set up Google Analytics for the website, and sent the link out to collect feedback.

While I got a lot of valuable feedbacks from my friends and the community of designers, I noticed that the bounce rate of the Home page was 60%, and people were more likely to visit the About page after entering my portfolio rather than scrolling down to see my work.

To solve those real user experience problems of my portfolio, I placed a "see my work" CTA under the headline on the Home page to encourage people to scroll down, and replaced the thumbnail of Fly UX which might be more attractive to readers.

Before
After

After making these changes, the bounce rate of Home page decreased from 60% to 28%, and more people are getting to see my work instead of only viewing the About page. Although the bounce rate can still be lower, I am glad to see that I made real impacts to the user experience of my own portfolio by design.

Reflection

As a designer who is new to this filed, designing and building my own online portfolio helped me to establish a more thorough understanding of user experience design.

1. Designing for different devices and screens helped me understand more about responsive design;

2. Building the website made me work from the perspective of developers, which could help me work with them more efficiently in the future;

3. Getting insights from Google Analytics and making decisions based on the data gave me the chance to know how to design for real impacts.

Kaixi Sun © 2021