Portfolio Website

Strategy, Research & Analysis, UI Design

Overview:

In the past I've created websites for assignments when I was in college, but I've never attempted to create my own design portfolio, let alone learn how to code it.

What is the goal?

Create my first personal single paged portfolio.

Scope & Constraints?

The main constraints here are: the timeline, putting my coding skills to the test, picking my top three projects and coding useable links into the design for easy access.

Project Scope: 1 month

Project Type: Personal

My role:

  • Product strategy

  • Research & Analysis

  • Persona creation

  • Wireframes

  • UI Design & Prototyping

  • Testing

Tools: Paper, Pencil, Figma, Adobe XD, Photoshop, Illustrator, InDesign, HTML, CSS

My Process
Front End Dev. & Web Design
User Personas
Front End Dev. & Web Design

Who & why?

I started to think deeper into the "who and why?" of this problem and set up a few informational calls with a Lead Recruiter, a Lead Product Designer and a Design Director. They allowed me to interview them, and ask the following questions:

What are your needs and goals?

What are your pain points?

How would you describe your daily life?

What motivates you?

The following profiles are based on their answers.

User Journey
Front End Dev. & Web Design

User Journey

I mapped out this users’ steps to identify who might view my portfolio. What they might ask for from a recruiter, and what he might quickly look for on his search. I even identified a possible time constraint, a turn around time of one week.

Creating this step helped me design my portfolio in an even clearer way, utilizing space and specific headings for my projects.

Ideate
Front End Dev. & Web Design

Sketches

I started this design process with a low fidelity wireframe. This way I could iterate through my many design options quickly.

Using the knowledge from my research I knew I wanted to include case studies, an about me section and contact information.

I worked through about three different versions of my layout. Ultimately I decided to find a way to combine them. I wanted quickly introduce myself with a sentence or two at the top of the page, then let the user either click, "projects" or scroll down. Often times people are searching to view your work first. Then I followed with an about me section and added my contact information with social links in the footer.

Prototypes

This is a mid-fid-wireframe of my sketches combined.

Let's add some color!

Now that I know what I want the design to look like in its most basic form, it's time to figure out the branding.

High Fidelity

At this point in my design I have chosen my case studies, color scheme, fonts, named each section and tested how my one-page portfolio would fit on a desktop and mobile screen. I used Photoshop to find unique was to include my logo in a way where it blends into the background image.

Hint: It's layered on the note the the right of the envelope, and I added "Peralta Designs" to the background of the desktop.

Front-End Development

After all my design materials came together I got started on the HTML and then the CSS using Atom for my text editor.

Takeaways

With taking on the challenge of coding the site I learned that it's simpler to design from a mobile first perspective, and build outwards because thats how a Front-End developer would most likely build it.

I started off thinking way too big, desktop, when I needed to start with the smallest screen — mobile, then tablet, then desktop and then wide screens.

Front End Dev. & Web Design

Here's the mobile view on the right!

Backtracking my thoughts this way was the most challenging part. My biggest fear is that I still may have over designed my project, even after trimming parts down.

I learned that I needed to post the site live, and trust that this was only my first portfolio piece, not the last. This was phase one, and today, you're looking at phase II.

Triumphs 🎉 

Learning to code and design my own portfolio.

12
Iterations
4
Screens
20%
More users
100
cups of matcha

Interested in checking out my code?

Click the here's a link to my Github and below you can find directions on how to navigate the folders!