California Coffee Collective: Understanding User Experience

Miami-Florida-E-Commerce-Branding-Blog

Objective

California Coffee Collective wants to persuade people ages 25-35 that that they should buy California Coffee Collective. People in this age group should not waste their time drinking bad coffee, they have lives to live and they work hard. They should be able to enjoy their coffee. The goal is to raise product awareness and increase sales. An ideal growth would be to see an increase in sales by 10% and an increase in brand awareness by 15%.

The audience

The target audience for this ad is a classic man (or woman) living the daily grind. They work hard, they play hard, they family hard. They are in the upper middle class with a high-paying job (more than 60,000/yr). This consumer has a new family. They’re tired. They’ve been up late helping with kids and then up early to go to work. They’ve been doing this for over a year now, so the novelty of having a kid has worn off. This demographic has more disposable income to spend on coffee. They work in a higher paying job, a middle management situation.
 
They have most likely consumed C.C.C. before, but didn’t realize it or they enjoyed it but never moved to order a bag. This consumer lives in a highly populated area with a lot of traffic. Somewhere like the Raleigh/Durham area. It is aimed at people on their way to work who are tired and sitting in traffic. This consumer is tired. They’re probably drinking gross coffee driving into work. They’re probably sitting reading a magazine while drinking coffee at a local restaurant.
This ad will appear on a billboard on a major highway (64, 440, 540, 264, etc). This ad will also appear in “Raleigh” magazine (available at most restaurants). It will also appear on Instagram.
 
These choices are cost-effective because they will get the most eyes. A billboard on a major highway might be a bit of an investment, but the amount of eyes that will see it will be worth it. Roughly half a million people see those billboard ads every day.  Raleigh magazine is all about celebrating local companies, so they would be happy to include a C.C.C. ad. The cost is less than that of a billboard and is a great alternative to the billboard, if funding is tight (but I would prioritize the billboard over the magazine ad). The Instagram ad is by far the most affordable option. If it is posted at peak instagram media consumption (mornings when consumers wake up, lunch breaks, and early evenings) then it would be even more successful because these times coincide with coffee consumption/making (people drink coffee in the morning, have a pick me up at lunch time, and some people set up to make their coffee the night before to have it ready in the morning with a timer).

Needs Assessment

I start all web design projects out even before I meet with the client with just a basic plan. I like to call this the needs assessment. It lets me list off everything they might need on their website. It also gives me room to consider what appears on the competitions website and what appears on totally unrelated sites that might be supportive of my client’s design. I do this by hand to keep it loose and let me annotate and keep it loose.

THE WEB Map

Once I have a decent idea of what this site needs and the priorities figured out, I start developing a more firmed up web map. This is when I typically jump into Adobe Illustrator of XD and start really laying things out. A web map needs to show every page a site needs to have. I really love to think of a web map as a living document that I can keep editing as I work on the site and as the clients needs change. My end goal for this web map is to be able to hand it off to a web developer as they develop the site and to hand it off to the client so they are able to reference it in the future for any changes. Forever the designer, I love to add color and branding to this web map. It makes following paths more comfortable and keeps the brand present as we continue to design and develop.

The Plan: Sketches & Wireframes

Sketches

Now that I have a web map in order, I start sketching wireframes. I love using markers that can show grey scale values…this allows me to establish a bit of hierarchy and show background images. I like to wireframe the most important pages first. As I start wireframing I do a mini needs assessment for each page as well. Constantly I am reminding myself to keep the needs of the user and the goal of the design as a priority. Here are a few of my favorite low-fidelity wireframes for this site.

Wireframes

Once I have a great grasp of the layout and hierarchy for these sites, I once again go digital and hop into Adobe XD (or Invision) and start playing with pixels. I love using CC Libraries at this stage. I have a few libraries set up that contain UI elements that I can quickly grab. At this point, I also set up a library for this specific company and place any needed or recently created graphics into it for easy access. I’m currently still working on my mid-fidelity wireframes for this project, but I wanted to share a few with you. I try to do one per page and I love to actually plug everything in to prototype when I am done. This lets me check for any gaps in my logic and flow.

Final Design

Want Dote to Help You With Something Like This?

Let’s set up a chat and get started on your target audience assessment, brand strategy, brand/re-brand, and web project!

Like what you read? Give it a share!

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Out More Of Our Posts

Start Today

I’ve heard “success doesn’t happen overnight” a million times. And it’s so true. But, I feel like it’s missing a few words: “Success doesn’t happen overnight, so start today”. If you’re looking for a sign that it’s time to start your business, this is it!

Read More »