Building My Portfolio from Scratch in 14 Days
Building My Portfolio from Scratch in 14 Days
Follow my journey as I craft my own portfolio in record time, showcasing my skills and experience as a product designer
Follow my journey as I craft my own portfolio in record time, showcasing my skills and experience as a product designer
Embarking on my first portfolio project as a product designer, I transformed it into a dynamic website using Framer. Drawing from Google UX Coursera and insights shared in UI/UX Facebook groups, I navigated through key stages: Empathy, Define, Ideate, Prototype, Test, and Launch











Roles
Roles
Sole User Experience (UX) Designer
Sole User Interface (UI) Designer
Project specifications
Project specifications
Time duration: 14 days
Tools:
Figma
Framer
Jitter
Time duration: 14 days
Tools:
Figma
Framer
Jitter
Deliverables
Deliverables
Product Design:
Empathy user: User surveys and interviews
User personas
Competitive audit
User journeys and task flows
Site map
Low-fidelity wireframes
High-fidelity Prototypes
Design system and UI kit
Usability tests
Tracking metrics
Product Design:
Empathy user: User surveys and interviews
User personas
Competitive audit
User journeys and task flows
Site map
Low-fidelity wireframes
High-fidelity Prototypes
Design system and UI kit
Usability tests
Tracking metrics
Why did I choose my portfolio to build a case study?
Why did I choose my portfolio to build a case study?
Why did I choose my portfolio to build a case study?
I've chosen to present my portfolio as a case study for several reasons: Over my 12 years in product design, confidentiality agreements have limited my ability to showcase my work fully. This is especially true for my time at an E-commerce platform where I led a team in building an app for Shopify and later developed payment gateway integration for a new product. My recent work at FLYER presents a unique style. By presenting my portfolio as a case study, I can demonstrate my skills across different styles. I followed the same process in crafting my portfolio as I do with products. Using a case study format lets me share my design journey, highlighting challenges, decisions, and lessons learned.
I've chosen to present my portfolio as a case study for several reasons: Over my 12 years in product design, confidentiality agreements have limited my ability to showcase my work fully. This is especially true for my time at an E-commerce platform where I led a team in building an app for Shopify and later developed payment gateway integration for a new product. My recent work at FLYER presents a unique style. By presenting my portfolio as a case study, I can demonstrate my skills across different styles. I followed the same process in crafting my portfolio as I do with products. Using a case study format lets me share my design journey, highlighting challenges, decisions, and lessons learned.
Challenges
Challenges
Throughout my full-time career, I've relied on referrals for job opportunities, bypassing the need for a formal portfolio. This time, however, I needed to create one from scratch.
With the urgency of applying for a new job, I had to develop the portfolio quickly.
Despite having basic knowledge, I hadn't utilized any website builders before and lacked the ability to code a full website.
As of now, the portfolio hasn't made a significant impact, prompting the need for future updates.
Throughout my full-time career, I've relied on referrals for job opportunities, bypassing the need for a formal portfolio. This time, however, I needed to create one from scratch.
With the urgency of applying for a new job, I had to develop the portfolio quickly.
Despite having basic knowledge, I hadn't utilized any website builders before and lacked the ability to code a full website.
As of now, the portfolio hasn't made a significant impact, prompting the need for future updates.
Proposed solution
Proposed solution
Use my portfolio as an opportunity to establish a personal brand that reflects my unique strengths, values, and design philosophy. This will help me stand out to potential employers.
Break down the process into manageable tasks and allocate dedicated time for each.
Select a website builder that suits my skill level and project needs so I choose Framer.
Continuously refine and update my portfolio to reflect my latest projects and achievements.
Use my portfolio as an opportunity to establish a personal brand that reflects my unique strengths, values, and design philosophy. This will help me stand out to potential employers.
Break down the process into manageable tasks and allocate dedicated time for each.
Select a website builder that suits my skill level and project needs so I choose Framer.
Continuously refine and update my portfolio to reflect my latest projects and achievements.
Chapter One
Understanding the situation
Leveraging Experience for a Strong Portfolio
Chapter One
Understanding the situation
Leveraging Experience for a Strong Portfolio
With 12 years in product design, from freelancing and part-time roles during university to full-time positions as a designer and product owner, I've built a diverse network. This includes not just designers, but also HR professionals, design coaches, managers, and art directors. I utilize their insights to refine my portfolio, asking them to review my work and provide feedback from an employer's perspective
With 12 years in product design, from freelancing and part-time roles during university to full-time positions as a designer and product owner, I've built a diverse network. This includes not just designers, but also HR professionals, design coaches, managers, and art directors. I utilize their insights to refine my portfolio, asking them to review my work and provide feedback from an employer's perspective
User personas



