Social Coffee

“Coffee first. Schemes later.” Leanna Renee Hieber


Coffee in office is daily sometimes hourly routine for many. Along with cliché greetings and small talks, it involves sometimes waiting time and limited taste. I propose the question: how might we we improve the office coffee experience?

Add fun or inspiration?

Render a new channel to social bonding with colleagues?

Create personalization or even community



In a medium large corporate office building, there are two 30 sqm coffee rooms with giant Franke coffee machine with fancy huge displays. The room equipped with water fountain, soda stream, fridges, as well as 10 people table. In German, there’s name for it Kaffeeküche (Coffee kitchen). 

After a couple of chats with my colleagues, I figured out several pain points

  • Morning rush hour, people have to wait in line for picking coffee.
  • There are not so many variation provided in the machine.


Here is my approach:

  • Briefing & brainstorming
  • Moodboard & quick competitor analysis
  • Paper prototyping & sketching ideas
  • Quick & dirty user testi
  • Prioritize ideas in impact/effort matrix
  • Pick 3 features and dig down
  • Wireframing & Prototyping
  • Solution based on the main assumption

Briefing, sketching, analyzing, and brainstorming

Paper sketching and mockup

image 3

Customer journey map based on 3 archetypes

Screenshot 2019-01-06 at 11.09.47.jpg

Crazy8 brainstorming variation & solutions

Synthesize ideas and position on the map



image 8

After the evaluation, I pick 3 features and think in details

Feature 1 Coffee activities

  • A web app that everyone can log in in different devices
  • RFID for login just like the shared printer
  • Group diagram to display each type of coffee you drink
  • Adjustable view range
  • The pie chart on different types
  • Data will be used for algorithm-based recommendation
  • Proving the health tips


Feature 2 Coffee Mixer

  • Preset and additions
  • Intuitive visual selector and mixer
  • Drag & drop and ready to adjust
  • Advance options available
  • Creative tools for creating latte art
coffe selection

Fully customizable coffee setup, visual representation, drag & drop additions

latte art

Create personal latte art as you wish (great for company/personal event)


Feature 3 Community coffee

  • Swimming lane UI pattern showing different relevant categories
  • Ranking lists displaying the popular drink in the company
  • Match improve the colleague communication and socialization
  • You can create your own lists

community coffee

Prototype link  (Registration required)


High-fidelity Prototype


Top listTastematchHitoryMake Coffee


Frame 2