FOOQ thumbnaillarge.png

Fresh Out Of Queens

 

Fresh Out Of Queens

Branding and Responsive Website Design

 

Client: Fresh Out Of Queens
Roles: User Research, UX Design, UX Strategy, UI Design, User Testing, Branding and Logo
Year: 2016

Fresh Out Of Queens (FOOQ)  is a company based in Queens, New York that currently operates on Instagram only.  They would like to brand themselves and to develop an online presence by launching a website.

 
 
 

Background

Fresh Out Of Queens was established in 2015 by Queens native, Anita, who is passionate about educating people about the borough while broadening the horizons of tourists and locals alike with its informative posts and by hosting experience-based events.  They currently have about 2600 followers, 600 of which they gained in the past two months.  

 

The Challenge

Fresh Out Of Queens would like to launch a website to establish a strong online presence beyond social media in order to become a reputable source for information regarding Queens’ culture and food scene, while operating as a profitable business and expanding its user base.  In addition, FOOQ would like to brand itself as a reliable, but also unique, fun, diverse, and inviting.

 

Research

Fresh Out Of Queens had many features they wanted to implement on their new website, but in order to launch the first version, I decided to focus on what the client felt would draw its audience over to the website from Instagram. The client believed that users would want to use the site to see past and upcoming events and directly purchase tickets. 

Hypothesis

Users want a Fresh Out Of Queens website to see past and upcoming events and to have a platform to purchase tickets.

Research Methodologies

  • Competitive Analysis
  • 5 User Interviews
  • Survey 20 users

When I went out to test this hypothesis by interviewing and surveying users, I found that though there was a demand for more FOOQ events to attend, there were no pain points associated with the current method of discovering the events and purchasing tickets.  As a result, I surveyed 15 followers to dig deeper to see if there was another need that was not being met.

From this new survey, I discovered that what users actually wanted were more in-depth reviews and information regarding the restaurants that FOOQ posts about on Instagram not only for the photos, but for the history and background as well as the fresh perspective given on foods and restaurants.  In addition, I found that users are usually looking for lesser known restaurants based on location, and that even though they use Yelp, they do not always trust the reviews. They needed a way to get more of the information they get from an Instagram square and caption.

 

Empathize

I originally created an empathy map based on the research I performed regarding events, but updated it after gathering new data from the additional survey.  I used this empathy map to help create a persona and to come up with a strategy that would move the users off of Instagram and onto the FOOQ website.

 

Key Findings

  • 86.7% of FOOQ’s Instagram followers said that they would be interested in a website
  • Current users like FOOQ not only because of the photos, but also for the unique persepective and educational posts on the history of foods and different cultures 
  • Furthermore, these users would like to see more photos and to read more in-depth articles and reviews about the restaurants that are featured
  • Users, whether they are natives or have just moved to Queens, use FOOQ to find lesser known hidden gems
  • Users usually look for restaurants based on location
  • Users do use Yelp, but do not always trust the reviews
  • Users would like more events hosted by FOOQ
  • Users dislike checking multiple outlets for information
  • Users sometimes miss Instagram posts
  • When asked if users would like a way to interact with other followers outside of Instagram, 80% said they would.

 

Persona

Based on my findings, I created the following persona to help guide my designs

 

Ideate

Strategy

I created this UX Strategy Blueprint to come up with a strategy on how the FOOQ website should be designed. From my research, I decided that the focus of the website should be on articles, and that there should be a way for users to interact with each other and the brand.  My research also showed me that users are interested in attending the events that FOOQ hosts, so I should somehow incorporate them into my design.

I concluded that my design should have the following features:

  • An Articles section with food and drink reviews, interviews, history pieces
  • A way to filter articles by neighborhood since my research showed that users look for information based on location
  • A way for users to interact with each other
  • A way for users to interact with the brand
  • Events section
 

Interaction Design

Site Map

I created this site map to determine the pages that I would need to design and to map out how the user would interact with the site. 

  • I made an articles section because that is what we will be using to attract users to the site. 
  • The Ask FOOQ section would be a section in which users would be able to submit questions to FOOQ regarding Queens.  Since followers seem to value FOOQ’s perspective, this seemed like a good way to get users to interact more with the brand. 
  • I decided to design a separate Neighborhoods section because I found that users are more likely to look for information on restaurants based on neighborhoods rather than cuisine or anything else. 
  • In addition, I added an Events section which would be very basic, but have potential to be expanded later on if a need arises.  
 

Wireframes

Since FOOQ currently only operates on Instagram, I knew that moving the users on to the website would require the site to be responsive.  Therefore, I went with the mobile-first approach and sketched out my mobile wireframes followed by desktop wireframes.  I then mocked them up digitally.

 
 

Desktop Wireframes

 

Responsive Wireframes

 
 

Prototype and Test

Usability Testing

I created a low-fidelity prototype using InVision and tested three users.  In addition, I also performed an A/B Test using Usability Hub because I wanted to test whether the map in the Neighborhoods section .  

My objectives were to find out if the interface is intuitive and to see if users could navigate the site without trouble.  The tasks users were given were to sign up for the newsletter,  browse articles about Food and Drink, look for articles about a specific neighborhood, share an article, comment on an article, and ask FOOQ a question for the Ask FOOQ feature.  For A/B Testing, my objective was to find out if I should keep the map or design the page differently.  

 

Usability Test Results

All of the users were able to complete all given tasks.  Test subjects felt that it was easy to navigate all of the different sections of the site.  One user said, “You can’t not know where to go”.  They also liked that the layout was very simple and clean.  There were some minor language and syntax issues which I addressed in my iterations.

The A/B Test revealed that users preferred a design in which they could see the names of the neighborhoods.  However, since this section of the site is focused on geography, I decided to redesign the page to still include the map while having a list of the neighborhoods so that the user could use either the map or the list to find the neighborhood they are looking for.  I tested this new page, and it was met with much more favorable results.  

 

Logo and UI Design

The client wanted the brand to be seen as fresh, fun, diverse, insightful, and unique with a specialty in providing reliable and uncommon knowledge.  They wanted the logo to give the user a feeling of being “in the know”.  When asked where the company aspires to be in five years, the client said that they would like to expand to other cities, so I knew the logo would have to be versatile for future usage in another city.

I chose bright colors to convey a sense of freshness and diversity, and put them on a dark background.  As a whole, the logo gives the user a sense of excitement and fun.  It almost looks like a neon sign of a cool underground spot that only insiders know about.  

 

Final Designs

 

Desktop

 

Mobile

 
 

Next Steps

Fresh Out Of Queens should promote its website on its Instagram account to migrate users over and also set up analytics to see how many users are actually visiting the site.  Once the site becomes established, the website can be the main source of information while Instagram becomes a way of directing people to the website.  

From my research, I found out that users would like to attend more events, so this is something that FOOQ should continue to explore.  Since so many users said that they would want a way to interact with other users, FOOQ should host events that are more interactive and let users meet and get to know one another.  Once these events take off, we can research once again if there is a need to expand the Events page.