2015

Frank

DESIGN+DEVELOPMENT, WEBSITE (MOBILE VIEW ONLY)

Frank is a social network application designed to help users improve their fashion. Users can post photos of their clothes and recieve brutally honest critiques in the form of either upvotes or comments.

At a Glance —

  • Tech Used: Node.js, HTML/CSS, Bootstrap, MongoDB

  • Design Programs Used: Photoshop, Illustrator, Invision

  • The Team: 3 Hybrid-Role Developer/Designers

  • Main Takeaway: Fail fast and fail often. "You are not the user." And Bootstrap has its pros and cons—it’s a powerful rapid prototyping tool but is difficult to customize among other things.

  • A Fun Fact: Frank is short for “Be Frank,” which represented our angle for our site: a platform where users could provide brutally honest fashion feedback.

The Design Process —

My Roles

I performed user research, designed the lofi and hifi wireframes, and helped develop the prototype site.

The Goal

To use the Human-Centered Design to needfind, ideate, prototype, test, and build a transaction site for a mobile browser.

The Background

Honest fashion advice is difficult to come by. Friends and family may provide white lies to avoid hurting your feelings, salespeople may say anything to get you to buy their clothes, and singular opinions may not represent that of the general public. We strove to solve this problem by providing a platform for users to receive and give feedback without limitations.

Needfinding

We conducted interviews with UCSD students. We had an idea that we wanted to have an app centered around fashion, and so we centered our needfinding process around that. We conducted interviews with people, and discovered early on that many of our interviewees expressed that they wanted a way to improve their fashion, particularly when they were buying new clothes. Taking that knowledge, we observed several interviewees as they shopped for clothes (either online or in person), and discovered that a vital step in the shopping process is asking others for critiques. We noticed that staff at some stores tended to make comments in an effort to convince the individual to buy more clothes. Friends were not dependable, there were some that offered useful advice, there were some that gave soft feedback to avoid hurting feelings, and there were some that had a different sense of fashion taste as the interviewee. Additionally, interviewees were reluctant to ask strangers because of various social pressures.

Using the insights we gained from needfinding, we determined that we wanted to create an app that helped users solicit honest feedback. We felt that the anonymous nature of the internet would allow users to critique and be critiqued without the fear of social stigmas.

Storyboarding

We created storyboards to represent the main use cases for our App. We made a storyboards for our main case, which was that advice from strangers on our app would give more accurate and honest advice than a friend. One of the storyboards is pictured above.

/

Paper Prototypes

Our next step was to create paper prototypes. Paper prototypes allowed us the cheaply and quickly work out and test the flow of our app. After finalizing our paper apps, we tested them with several users and noted their observations as well as heuristic violations. Some commentary we received, was that some sections were quite text-heavy and some of the buttons were too small.

/

Lofi Prototypes

We then converted our paper prototypes to digital prototypes. We first converted our lofi paper prototypes into medium-fidelity digital prototypes.

/

Hifi Prototypes

We then converted our medium-fidelity prototypes into higher-fidelity one, layering on styles for elements such as fonts and colors. Constructing the high-fidelity prototype was important because it allowed us to set the style and feel of the app in a way that was cheap and fast to edit.

In 2016, as a personal project for myself, I redesigned Frank. The image below contains the hifi wireframes from the redesign. I adjusted colors and styles, but also came up with a more indepth comment system. Most of these adjustments came from the feedback we received from our prior iteration.

/

Development Process

Details coming soon. In the meantime, you can checkout the prototype we built using the button below. It was only built to be mobile compatible, and may have some issues displaying correctly on a larger browser.

Icons

I created several icons for the site using Adobe Illustrator. I used a flat style which I felt completed the aesthetic of the app as well as the icon styles that were popular in 2015. Most of them were used on the search page of the app to complement the categories listed there, the file icon on the right was used on the file-upload page.

/
/
/
/
/
/

The Takeaway

We learned that we are not the user. There were some great insights that we gleaned from interviews that we wouldn’t have thought of ourselves. For instance, originally we had a menu of categories as our index screen, but a few of our interviewees mentioned that it would be nice if it was a trending-based post feed of posts from all categories. We ended up incorporating that into our app.

Lofi prototypes are important and allow us to fail fast and fail often. Having people test our flow through paper prototypes worked out a number of the kinks in our app before we spent time refining it with a hifi wireframe. Using this method allowed us to develop the final solution and product faster and prevented rework with prototypes that were most costly in terms of time and work.

Finally, Bootstrap is a highly powerful tool for rapid prototyping, especially with its responsive grid system. However, there are a handful of tradeoffs that crop up as a result, and so it's not always the right tool for the job.

  1. Lead Time: If the programmer is not familiar with Bootstrap, there is a slight learning curve, which can hamper rapid cycles.
  2. Div City: We ended up using a lot of divs, so there was an insane amount of nesting.
  3. Big Files: The entire library is also huge which heavily cramps load speeds. Customizing it drastically reduces file size but took time and project foresight that we lacked then.
  4. Change is Difficult: It’s not friendly towards style customization.
  5. A Risk for Homogeneity: If you stick with Bootstrap default styles, your site ends up looking like pretty much every other Bootstrap site out there.