How I Built My Design Portfolio from Scratch
The portfolio is a good experiment to execute our own design process, from Research to Development
After using templates for my portfolio for 1 year on Wix, and 3 years on Format, I decided to make a change — build my own portfolio site.
Why I decided to build my own portfolio
There are two reasons: Price and customization.
To use a template site, I need to pay at least $14/month, which means $168 for a year — a big money for me. Also, the templates are very limited. For example, most templates will use a hamburger menu for responsive design purpose. But if I only have two tabs, even on mobile they can be shown perfectly, so I don’t need the hamburger menu at all. I’m not a fan of hamburger menu, especially when I only have limited menus, because I don’t want an extra click for my visitors. Unfortunately, templates are not that customizable for the platforms I was using.
During my research, I found some good tools that are highly customizable and offer a reasonable price.
Wordpress is a popular CMS tool that is highly customizable, and also has an interface to edit content without the need of touching the code.
Webflow An alternative to Wordpress with more visual design support.
Semplice One time payment with all the functionality.
Regardless of the tools above, I chose to develop my own site because I wanted to practice my coding skills and give it a try after building two sites from scratch in the company.
A High-level Overview
I spent around 2 months to finish the whole thing, including design and development. Well, of course I was also working full time, so I could only do all of these during weekends and at night. If I didn’t need to work, probably I would only need 1 month or less.
Looking back, I think the process of building a portfolio is similar to the work we do everyday as a designer. The portfolio itself is also a digital product with a target user group and specific use cases. I have read something like designers should also design there portfolio. Exactly! The typical UX design process we follow can also be utilized here.
I’d like to share how I executed on each step, and look forward to seeing your comments!
Research : Goals & Some Resources
When we are designing a product, we need to understand the rationale behind the decision of building this product. We also need to know our users: what is their goal, what kind of difficulty are they experiencing. The same applies to a portfolio.
So why do I need a portfolio?Well, in my case, is to look for a job. I need to update my portfolio with some latest projects.But for freelancers, it might be to get the next client. So based on different cases, the design of the portfolio can vary a lot, like a freelance visual designer’s portfolio will need to show off a lot of fancy interfaces and screen interactions, as well as testimonials from previous clients. But for a UX designer, assets like flowchart and wireframes.
What about users? In this case, it is not a real “user”. But we all hope the visitors to our portfolio site can get the information they need, for example, understand how I work as a designer by looking at previous projects, know my design process, and have my contact information like email, blog and social media.
I have read some great articles about tips of building a portfolio, which are some great foundations for me before I started.
Content: Pick Projects & Tell Stories
Once we have a good idea of what kind of portfolio we want to build, the next step is to think of the projects we want to show. Based on the some posts like this one, I have decided that I’d better only show a few latest projects, instead of listing lots of old, irrelevant projects out there.
I chose 3 biggest project I have done at nanopay: Merchant Portal, B2b Portal and an experiment of a Design System. I noticed that all my projects are about web platform, so I also put two side projects about mobile apps, just to showcase my muti-platform design experience.
Different from graphic design portfolios demonstrating the fancy font design and colors, in UX portfolios, I believe it is more important to present the design process — to write a Case Study. What problems we are trying to solve, what research we have done, what are some design decisions and iterations and why, has the product launched and how is the user feedback, what are some lessons we have learned… There are lots of details that we can cover in the case study, and I’m sure as a designer you must already have a process in mind, if not, there are plenty on the Internet. But in total, based on what I have explored, I summarized the following sections needed for the case study.
Summary — One or two sentences describing the project.
Background — Give context to the audience. Why we built this product? What are some factors that affect the decision? Any business requirements?
Research — Who are the users? What are their motivation and goals? What bothers them and what are their needs? What are their touch points in the product journey and what can be improved? Based on research, find out what the problem is.
Design — Talk about the brainstorming session, what we came up with and why we abandoned some of them. What kind of design decisions we have made and why? How did we iterate based on user feedback? Did we test? How was the experience?
This is a very big section, as it includes ideation, wire-framing, prototyping, user testing, visual design, design systems… So it is better to break down into small pieces based on your own journey. For me, I divided it based on different challenges we figured out in the research, and how I tackled each of them with the team. Normally I included some, not all, design iterations and testing result to support my decisions.
Assessment — Was the product launched? If yes, what are some user feedback? What about the data? Any bounce rate drop, or more user interaction with the feature? It not, what is the current status? And internal feedback? What are some lessons we learned? What can be changed if we were redo this project?
Design: Structure & Visuals
The first step I did after I have my content is to figure out the structure of my site. I would love to have it as simple as possible, so I decided to only have two tabs: Work (also the homepage) and About. I put the case studies on the Work page, my bio and contact information on the About.
Next thing is the actual design of the website.
I made a trade-off here to make my website single column. As a beginner in front-end development who doesn’t know any framework, I chose to do single column, so it reduced the amount of development in responsiveness. The single column can work in small screens like a smart phone, and also large screen like a monitor as long as the max-width is set. But I have sacrificed some usability here: the single column works well on smartphones, but on a monitor it takes up too much vertical space so it needs a bit of scrolling.
Just as the regular design process, I also started from sketching to wireframes before I went into actual design and development.
Different from the products we design at work, my portfolio site only has 3 pages that need to be designed — homepage, about, and case study page. I didn’t follow the design — develop process, instead, I started the development of the website right after the templates are ready. As I already have the content ready, the rest is simply putting them in.
You might notice at this point that the case study page look a lot like the Medium blog post. I have to admit that I love Medium so much that I thought putting my portfolio on it (there are some designers doing that already, with a single homepage linking all the post together) . But then I realized that there is no password protection, and I won’t have my personal homepage either.
Development: Coding & Hosting & Accessibility
1. Coding
I have limited experience in coding: Some foundation in HTML,CSS and very limited JavaScript. But I’m lucky to have the chance to do a bit development at nanopay, so I have enough to start building a static page.
The biggest challenge for me is the lack of knowledge in front-end framework. So I ended up building up my whole site in pure HTML, CSS and a bit Jquery, which not only needs a lot of manual copy paste and duplicated code, but also requires a lot of maintenance if the site continues to grow. So my next goal will be learning a front-end framework like React, and start using tools like Sass to reduce the work load.Though I only have 3 pages to build, but having 5 different projects means I actually need 7 pages. Without a framework, I have to copy paste the header (all the meta tags, CSS links, JS links, google analytics) to all different pages, which can absolutely be avoided with a framework.
Another challenge I encountered was CSS fall back. I’m so new to development, so when I got to know the concept of CSS grid, I couldn’t wait and applied it to my portfolio, only to find out it was not compliant with IE and Edge browsers and it means I had to add fall back rules specifically for them. With a lot of search & trials & failures and extra CSS files, I finally make it compliant to most of the site with a project I used a password tool still experiencing a messed-up layout. I finally understood why there are some businesses still using old technologies as their target markets might still use outdates browsers.
During the time of writing code, I found out a clean file structure really matters! If I move a file, I need to update all the links in the code. So it will save a lot of time if we can set up a proper structure before writing any code.
I can talk forever if I were to describe the difficulties I have encountered in the process, but to summarize, some lessons I learned from doing a larger scale development:
- Keep a clean file structure and proper indent
- Use meaningful class/id name and CSS selectors
- Provide fall back for new CSS rules
- Pay attention to accessibility
2. Hosting
After I’m done with the coding, I tried to find a place to host my website. I was thinking of places like GoDaddly and HerokuApp, but luckily I found Github Pages, which absolutely saved lots of time and money. If your site is a static one like mine, it is a great choice and won’t cost you money.
3. Accessibility
As a designer, I pay attention to Readability like color contrast, proper font size. But when I’m a developer, I noticed there are a lot for to do in development. I’m still a beginner so the concept of ARIA is a bit early for me, but we can start with the following which I also executed in my code:
- Use proper semantic tags like <footer> <figure>
- Don’t abuse the use of <h1><h2>
- Avoid text over images (which I didn’t follow in some cases bu I did provide descriptions)
- Be sure to add alt text and caption for images
- Add descriptions to image button
— In my current portfolio, the color contrast of the Accent Color #61bbe8 seems to be a problem according to the accessibility checker, which I will need to fix soon.
Promote My Portfolio
If you haven’t had a look at my portfolio, feel free to do so.
And I would like to share how I promoted my portfolio as I would like to get new opportunities, meet new people and get feedback. I did the following things:
- Updated my social media — I put my portfolio link to Dribbble, Behance, Twitter, Medium, Linkedin, Github, anywhere people can find me
- Shared to other designers — I asked for feedback from fellow designers and other designers from the DesignX Community in Toronto
- Submitted to UX Design weekly — I submitted my portfolio link to UX Design weekly and luckily got accepted at ISSUE 189. I got over 500 visits that week and I can track from Google analytics to find interesting facts
4. Write about my portfolio, which is what I’m doing now! (Procrastination…)
Last Bit of Words
Wow!! It is a long article, and I’m glad that you are here. I really want to share how I designed and developed my portfolio, and hope this helps. I shared the tools and resources I have used during my process, if you are interested, please continue to scroll, otherwise you can stop here.
I’m Jingyi, currently working as a product designer at Financeit and feel free to drop me a few words or simply say hello if you would like to connect via Dribbble, Linkedin, and Twitter :D
Some Tools and Resources
1. Portfolio research
2. Design
Check your spellings and grammar with a writing assistant.
https://www.grammarly.com/grammar-check
I didn’t know the importance of Zeplin until I started writing code. The inspect feature and auto generation of code really helps.
Gifox is a good tool for recording your prototypes.
3. Development
I think Bracket is a good light weight editor for designers like me, who don’t require lots of powerful features.
If you have had trouble with the commands for push or pull, the Github Desktop is your good friend. Just one click and push.
How to add a password to protect your own website