Mei Wong
Age
45
Gender
Female
Occupation
HR Manager
Location
Hong Kong
I need to see not just what you've done, but how you think and approach problems.
Brief story
Mei has been working in HR for over 20 years and is currently the HR Manager at a mid-sized tech company in Hong Kong. She is responsible for recruiting and hiring top talent, including designers. Mei looks for candidates who have strong portfolios and can clearly articulate their design process and experience.
Goals
To identify and hire top talent who can contribute to the company’s success.
To find designers who can integrate well with the existing team and culture.
To streamline the hiring process by finding portfolios that are clear, concise, and informative.
Frustrations
Reviewing numerous portfolios with little time to assess each in detail.
Finding candidates who can clearly communicate their design process and thought patterns.
Ensuring the candidate’s experience and skills match the job requirements.
User personas



Mei Wong
Age
45
Gender
Female
Occupation
HR Manager
Location
Hong Kong
I need to see not just what you've done, but how you think and approach problems.
Brief story
Mei has been working in HR for over 20 years and is currently the HR Manager at a mid-sized tech company in Hong Kong. She is responsible for recruiting and hiring top talent, including designers. Mei looks for candidates who have strong portfolios and can clearly articulate their design process and experience.
Goals
To identify and hire top talent who can contribute to the company’s success.
To find designers who can integrate well with the existing team and culture.
To streamline the hiring process by finding portfolios that are clear, concise, and informative.
Frustrations
Reviewing numerous portfolios with little time to assess each in detail.
Finding candidates who can clearly communicate their design process and thought patterns.
Ensuring the candidate’s experience and skills match the job requirements.
User personas


Mei Wong
Age
45
Gender
Female
Occupation
HR Manager
Location
Hong Kong
I need to see not just what you've done, but how you think and approach problems.
Brief story
Mei has been working in HR for over 20 years and is currently the HR Manager at a mid-sized tech company in Hong Kong. She is responsible for recruiting and hiring top talent, including designers. Mei looks for candidates who have strong portfolios and can clearly articulate their design process and experience.
Goals
To identify and hire top talent who can contribute to the company’s success.
To find designers who can integrate well with the existing team and culture.
To streamline the hiring process by finding portfolios that are clear, concise, and informative.
Frustrations
Reviewing numerous portfolios with little time to assess each in detail.
Finding candidates who can clearly communicate their design process and thought patterns.
Ensuring the candidate’s experience and skills match the job requirements.
User personas


Mei Wong
Age
45
Gender
Female
Occupation
HR Manager
Location
Hong Kong
I need to see not just what you've done, but how you think and approach problems.
Brief story
Mei has been working in HR for over 20 years and is currently the HR Manager at a mid-sized tech company in Hong Kong. She is responsible for recruiting and hiring top talent, including designers. Mei looks for candidates who have strong portfolios and can clearly articulate their design process and experience.
Goals
To identify and hire top talent who can contribute to the company’s success.
To find designers who can integrate well with the existing team and culture.
To streamline the hiring process by finding portfolios that are clear, concise, and informative.
Frustrations
Reviewing numerous portfolios with little time to assess each in detail.
Finding candidates who can clearly communicate their design process and thought patterns.
Ensuring the candidate’s experience and skills match the job requirements.
User empathy map
User empathy map
For Priya Sharma - the third User personas
For Priya Sharma - the third User personas




By creating a case study portfolio that clearly highlights my product design skills and the impact of my work, I'll attract potential employers and speed up my job search
By creating a case study portfolio that clearly highlights my product design skills and the impact of my work, I'll attract potential employers and speed up my job search
By creating a case study portfolio that clearly highlights my product design skills and the impact of my work, I'll attract potential employers and speed up my job search
By creating a case study portfolio that clearly highlights my product design skills and the impact of my work, I'll attract potential employers and speed up my job search
Chapter TWO
Bringing Ideas to Life
From Sketch to Prototype
Chapter TWO
Bringing Ideas to Life
From Sketch to Prototype
Chapter TWO
Bringing Ideas to Life
From Sketch to Prototype
Come up with ideas by rapid sketching
Come up with ideas by rapid sketching
Like many designers, I mostly use shared Figma for my work. But when it comes to brainstorming solutions, rapid sketching is much better for freeing your creativity. Instead of waiting for a good idea to sketch, I sketch continuously until a great idea comes up. But keep in mind, we have a time limit for this phase.
Like many designers, I mostly use shared Figma for my work. But when it comes to brainstorming solutions, rapid sketching is much better for freeing your creativity. Instead of waiting for a good idea to sketch, I sketch continuously until a great idea comes up. But keep in mind, we have a time limit for this phase.





