Debbie Yu
NYC/GTA
thumb2.png

folio

UI/UX FOR FOLIO, AN APP THAT CREATES/MANAGE/SHOWCASES PORTFOLIOS.

folio

a case study

 
 
 

folio assists in easy portfolio creation, portfolio management, and
catered portfolio showcase.

 

Timeline

4 weeks
 

Role

Product Design
User Research
Userflows
Wireframing
Prototyping
High-fidelity Mockups
Usability Testing

 

Defining problems

 

A crisis of abandoned portfolios

As a creative, I had a large body of work, but no time to create my own website. Having a personalized webpage albeit nice to have, had never been important enough to find the time to create one. 

I personally have at least three outdated portfolios with three different services: DAportfolio, Behance, and Tumblr. These three services were missing enough versatility which led me to ultimately abandon these portfolios. I also knew that the goal of having a body of work is to ultimately showcase it. I noticed that many services had platforms that did not address this need.

Opportunity

In order for a portfolio service to be successful, I needed to focus on three most important problems to solve:

  1. Create a portfolio easily and quickly.

  2. Maintain a portfolio easily.

  3. Present a portfolio with versatility

 

Competitive analysis

Square Space
Many creative professionals who don’t have the time to code their own websites, use Square Space to power their content. Squarespace has highly customizable layouts featuring modern template designs. It gives creatives complete flexibility in creating a website without needing to code.

Medium
Why is medium working where blogspot failed? I believe one of the reasons is in getting rid of customization.

Medium is a great example of a service that makes creating a blog post quickly and elegantly. It takes off much stress when they take care of the visual design language, so the user can focus on creating content. In the app version, I also loved the unobtrusive interface and intuitive creation tools.

Google Slides
Many creatives use this service to present their work during job interviews. Slides are an effective story telling tool to complement a presentation. Unfortunately, slides are meant for a one time showcase.

What I loved about google slides is the unobtrusive way to click through pages. This gives a seamless presentation experience. I definitely knew that when presenting in person any type of portfolio or website, there are always a break in the storytelling experience during moments when technical issues arise (going to a different section, or going back to discuss a previous project). I wanted to find ways to mimic a seamless walkthrough like google slides.

 

User Research

 

Survey

In a research study involving 12 creatives of different professions, they were asked to various questions involving the portfolio creation and presentation process. The goal with the survey is to understand who our users are, what they want to accomplish, and to find existing pain points they have in the portfolio creation arena.

When I first decided on this design challenge, I asked creatives what they most desired from a portfolio service- most expressed the need to have creative control and flexibility. However, after hearing about their experiences involving different services, the more freedom one is given to design freely- the more it feels like work, and the less likely one would be able to realistically keep an updated portfolio. And so, one of the biggest problems amongst creatives is an outdated portfolio that takes too much effort to maintain.
 

KEY FINDINGS FROM RESEARCH

  1. Portfolios become outdated quickly due to ongoing maintenance needed.

  2. When presenting work, a portfolio is modified each time to suit audience.

  3. Access to internet is critical; most problems arise from connectivity issues.

 
 

User Interviews

Conducting individual interviews was key to helping me reach a deeper understanding of my creatives. I was able to listen to people talk about their struggles when creating and presenting work. This stage helped me form my key personas. 

 
 
My portfolio is very outdated.
I have a lot of work to show, that I could talk about for a long time, but because there is so much process involved, my work is hardly ever in a finished state.
I wish there could be a way to quickly document my process.
— UX Designer
I created my own personal website to showcase my work.
I have interviewed for different positions for different companies, and each time, I would pick which projects I wanted to showcase, tailoring the conversation to the position I’m applying for.
— Multi-disciplinary Designer
 
 

Personas - our different users

 

The Junior
A recent graduate who is looking to build a portfolio from scratch.
The task is daunting- gathering all her work into a presentable portfolio immediately, in order to be prepared for work opportunities.

The Old School Veteran
An art director with a large body of work, but a completely outdated portfolio. He wishes for the ability to quickly maintain and update his portfolio without much effort. He is not too tech-savvy.

The Savvy
A multi disciplinary designer with a wide area of specialty- Industrial Design, Graphic Design, App Development. He needs to be able to cater his portfolio to different audiences. He is more concerned with having the ability to organize his wide breadth of work in a neat way.

 

 

Information architecture

 

Userflows were continuously reworked throughout testing and prototyping phases. This is the latest version that showcases the structure of the app.

 

Low fidelity sketching

papersketch.jpg

This stage was messy but helped me plan how to visualize my hypothesis quickly. Here I sketched out feature ideas. After going through wireframes, throwing some out, generating new ideas, I continued to refine and update my userflows.

I referenced creation type apps and products such as Squarespace and Medium to see what worked best for them and how I could utilize a similar method for portfolio creation. Since I was working with a list of items and actions, I also referenced an app called "clear", which dealt with lists in a beautiful and minimal way.

 

 

Testing with the first prototype.

 
 

Usability testing & user feedback.

usabiity-test-notes.jpg

Usability testing with Invision was the most interesting part of the process. I wanted to quickly get my prototype into the hands of my target users. All my assumptions were put to the test. Observing user behaviour and listening to their opinions has led me to redo most of my app. Many screens were thrown and completely redesigned.

 

Observations

THE BACK BUTTON

How to better communicate that by pressing a
back button, users subsequently commit to
saving their project?

Should users be given the option to cancel changes
in case they made an error?

THE PLAY BUTTON

"I don't feel enticed to click it."
"It looks like a play music button."
"I'm confused about what this is for."

A VISUAL DASHBOARD

"Why do I see a list of pages? I would rather see a visual representation of my projects."

With this insight, I decided to remove labels of project names, and replace with thumbnail representations.

REGARDING ONBOARDING

During a one-on-one session, users became irritated with many input forms during the onboarding procedure. Although the intent was to have users spend time knowing they would be creating a personalized portfolio, users were impatient and wanted to see how the information they were submitting would look.

Similarly, users wanted to get a sense of the type of portfolios that are possible before investing effort beforehand.

With insights from usability testing, I decided to simplify the onboarding process. Users will quickly get a sense of the value proposed through visual representations of what can be achieved with this app during two onboarding screens. After a simple signup process involving either Email/Password or 'Log in with Facebook', users are immediately brought to the dashboard where they can start experimenting. There are sample projects as a guide.

SAVED PORTFOLIOS FEATURE

Two participants of my study expressed the need for a saved preferences.

"What if I have several interviews in one day?"
"If this is an app for me, I want to be able to file and check back on different portfolios I've created."

I discovered that although a fully customizable portfolio on the go can be very useful, to enhance a user's experience further, would be to have a way to track a history of portfolios created. As a result, to address this need I have created a 'Saved Portfolios' section.

 

High fidelity mockups

 

I found a need to have a portfolio app that focuses on easy creation, easy maintenance, with a focus on flawless and clean presentation for a mobile device. 

 

Outcome

Initial feedback was very positive amongst designers from different fields. Prospective users expressed that they could see themselves using the app for personal use.

Have I created a useful product for a Junior, and Old School Veteran, and a Savvy Designer? If I had more time, next I would test my latest prototype with these users. Success would be determined if users found the product intuitive and useful. Retention rate is also a very important measure of success to determine if we have solved the problem of outdated portfolios; if users abandon our product- we have failed to help them in maintaining an updated portfolio, joining the service graveyard of abandoned portfolios. 

If I could continue prototyping this app, I would incorporate cloud storage access instead of retrieving files from phone storage. 

While there aren't plans to develop this app further, the positive feedback made it worth considering in the future.