Group 19 (1).png

Brew's News

Project Summary

Brew Memories is a small coffee shop in Brooklyn, NY. They were profoundly affected by the shut down of Covid 19, and are looking to turn their small local presence into an international following by creating a blog; Brew's News.


Here they want to feature compelling content to readers around the world. They want to do this using a mixture of different media; text, video, & images.

Tasks & Tools


Responsive Design


Competitive Analysis

Usability Testing

Group 1266 (2).png
Pouring Coffee into Filter

"What does a small coffee shop in Brooklyn have to offer a potentially global audience; why expand your reach?"

Stakeholder interviews determined:


  • One week sprint

  • Design for web and mobile 


  • Share local content to draw new local customers

  • Share global content to draw customers to their online store


  • Compelling content

  • Information architecture

  • Responsive design


Key Insights

A successful online presence for a small business owner should show their:



Dedication to their craft

Screen Shot 2021-07-02 at 1.48_edited.jpg

This photo truly captures the lovely vibrant personalities of Amy & Jin of HOME in SF

I wanted to understand our current users.

What makes their favorite coffee shop so special to them?

What kind of content do they love to see the most?

How do they consume this content?

Screen Shot 2021-06-29 at 9.51_edited.jpg

I was able to gather data from 17 users from a combination of user interviews and a survey.

Content users want

  • Updates on the store: new menu items, new locations, etc.

  • Staff appreciation posts.

  • Something that shows the coffee shop has a positive impact on their community.

  • Something that helps them connect with the owners.

  • Content that shows where the coffee came from, like home roasted beans, or features on where the beans are grown.

  • Educational pieces. 

  • Instagram

82% of the users used instagram as their main source of coffee content.

The overwhelming majority didn't even read coffee blogs because they were inconvenient to access.

Group 1275.png
Multicolor Coffees

This is a problem if you're looking to design a coffee blog.

How do we get people who aren't reading blogs to read our blog?

We make it easy for users like Annie.

Image by charley pangus

This is Annie

  • Annie loves all things coffee

  • She shops small and local

  • She likes companies that appreciate sustainability

  • She likes to feel connected to her community and the small businesses in it

  • She loves to learn new things and is often reading articles to expand her knowledge

  • She appreciates good service

  • When she loves a place she is a customer for life

Coffee on Desk

Annie needs to be able to access and share her favorite coffee shops blog seamlessly, through instagram.

Follows on instagram

Reads blog preview on instagram

Goes to blog to read full article

Shares article preview on instagram

In addition to designing a blog for web, I needed to design an instagram friendly responsive mobile design.

What exactly does "instagram friendly" mean?

Instagram hates linking out.

Users get one link, and it's in their bio. If they want to share something they will put the hashtag #linkinbio

Users can not put a link in the descriptions of photos. They won't click and aren't capable of being copied and pasted into a browser.

Group 1275 (1).png

This makes giving unique links to individual articles impossible.

Frame 1 (1).png

So I started my competitive analysis.

By utilizing design trends, I could build on users existing mental models.

Group 21.png

Chunking is used by breaking up large walls of text. Designers do this with images, block quotes, and short paragraphs limited to 3 sentences.

Pencils in a Cup

Mental Models


Responsive design

Structuring the IG preview



I began by testing these two designs.


Group 5 (1).png


Group 4.png

Usability testing

  • Found the IA confusing, "is this the home page or the blog?

  • Too cluttered at the top

  • Felt that it looked like an older site

  • Liked the large hero image and block text

  • Liked the formatting for the article previews

  • Felt it was easy to read and scan

Design decisions


  • I put local news at the top, but small. This blog's first customers are going to be locals who support this coffee shop. They're first interest is going to be read local updates on the store and neighborhood.

  • I made the second piece an international piece and I made it larger. This will appeal to a greater audience, including those who aren't local customers.


  • I added breadcrumbs for orientation.

  • I made sure to differentiate between the home page and the blog page.

Phone on a Couch

Then I began researching the responsive design for mobile.

The typical responsive design had larger photos, and was formatted similarly to the blog page.

Group 20 (1).png

Publishers like the Washington Post had dedicated URLS for their instagram page that looked like this. (Very similar to the IG layout)


Initially, I had this idea of using article numbers.

Instagram post - 1.png

The instagram preview posts would have article numbers on them.

This was a failure.

  • Not a single user completed the task. 

  • When asked, "Where would you search the article number?" user's responded "There was an article number?"

Then, when on the Brew Memories site, users could then search directly for the article number at the top right.