Nathanael Pifer Portfolio

Nathanael Pifer's logo

Building the Structure of Your Future Success

Hello, my name is Nathanael Pifer. I am a web developer and this is my Portfolio. I graduated from Pittsburgh Technical College with an Associate in Science Degree in Multimedia Technologies with a Concentration in Web Design and Development. I use HTML, CSS, and JavaScript to build responsive, fluid and intuitive websites.

Growing up on a dairy farm taught me about hard work and getting the job done on time. I love sitting down and coding pages for hours on end and trying to solve the problem that each project brings. As a developer I build the structure of the page and make it function as intended in a nice modern fashion that will be pleasing and easy for anyone to use. Below are examples of the finest work that I did in college on my own. I also built the structure for team projects like the Content Innovations site.

image of coding

Portfolio

Deep Sea Aquariums E-Commerce

Interactive Design
Objective: Let users customize and buy a fish tank
Target Audience: Adults, parents
Highlights:
  1. As the user clicks to add items to the cart, hand-coded JavaScript stores the user choices in localStorage, and puts text and graphics in the preview area.
  2. Interactive menu has a smooth animation when clicked so it feels more fluid for the user.
  3. @keyframe animations were incorporated to animate the fish swimming across the preview tank.
screen shot of Deep Sea Aquariums site.

Hyperspace Max Computers E-Commerce

Server-Side Development
Objective: Sell computers
Target Audience: Adults, parents, teens
Highlights:
  1. Product information is stored in a MySQL database.
  2. Hand-coded PHP was used to get product and order data from the database and display the information on the site. Clicking any product's view button will bring up a separate product details page.
  3. Hand-coded PHP was used to implement a shopping cart so users can add products to their cart, review what's in it, and fill out a form to purchase the products.
screen shot of hyperspace max computers.

Content Innovations Company Website

WordPress Team Project
Objective: Promote a company that provides education and training services to businesses.
Target Audience: Businesses, specifically their personnel managers
Highlights:
  1. The team chose to make the site with WordPress so the client can update site on their own if needed.
  2. Agile methodology was used, involving a scrum team, sprints, and backlog.
  3. WordPress plugins were used to make a contact form so that users can make inquiries and engage the company's services.
screen shot of content innovations.

Case Study: Kitchen Connect Kitchen Organizer

1. Empathize

image of user persona on a computer

This is an example case study to show the procedure I use every time I work on a project. For this example I was tasked with designing a prototype product to help users keep their kitchens organized.

In the empathize phase we interviewed different people to learn what they need and created personas. In the interviews we found the user's needs. I also looked at other solutions from different companies and analyzed what was good and bad about them to see what we could improve on.

2. Define

image of user journey on a computer

In the define stage we defined the problem we wanted to solve. For this phase we created a design brief, where we tried to frame the problem at hand. We also created a user journey where we told the story of our persona's need through drawings or writing.

3. Ideate

image of mind map on a computer

In the Ideate phase we started thinking up solutions to our problem: in this case, helping people stay organized in their kitchen. We started by doing different brainstorming activites. We used a mind map where we put the project topic in the middle and thought up words and drawings that would relate to that to help generate ideas. We also used the NHK method where we each wrote 3 ideas and tried to form full ideas from those. The last method we used was the Nyaka. In this method we took our user journeys and listed the problems and the solutions to those problems. We then took all of the solutions, and listed the pros and cons of each solution and narrowed it down to the best one. We then made a drawing of what the solution would look like and how it will function.

4. Prototype

image of prototype production

In this phase we created a prototype of our kitchen organizer to use for testing. We made it out of simple materials that were lying around. The prototype would be used in testing to help identify any problems that may need to be solved.

5. Test

image of user testing prototype.

In the testing phase we tested our prototypes on our users, the volunteers we had interviewed to create our personas. The testing let us know what an actual user does with the device and helped us iron out any problems that might occur.

Testing revealed that we should make the following improvements:

  1. More color options.
  2. Better shape.
  3. Slightly lower price.

The design thinking process resulted in a kitchen organizer design that would really help users. This is the procedure I like to use for each project, to guarantee users have a positive experience.

Contact