Café de Leche is a local coffee shop in Highland Park, Los Angeles, CA. With the coffee business booming, stakeholders are looking to scale via e-commerce.
By redesigning the current website, Café de Leche will serve small batch, handcrafted, roasted coffee from their own local community and worldwide.
With the coffee business booming, Café de Leche owners are looking to scale via e-commerce. Thereby, commissioning me to update the current website.
While Café de Leche already has a website, it is not catered for e-commerce. I collaborated with the stakeholders to strategize design approach for the site. Further user research was also conducted, yielding ideas that caters the user’s needs and the stakeholder’s objectives.
As a UX designer, I introduced UX design thinking to stakeholders. Conducted research to the current website and assess what needed to be removed and updated. Facilitated a brainstorming session with the client to define business objectives, collect information, collaborate and strategize the design process. Using the collected information, we profiled the café’s customers and synthesized personas. I furthered the user research and created user flows to cater to the client’s objectives and the site’s primary users—the customers.
As a web designer, I created a style guide to implement the cafe’s branding into the site. Updated the entire website layout based on the client’s objectives and to cater to the two personas using the collected data in research.
Discovery—2 weeks
Ideation, Design, and Iterations— 3 months
Product Development and Usability Testing
Pen and paper, posts-it, Baymard.com, Draw.io, Sketch, Adobe Illustrator, Adobe Photoshop, Squarespace
Contextual Inquiry, Heuristic Evaluation, Competitive Research Analysis, Persona, Card Sorting, User Journey Map, Usability Testing, High-Fidelity Wireframes.
“I want the ability to sell coffee and coffee subscriptions online with a website, but also through Instagram.
The website should feature our coffee for sale, how to contact us to inquire a wholesale account, tell our traveling origin—our own origin story, and sell some merch.”
To discover, analyze and challenge the stakeholder’s assumptions.
To introduce UX design thinking to stakeholders and the company.
To understand the company’s brand identity, products and customers.
To discover the customer’s habits, pain points, and demand when shopping coffee online.
To discover what catalyze customers to engage, purchase and advocate the products
I facilitated a brainstorm session with the client to align with their vision of the website, challenge their initial assumptions, know their brand identity, products and customers, and strategize the design process going forward.
I started by assessing the client’s budget and getting to know the company and its mission statement. Then, I proceeded on gathering information about their products, brand identity, and how they sell coffee. Afterwards, we went over the current website and compared the competitors’ sites as we defined which features they liked the most and why it works.
After conducting a stakeholder interview, I interviewed two regular customers and two baristas. The questions were to gauge their knowledge of the café’s products, discover the customers’ needs, if any, to buy/subscribe coffee online, and what reasons would prevent them in doing so.
Findings suggests that local customers are not necessarily enticed to buy online due to additional cost of shipping. Coming from Ohio, Cafe owner, Matt, specifically wants to target Midwestern America due to his knowledge of the market. Majority of the e-commerce site users will be new customers living outside Highland Park and Altadena; has a willingness to pay for better quality specialty coffee, and want the convenience of getting freshly roasted coffee beans right on their doorstep.
Yesterday on my shift (8 hours), I sold at least 150 lbs., so we probably sell roughly 2,100 lbs. in a week.
I’d say more than 20 a day. Personally, I like buying a fresh cup coffee and go outside, so our cup of coffee sells more than our bags. I buy the bags to make fresh cups at home when I don’t feel like going out.
Usually, customers don’t ask us questions. I usually ask questions. haha. ‘Would you like some cream or sugar?’ But every now and then, there will be some ‘coffee nut’ who’d like to be specific with their coffee; i.e., type of roast, etc. Casual customers usually don’t ask much questions.
I want the ability to sell coffee and coffee subscriptions online with a website, but also through Instagram.
The website should feature our coffee for sale, how to contact us to inquire a wholesale account, tell our traveling origin—our own origin story, and sell some merch.
I’m kinda open to what the first thing a customer would see on our site. I'd like it to be a connection to Nicaragua (my wife is from there originally) or one of our stores.
People like buying a fresh cup coffee and go outside, so our cup of coffee sells more than our bags. Personally, I buy the bags to make fresh cups at home when I don’t feel like going out.
I’m open to buying online, but if there’s additional cost on shipping, I’d rather pick it up in-stores.
I think our customers buy from us because of the overall experience. I think our customers aren’t just buying a coffee—they go here to buy an “experience.” It’s the store ambiance, our customer service, our particular flavors and taste.
Being a literal corner café, Café de Leche is located at the corner of Avenue 50 and York Blvd—across from the newly renovated York Park and a few blocks away from Occidental College in Highland Park, CA.
Due to proximity, the majority of their general customers are Occidental College students and nearby neighborhood residence, most of which are young mothers with children coming across from the newly renovated York Park.
The café is very well-lit with different southern California plants, mid-century furnitures, bright yellow-green table tops and brick walls. Latin background music is played rather than the usual/expected Italian or jazz music. Curated local artist’s paintings are also featured on their walls. Overall, Café de Leche offers a pleasing ambiance for customers to work in or hang out.
By observing around 9 am – 11 am on a Saturday morning, approximately 40 customers got their coffee "to go" and approximately 20 people, mostly in groups, had their coffee "for here". Customers who were alone did school/work related activity, while customers who went in groups conversed the whole time while consuming their drink.
When ordering, most of the customers already know what they want, but new customers sometimes ask questions regarding the beverage, and the baristas are very knowledgeable. I also noticed baristas and owners know their usual orders and preferences—often socializing with the regulars while taking orders. This develops a strong customer loyalty within its community.
The friendly locale, Latin origin, and its hip and playful atmosphere makes up the café’s identity. And since their products will now be catered towards customers outside Highland Park and Altadena, it is important to connect with online customers the same way as they make connection within its locale—communicating what the café is all about.
The café’s tagline, “small-batch, handcrafted” promises quality and consistency to its customers. For coffee enthusiasts, roasting coffee in small batches is much preferred for two main reasons: consistency and freshness. The beans are directly sourced from farms and are roasted weekly—hand crafted and always in small batches. As the beans are packed, the bags are dated by the time of roasting to show freshness and quality.
CDL’s bags have a common label information found in a typical coffee bag. I would assume most common coffee drinkers will just take a glance at the brand name to decide if they want to make the purchase or not. Matt decoded some information in coffee labels, otherwise, most of the it went over my head. In Hindsight, by further examining the information in the label, it tells a snapshot story of the beans and help identify the subtle and not so subtle difference in quality compared to grocery store coffee.
For a “coffee snob”, they are looking for guidance: help interpreting and communicating the complex tastes and sensations they experience from good coffees. Such guidelines factors in whether they want to make the purchase or not. And to a degree, reflects the value proposition of the product.
Meanwhile, a casual coffee drinkers like me wouldn’t understand coffee lingo, and are not necessarily enticed to be educated. This null them to seeing the value of the product, unless they taste it for themselves.
So, if Café de Leche wants to sell coffee outside Los Angeles, the site must provide guidelines and simple visual aids to cater both the “coffee snobs” and the “casual coffee drinkers”.
Just like anything at the farmer’s market, coffee beans are seasonal. Thus, waning over the year. Let’s take Ethiopian coffee as an example. It’s harvested from February to June, and has about a 3-month lag between harvesting and shipping, so it won’t hit the shelves until June and runs out until October.
Since the stakeholders plans to sell coffee throughout the year on a recurring basis, it would be a problem to have customers subscribe to the same coffee bean since it will eventually run out when they’re on their low period.
The stakeholder, Matt, proposed a subscription model similar to gget.com and bluebottlecoffee.com’s, whereas the staff will pick a rotating selection of available coffee to ship. This allows customers to try a varietal selection each shipment and sell a different coffee when one wanes out. Example, if Ethiopian coffee is low in March, we can sell Guatemalan coffee in March through June, during its peak season.
Harvest Calendar from leftcoastroast.com
In contrast to Café de Leche, Starbucks is a big coffee franchise worth $30 billion —spanning across the globe with 29,000 coffee shops as of 2019.
Given the company’s scale, it would be difficult to maintain the coffee’s quality. Individuals who know coffee would agree Starbucks’ coffee is never as good as a cup of coffee from a local specialty coffee roaster. Blind taste tests also suggest the average American prefers Dunkin’ Donuts or McDonald’s coffee over Starbucks.
If this is the case, why do regular consumers think Starbucks tastes better than most coffee?
Marty Neumeier explains in his book, The Brand Gap, how we tend to base our buying choices on trust. Trust comes from meeting and beating consumer expectations.
Furthermore, according to behavioral psychologist Dan Ariely, our brain tricks us into enjoying things if we believe they are better.
Howard Shultz, Starbucks founder, spent a lot of effort in the entire coffee buying experience. Creating an Italian-like experience for consumers, Starbucks locations consistently have indirect lighting, relaxing background music, great aromas, unique coffee names and friendly baristas. The overall delightful Italian coffee buying experience is one of the consumer touch-points which outlines the Starbucks’ brand. Thereby, establishing a bias that tells the consumer’s taste buds, “Starbucks coffee is actually better.”
If Café de Leche wants to scale up to online retail, it must establish reliability and delightful buying experience to gain trust from consumers.
How Starbucks Used Perceived Value and Transformed Coffee into a $100 Billion Industry by Andy Thorne
On the stakeholder brainstorming session, the stakeholder suggested four competitor’s sites he wants to emulate.
We sorted which feature he likes the most on each site and why:
Gget.com did a good job with the “taste matrix”.
Onyxcoffeelab.com ‘s “Farm to you” story on the landing page is something we want to emulate.
Vervecoffee.com ‘s detailed farm-level stories are good.
Catandcloud.com has a wholesaler and good branding.
With the stakeholder’s preferences in mind, I familiarized myself with each element on each page. Through this process, I sketched the site’s layout and content, and furnished a feature inventory.
Based on Jakob Nielsen’s 10 Usability Heuristics for User Interface Design, Café de Leche’s site violated the following heuristics:
User control and freedom
Help users recognize, diagnose, and recover from errors
Help and documentation
Since the site is static, most Usability Heuristics didn’t apply to the site, while the violations’ severity are only considered aesthetic.
See full evaluation here:
The site have very straightforward navigation throughout. Images of farms to coffee shop shows the process of how the products were made from scratch. Although the site communicates a vivid origin story, it did not take into consideration the shop’s identity and elements which made the website feel disconnected. One telling sign is that the absence of the café’s logo. Other notable elements typically seen in a coffee shop website are also missing:
Product images
Interior images of the café
Logo and other brand attributes
Coffee Menu/Product catalog
Considering the website as a consumer touch-point, how might we give consumers an online coffee buying experience that conveys Café de Leche’s brand identity?
“By conveying a coffee buying experience similar to in-store and establishing reliability to the site’s content, we can achieve a delightful customer experience that introduces Café de Leche’s products and brand identity to customers.
We will know this to be true when customers engage, purchase, retain and advocate the site’s products.”
By collaborating with stakeholders, I introduced a UX design method to profile their customers based on who they think will buy their coffee online.
“The Coffee Snobs” are looking for guidance: help interpreting and communicating the complex tastes and sensations they experience from good coffees. While “The Casual Coffee Drinkers” are not as educated and have no interest in becoming educated, but can subtly guided to try better quality coffees.
Basketball Jones
Basketball Jones aims to create social connections through the sport of basketball
The Wallet Project
“The Wallet Project” is the secure wallet: a solution for people who always lose their wallets unattended.
