Prestofolio Portfolios so simple it's magic Nugget
Prestofolio allows anyone launch their online portfolio in less than 5 minutes, without worrying about code or design. I'm still building Prestofolio in my spare time, and you can check out the current live iteration at Prestofolio.com.

Problem

An online portfolio is a great way for someone to showcase their work and stand out to employers. My portfolio has led to a ton of opportunities I would have missed otherwise, and my friends have had similar experiences. So if there's so much value in having an online portfolio of work, why don't more students create their own portfolio? I had a hunch there was some pain point I could potentially solve, so I set out to learn more.

User research

In order to gain a deeper understanding of the problem, I interviewed 20 students who had a desire to create their portfolio but still hadn't. I listened to everyone's challenges with the process and focused on the three most common responses.

"I don't have time"

Impatience with the time commitment of sitting down to code, write, and/or design. Every single person said this.

"I don't know how"

A lack of technical knowledge about coding a site, setting up a server, buying a domain name, etc.

"I can't design"

A fear of embarrassment from making something that will be public but potentially look unprofessional.

The key insight is that people crave simplicity. Even a tool like SquareSpace (which abstracts away code and design) offers so much fine-tuned control that it intimidates some users. People get overwhelmed by the sheer size of available options and end up procrastinating indefinitely (a.k.a. choice paralysis). They need a tool that's effortless.

Creating a portfolio takes too much time, energy, and expertise

Goals

With a better understanding for what's stopping people from moving forward in their portfolio-making journey, I outlined some core guiding principles for my design.

Simple

People shouldn't have to worry about design choices or technical details. Everything should just work.

Guided

The experience should feel structured and comfortable, as though an experienced friend is helping them.

Magical

Every interaction should delight. It should empower people and make tackling big challenges feel effortless.

Design process

Since online portfolios exist online and I've had a lot of web development experience, I limited the scope of my designs to web-based solutions. There are so many directions to take a project like this, so I organized my design process in the following way:

1. Context

My overarching design goals are very big-picture, so the first thing I did was dive a little deeper into some definitions and emotions associated with each goal. I'm very mindful of how things feel, so this sort of thing helps prime me for when I start brainstorming.

Words

2. Ideation

I brainstormed a bunch of solutions and debated the pros/cons of each with my friends. Eventually I narrowed down my pool to three possibilities that are feasible and testable.

Idea 1

Option 1

Drag-and-drop editor similar to SquareSpace, but with all the unneeded fluff removed.

Idea 2

Option 2

One uniform style and design for everyone. So simple, you just have to add your content.

Idea 3

Option 3

A series of simple questions that limit the choices of design for the customized portfolio.

3. Iteration

I pulled together a group of potential users to give me their thoughts on each option. The best-received solution ended up being a combination of #2 and #3. People really liked the concept of creating their portfolio from a limited set of choices because it makes them feel like they're making a large impact with very little effort.

What's the minimum viable product
I have to build in order to get feedback on my designs?

Prototyping

Sketches and mockups work up to a point, but I knew I'd get the best feedback once I put users in front of a live system. I taught myself Flask (a python web framework) and used it to build the back end for the web app. Once I had a basic prototype working, I iterated on the structure of the user interface.

Prototype

I started out with a "standard" page structure (navigation at the top, with each page displaying its respective dashboard), but my test group didn't like the lack of visual feedback on the changes they were making. In the end, I balanced the user's desire for visual feedback with the understanding that I needed to allow space in the layout for the tool's functionality to expand in the future.

Screenshots

Branding & visual design

I wanted the brand to reflect the friendly and magical vibe of the tool. I immediate knew that a script typeface is perfect for the logo, since it feels more human and warm (both qualities I want to portray) than a sans-serif or even serif typeface.

I compiled a list of nice handwritten typefaces and polled potential users on which ones they liked. Interestingly, almost everyone gravitated toward the typeface I personally liked the most (3rd down from the right). It's a good thickness, it's friendly, and it's legible. Nice!

Fonts

I originally emphasized the logo's two words ("presto" and "folio") via two separate colors (purple and dark gray), but user feedback convinced me to keep it one color. I also added a wand icon to further emphasize the "magical" aspect of the tool and provide an alternate source of branding for applications that are too small for the full logotype.

Logos
← Previous project CalcuCafĂ©
Next project → BigRed//Hacks