logo
Menu Icon

Iya 2024

Walkthrough of my general design process while creating this portfolio website
This shows a photo of my design portfolio landing page rendered in a mac and laptop device.
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
This shows a diagram of my design process which I follow in most of my projects. It also shows the common tools and methods associated with each design process step.
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.
This shows the user persona of our end user, a hiring manager.
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.
This shows the information architecture of my design portfolio website
Information architecture of my design portfolio website

Branding

Typography, Colors, Logo, etc.
This shows the typography, colors, and logo used in this project.
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
This shows a gif showcasing all the pages of my portfolio.

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.
Link to Figma Prototype

Testing

Getting user feedback and redesigning my portfolio
Image shows two versions of my hero section in the home page.

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.
Image shows the two versions of the contact page

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.
Image shows a comparison of the about me section.

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.
Image shows two different versions of project cards

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.

Other Works

CCAZZ Icon
CCAZZ
#Design
Kalla Studio Icon
Kalla Studio
#Design