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

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

Stakeholder interviews

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.

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

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

  2. Staff appreciation posts.

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

  4. Something that helps them connect with the owners.

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

  6. 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.

 
Group 1277.png
  1. Annie loves all things coffee

  2. She shops small and local

  3. She likes companies that appreciate sustainability

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

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

  6. She appreciates good service

  7. When she loves a place she is a customer for life

Slide 16_9 - 1 (1).png
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

B

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

VISUAL HIERARCHY:

  • 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.

INFORMATION ARCHITECTURE:

  • 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.

And although I hadn't seen it done anywhere else, I thought "maybe no one has thought of this?" (spoiler alert: I was wrong)

Instagram post - 1.png

The instagram preview posts would have article numbers on them.

This was a huge 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.

Group 43.png

Then I tested my second idea.

Build a standard mobile responsive design but feature the "Find articles you saw on instagram" section first.

Another failure.

  • Users like the look of the design, and the large photos, but they never scrolled right.

  • They all scrolled down, and when they didn't find it immediately on that page they bailed.

Users could scroll to the right here to find any instagram article. After 6 previews, they would be given a thumbnail link to a full page of instagram articles.

Then I tested the third and final design "idea".

This was the design standard for linking out from instagram. 

A dedicated instagram link.

A thumbnail grid system that replicated Instagrams endless downward scroll.

Users wanted larger photos and clearer titles.

USER FLOWS

  • See article preview on IG

  • Find article

  • Share article preview on IG story

Next Steps

  1. Test out some of the design changes I've made

  2. Continue to iterate

Read times are a component used on platforms like Medium

Group 18.png
Group 19.png

Easier navigation through the site.

Author photo

Cups of Coffee

Now Brew Memories can expand their reach globally, and Annie can support them in a way that is convenient for her.