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

Figma

Responsive Design

Miro

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:

Scope

  • One week sprint

  • Design for web and mobile 

Goals

  • Share local content to draw new local customers

  • Share global content to draw customers to their online store

Focus

  • Compelling content

  • Information architecture

  • Responsive design

 

Key Insights

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

Humanity

Personality

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

IMG_0143.png
IMG_0154.png

Responsive design

Structuring the IG preview

IMG_0152.png
IMG_0142.png

Chunking 

I began by testing these two designs.

A

Group 5 (1).png

B