User Research

Define my Audiences

Early career male working as a mechanical engineer in the computer chip industry.

1:1 User Interviews

Questions that I asked were:

What do you like about your portfolio?
What do you dislike about your portfolio?
If you could rank your projects from most important to least important, how would you rank them?
What do you wish you had on your portfolio?

After interviewing, it became evident that the pain points were:

Copy: Project content is not easily scannable, asymmetrical layout
Information Architecture: Too many pages and duplicate projects under different tabs

Competitive Audit

I reviewed three mechanical engineer portfolios to identify opportunities for the client to stand out. After reviewing, I noticed that portfolios had lots of information on one page, complicated user flow and unreadable text due to poor color choices.

Some of the opportunities were:

Put the most important content front and center
Choose colors that have high contrast
Provide a clear navigation path

Open up the Problem

This led to the problem statement!

How may we re-design a mechanical engineer portfolio that has modern visual design and clear user flow?

User Interface Design through Ideation Sketches & Lo-Fi Wireframes

Original Website:

I removed the navigation menu and opted for a single-page layout where the most important topics were placed on the Home Page. If you wanted to see project details, you were directed to another page.

His projects had overlapping skills so it did not make sense to categorize his projects by skills on the Home Page, so I opted for a general projects section.

Technical reports were still left on the Home Page. Showing skills is important so I opted to highlight them on the projects page on the side of the page so they were easily discoverable.

Idea 1 - Shared with Client

Idea 2

Instead of an asymmetrical layout for project pages, I opted for text to be placed in the center of the page where the eye normally lands when entering a new page. The paragraph width is also in a skinny format to improve reading efficiency.

Using the completed set of digital wireframes, I created a low-fidelity prototype.

Test Ideas

Usability Study

Study Type: Moderated

Location: California

Participants: 1

I presented my lo-fi prototype to the client. Findings from the first study helped guide the designs from wireframes to mockups.

The first usability study revealed:

Wanted technical reports higher than projects because hiring managers care more about skills

Refine the Design

The second usability study used a high-fidelity prototype. Below are two example screens shown:

Feedback from the client:

Dark Mode

Home Page

Move Projects section above About Me section
Re-order projects: Robot Tracker #2, Design Competition #4, Sensor Sticker #5

Technical Writing

Use same design style as Projects section for Technical Reports because the client's initial reaction was to hover then click on the photo to access Technical Reports.
Remove the description of the test
Add the word "test" for the Technical Reports project titles

About Me

'shop tools' change to 'machining'
Find another or remove the word 'Simulation'
Job at Intel was about using the tools
Modify what he enjoys to 'coming up with design changes and test cycle process'/'iteration'.

Projects

'View Full Report' should be more discoverable
Return to Home Page does not return to Project section to look at more projects and how can we fit all the projects under more projects section. Client suggested an idea to use a carousel to show more projects.
For the Design Competition Projects, focus on cups in header image and cut out the people.

Build Scenario Flows with Hi-Fi Wireframes

The final high-fidelity prototype had a clear user flow, scannable content and modern visual design. It also met user needs for an improved layout.

View Prototype

Conclusion

Impact

✔️ The website made the client feel more confident in applying for jobs.

What I Learned

💡 How to work with a client

💡 Balancing client needs with design principles

💡 How to design in dark mode

For next time

📌 Conduct a usability study with mechanical engineering hiring managers

Portfolio Re-design