Competitive Audit is also a way to ideate.
Competitive Audit is also a way to ideate.
I explored Behance, Dribbble, LinkedIn, and Google to find outstanding product design portfolios. I wanted to see how others built theirs and learn ways to improve my own. Through a course I took, I also watched how Google UX designers create their portfolios, which provided even more valuable insights.
I explored Behance, Dribbble, LinkedIn, and Google to find outstanding product design portfolios. I wanted to see how others built theirs and learn ways to improve my own. Through a course I took, I also watched how Google UX designers create their portfolios, which provided even more valuable insights.
An idea is just an idea until you make it happen.
An idea is just an idea until you make it happen.
The ideation phase was enjoyable, but the real challenge lies in creating the actual product. Once I had a clear direction and foundation, I started developing wireframes and high-fidelity prototypes. This phase took longer than others, but I completed it successfully. After incorporating feedback and making adjustments, the next step is even tougher: bringing it to life in Framer.
The ideation phase was enjoyable, but the real challenge lies in creating the actual product. Once I had a clear direction and foundation, I started developing wireframes and high-fidelity prototypes. This phase took longer than others, but I completed it successfully. After incorporating feedback and making adjustments, the next step is even tougher: bringing it to life in Framer.





Chapter THREE
Refine - Test and Launch
Leveraging my Network for feedback and final checks before launching the live website
Chapter THREE
Refine - Test and Launch
Leveraging my Network for feedback and final checks before launching the live website
Chapter THREE
Refine - Test and Launch
Leveraging my Network for feedback and final checks before launching the live website


The most time-consuming part is creating the case studies and gathering impact metrics from my previous jobs
The most time-consuming part is creating the case studies and gathering impact metrics from my previous jobs
The most time-consuming part is creating the case studies and gathering impact metrics from my previous jobs
The most time-consuming part is creating the case studies and gathering impact metrics from my previous jobs
Key lessons
Key lessons
Gathering Impact Metrics:
It was challenging to retrieve metrics on my projects' impacts. I had to sift through the company's Facebook posts to determine what was public and what couldn't be shared.
Improving Case Studies:
My initial case study strictly followed the design framework step-by-step and felt too conventional. After receiving feedback and reading numerous articles on creating strong portfolios, I revamped my approach. For subsequent case studies, I used eye-catching titles and detailed how I solved problems and impacted the product or company.
Concise Case Studies:
I realized the importance of making case studies quick to read. I shortened them to focus on key points only.
Final Touches:
After completing everything, I made sure to check spacing, hierarchy, typography, and color contrast to ensure accessibility.
Gathering Impact Metrics:
It was challenging to retrieve metrics on my projects' impacts. I had to sift through the company's Facebook posts to determine what was public and what couldn't be shared.
Improving Case Studies:
My initial case study strictly followed the design framework step-by-step and felt too conventional. After receiving feedback and reading numerous articles on creating strong portfolios, I revamped my approach. For subsequent case studies, I used eye-catching titles and detailed how I solved problems and impacted the product or company.
Concise Case Studies:
I realized the importance of making case studies quick to read. I shortened them to focus on key points only.
Final Touches:
After completing everything, I made sure to check spacing, hierarchy, typography, and color contrast to ensure accessibility.
Design
Contact me for freelance projects, full-time job or anything
you want to discuss about design. I’m happy to answer
lebichngoc15891@gmail.com
Linkedin.com/in/le-ngoc-jun158
Design
Contact me for freelance projects, full-time job or anything
you want to discuss about design. I’m happy to answer
lebichngoc15891@gmail.com
Linkedin.com/in/le-ngoc-jun158
Design
Contact me for freelance projects, full-time job or anything you want to discuss about design. I’m happy to answer
lebichngoc15891@gmail.com
Linkedin.com/in/le-ngoc-jun158
Design
Contact me for freelance projects, full-time job or anything
you want to discuss about design. I’m happy to answer
lebichngoc15891@gmail.com
Linkedin.com/in/le-ngoc-jun158
Design
Contact me for freelance projects, full-time job or anything you want to discuss about design. I’m happy to answer
lebichngoc15891@gmail.com
Linkedin.com/in/le-ngoc-jun158