Walkthrough of my general design process while creating this portfolio website
Type
Web Application
Role
Product Designer
UX Researcher
Full Stack Developer
Tools
Figma
Photoshop
Illustrator
NextJS
Tailwind CSS
Timeline
Autumn 2024
Duration: 2 Months
The Problem
How might we create a portfolio that effectively showcases my skills in design and engineering to attract potential employers and clients?
Design Process
Basic structure to help designers solve problems more effectively
Different projects require different design frameworks, but here's an iterative non-linear design process that I usually follow when designing applications. This is based on existing frameworks like Design Thinking and User Centered Design Process. Like all design frameworks, I try to put the user front and center while making sure the design is ethical and inclusive. I use a variety of tools and methods depending on the scope and challenges of a project.
Designs can always improve with each feedback we get from a user. So as much as possible, I try to get feedback from an end user every step in the design process to create a better experience. After getting input from end users, it is also important to consider stakeholder feedback to balance user and business needs.
Research
Empathizing with users
Understanding the needs, behaviors, pain points, perspectives, and motivation of end users is crucial in creating a good user experience.
To avoid biases and assumptions, I conducted secondary research on the end users of portfolio websites. This allows me to anticipate and predict what my end users might think and feel as they interact with my product. I researched people who usually review portfolios including heads of design, hiring managers, front-end developers, and creative directors. They sift through hundreds of portfolios, so they want to see brief, compelling and cohesive case studies.
I also ran a competitive audit involving portfolio websites made by Google UX Designers, Godly recommended websites, and top portfolio websites listed in Youtube. I want to communicate simplicity and efficiency, so I looked at websites that showcase that particular style for inspiration.
User Persona of a Hiring Manager
Ideation
Brainstorming solutions
I made an information architecture that tries to organize the information and features that can help solve the frustrations of hiring managers. This will be used as a guide for the general layout, interactions, and functionality of my prototype.
Information architecture of my design portfolio website
Branding
Typography, Colors, Logo, etc.
Before and After of Branding
To establish my personal brand, I have carefully chosen the typography, tone, and colors for this project. Previously, my brand focused on simplicity and a fun style, reflected in my choice of aquamarine as the primary color to create a sense of ease and creativity.
Now, I have refined my brand to convey simplicity, timelessness, and sophistication, aligning with a more professional image. With color psychology in mind, I selected brown as my primary color because it evokes warmth, reliability, and understated elegance.
I also shifted the typography to Neue Haas Unica, a refined sans-serif typeface that offers a more elegant and modern look compared to Nunito and Roboto, which were chosen for their readability and relaxed feel.
To represent my updated brand identity, I redesigned the logo as a wordmark featuring my name, "Iya." The "A" is uniquely shaped like a pencil to symbolize my passion for art, while the semicolon (";") subtly reflects my background as a software engineer, blending both my creative and technical sides.
Prototype
Creating a model of a product that demonstrates its functionality, flow, and goal
High Fidelity Prototype
Designing isn't a rigid process. Tools such as wireframes, user flows, low and high fidelity prototypes should be used only if they can give the most clarity in product creation. Armed with a deep understanding of the goal, elements, layout, and how the pages interact, I created a hi-fi prototype instead of creating wireframes first.
Once I translated the design into code, I made several changes to enhance the user experience. I modified the layout from two columns to three, allowing users to view more projects at once. I also adjusted the font weights and added sections to streamline interactions, such as dividing the gallery into three distinct categories and grouping other projects under the freelance project section.
Getting user feedback and redesigning my portfolio
Above the Fold Revamp
The hero section was redesigned to stand out more among a pool of designers. The original layout, with a corporate Memphis illustration on the right, felt too generic, so I replaced it with a more dynamic and professional design that clearly communicates 'DESIGNER ✨.' This new design features a large rotating image gallery that captures the user's attention instantly, along with a larger font weight for my introduction.
Addition of Contact Form
To make the contact section more streamlined, I added a form so potential clients and employers can easily reach out to me. This simplifies the process and encourages engagement.
About Me Section Update
I adjusted the font size of the heading in the About Me section to improve visibility and fix the visual hierarchy. I also changed my portrait to a rectangular frame to convey a more professional look. Based on the psychology of shapes, circular frames give off a casual vibe, while rectangles and squares feel sharper and more professional.
Project Card Details
In the initial version, users needed to hover over a project card to see the details, which is bad for accessibility. In the updated design, the details are immediately visible, eliminating the need for hovers, which are not intuitive on mobile devices. I also added another column to the project grid, allowing users to see more projects at once while scrolling.
Key Insight
Designers tend to get overly passionate and attached to their designs and I’m no exception to this. But when designing this web application, I try as much as possible to be emotionally distant from my work and ask for critiques to create a better portfolio. Feedback and criticism from my testers have helped me get more creative with the constraints. This also prompted me to view some problems in a different way and this helped me come up with designs I would not have thought of in the first place. The constant feedback has made the A/B design decision-making process more efficient. And for that, I’m really thankful to all the people who helped me and for the invaluable lessons of listening and flexibility.