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