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
My first question was;
"What does a small coffee shop in Brooklyn have to offer a potentially global audience; why expand your reach?"
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
A successful online presence for a small business owner should show their:
Dedication to their craft
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?
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.
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.
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
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.
This makes giving unique links to individual articles impossible.
So I started my competitive analysis.
By utilizing design trends, I could build on users existing mental models.
Chunking is used by breaking up large walls of text. Designers do this with images, block quotes, and short paragraphs limited to 3 sentences.
Structuring the IG preview
I began by testing these two designs.
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
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.
Then I began researching the responsive design for mobile.
The typical responsive design had larger photos, and was formatted similarly to the blog page.
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)
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.
Then I tested my second idea.
Build a standard mobile responsive design but feature the "Find articles you saw on instagram" section first.
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.
See article preview on IG
Share article preview on IG story
Test out some of the design changes I've made
Continue to iterate
Read times are a component used on platforms like Medium
Easier navigation through the site.