Design: 969 NYC Coffee

This is an overview of my design process on the 969 NYC Coffee website project. Check out my detailed 969 NYCCoffee research page to see how I got to this stage in the process, or download my PDF portfolio to see the entire process from start to finish.

 
969-banner@2x.jpg
 
 

project background

969 NYC Coffee is a small Japanese cafe in Jackson Heights. At the outset of this project, it was a fast-growing one person business. I led all strategy, research, design, and development activities on this project.

 

user research and design planning

I started the project by conducting research to identify who our users were, what drew them to 969 NYC Coffee, and what information they needed from a website. Based on my research, I identified the following insights as drivers of my design strategy:

  • Most of our users are local and many are return customers. 

  • Customers love 969 NYC Coffee. They love the food, the owner, and the neighborhood feel.
  • The online presence lacked information about Oda, the menu, the cafe's physical amenities, and its Japanese specialty products. 

 

See my full research process for this project on the 969 NYC Coffee research page.

 

Design Approach

Sketching Concepts

My strategy was to design a robust homepage that featured the cafe's key draws: the owner (Oda), the heart-shaped rice balls, and a warm, neighborly tone. I wanted this homepage to be scrollable but not too long, so users could quickly get the feel of the cafe and figure out where to get more information on their particular interests.

I focused on the desktop design in my original sketches, but made sure to use a grid layout that would stack nicely on mobile displays. Some of my early sketches and wireframes would have stacked awkwardly as screen sizes shrunk, so I made sure to take this stacking into account with my final wireframes.

 
969-sketches.png
 
 

wireframes

I wireframed the homepage for both desktop and mobile, making sure it would stack well on mobile displays and wouldn't require too much scrolling.

 
969-homepage-annotated-wireframes@2x.jpg
 

1. Banner photo of food and local message. Resizes nicely for mobile.

2. An image of the cafe’s iconic heart-shaped onigiri (rice ball) extends brand.

3. Copy introduces owner, Oda and his philosophy. Stacks nicely on mobile.

4. Yelp quotation and link show customers’ love of Oda.

5. Link to NY Times article adds legitimacy to business.

6. Footer contains key details on every page. 

 

 
969-oda-annotated wireframes@2x.jpg
 

1. Photo of Oda, the 969 NYC Coffee owner.

2. Oda’s experience shares his story and legitimizes the quality of his food.

3. Oda’s philosophy highlights what people like about him, extending his brand and appeal.

4. Again, responsive grid design enables stacking for a good mobile experience.   

 

 
 

1. Immediately starting the menu gets this information to users efficiently and reduces scrolling on mobile.

2. Brief descriptions explain foods to users who are less familiar with Japanese cuisine. 

3. Stacking sections lend themselves to easy browsing and scrolling across the menu.

 

 
969-japanese-products annotated-wireframes@2x.jpg
 

1. Brief description explains the value of this differentiator of the cafe.

2. Photo gallery with item labels show a sampling of products. Only permanent products are included.

3. The 4-column grid stacks nicely into a 2-column grid on mobile devices.

 

 
 

1. Banner and text remind users of the neighborhood, which is a big draw.

2. Location and map put location information front and center.

3. Amenities of the space - another user preference - is highlighted with text and an image of the cafe.

 

challenge: permissions constraint

One unexpected constraint that created a challenge was obtaining permission to use content related to a NYTimes feature article on 969 NYC Coffee as a promotional tool to drive users to that article. As seen below, the original design was intended to feature a quotation from the article to pique users' interest and reaffirm the cafe's brand, while the NYTimes logo would lend legitimacy to the review.

 
 

However, after seeking permission, it became clear that it would be prohibitively expensive to use a quotation or the logo. The final design highlighted the Yelp quotation by placing it in the center of the screen. To maintain a consistent look, I replaced both logos with icon-style graphics in the same style that I had used on the menu page. I also used the general labels Customers and Press rather than focusing on specific sources.

 
969-people-talking-section-screenshot.png
 
 

next steps

After creating the site, I conducted 2 usability tests to validate that the design had no major usability flaws. I recruited 2 customers at a different coffee shop to do 10-15 minute guerrilla tests with 3 scenario-based tasks. I discovered no major usability issues, but one participant suggested the menu page might require too much scrolling on mobile.

Analytics have shown that roughly 66% of users view the site on mobile devices, and that the menu page is the most visited page on the site. Future research could explore this page in detail to learn the extent of the issue and decide whether or not it's worth redesigning. A secondary navigation menu linking to each section of the menu (category-based) could be a possible design solution to this challenge.