Cropster Cafe

Cropster Cafe is a B2B browser application that can improve and share brewing standards, track coffee quality, plus manage cafe-related tasks across locations, staff and equipment.

Cropster Cafe
Role Icon

My Role

  • Lead UX Designer
Team icon

The Team

  • 1 x UX Designer
  • 1 x PM
Contribution icon

My Contribution

  • Competitor analysis
  • User interviews and surveys
  • User journey mapping
  • User stories
  • Information architecture, card sorting
  • Wireframing and prototyping
  • Mobile-first Design System creation
  • UI design
  • User testing (remote + on site)
Tools Icon

Tools Used

  • Sketch + InVision
  • Figma
  • Whimsical
Project span icon

Project Span

  • Jan 2019 - Apr 2021
  • 1.5 years

Process

Arrow
Research icon

Research

  • Conceptual Research
  • Competitor analysis
  • User survey
  • User interviews
Define icon

Define

  • Journey mapping
  • User stories
  • Feature prioritization
  • Card sorting / IA
Ideate icon

Ideate

  • Wireframing
Build icon

Build

  • Prototyping
Verify icon

Verify

  • Usability testing
  • (remote and on-site)

Problem

Speciality coffee cafes have a difficult time providing consistently brewed coffee across various locations and staff.

The way most cafes at the moment keep track of their recipes, brew parameters, tasks, consistency, and maintain brew equipment is done through pen and paper or a spreadsheet. This is very limiting when it comes to sharing recipes and brewing consistently across multiple cafe locations and all members of staff. This is also confining when it comes to training new staff within an industry with a high turnover in staff.

Since Cropster already helps coffee roasteries, farms, and labs with consistency, traceability, and quality control, developing a software solution for cafes was the natural next step toward completing the company's mission of benefitting everyone in the coffee supply chain.

Solution

A software solution that enables cafes to improve and share brewing standards, track coffee quality, and manage tasks.

The focus with Cropster Cafe was to create a digital solution that would seamlessly fit into the quick work-pace of the cafe manager as well as the barista. An added benefit of Cropster Cafe software solution is the traceability aspect. Through the Cropster software, the coffee a customer is sipping at your cafe can be traced back to the specific roasts, green coffees, and farms where the cup of coffee originated from.

Some of the project deliverables were brew recipe creation and management, brew quality reporting, staff and equipment-related task management, and cafe user onboarding. The solution was built into the existing Cropster browser application, thus dealing with some technical and conceptual limitations of a legacy system.

Early stages and research

Together with the product manager, based on surveys and interviews done with the end-users, we defined user stories and user journeys for the initial MVP. While doing so we also concluded 2 main personas that our software would target: the Cafe manager and the Barista.

The research also showed that the software has to be mobile-first and fit into an existing (Cropster) browser application that so far has had a desktop-first approach when it comes to design. This meant redesigning many of the existing components in the Cropster Design System.

Example of Cafe Manager persona
Example of Cafe Manager persona

Research findings

Mobile-first approach with drawbacks

We learned that most cafe staff has a personal phone they would be able to use for our software. Some cafes also had a tablet that was already used for the point of sale, which also could accommodate Cropster Cafe. This meant we need to shift our browser-app focus to mobile-first.

Baristas on the phone is a no-no

While baristas all had personal phones they could use (in addition to the cafe's tablet device) for our application, many cafe managers said that seeing baristas on their phones behind the bar is a 'bad look' for the cafe, and should be avoided.

Smaller cafes don't need the Cropster Cafe

Many smaller speciality cafes said they don't see the need to use our tool, as the cafe staff is just a couple of people, who are actively communicating with each other via Whatsapp. We decided to focus on larger cafes with more locations (at least 3).

Timely notifications are key

When there is a change to a brew recipe by e.g. the cafe manager, the baristas want to get notified immediately via our application, so they can adjust their brewing. A native application could offer this functionality quite easily, while a browser-based app is very limited. We also learned about other limitations with interactions within the browser.

As a next step, I created Lo-Fi wireframes and prototypes that we could use for field testing. Throughout this step, development was also included for consulting purposes. Afterward, we headed out to specialty coffee cafes all over Vienna, where we tested our initial prototype and solution with tens of baristas and cafe managers. With their feedback, the pain points in our initial solution were clear. I modified the designs and tested them again. Through this process, we were able to create the first live MVP of Cropster Cafe.

Early wireframes for Cropster Cafe
Early wireframes for Cropster Cafe

Design deliverables and iterations

In the building phase, I created high-fidelity prototypes and worked continuously with development to implement the designs. I also had regular calls with cafes that matched our target audience where I was able to validate our concepts. As I worked on this project for over a year, I focused on continuous discovery habits to constantly better our application.

A selection of mobile screens from the Cafe application.
A selection of mobile screens from the Cafe application.

Learnings

Everything about cafes

I learned so much about the ins and outs of cafes of different sizes. The tasks, needs and, challenges that the baristas and cafe managers are facing on a day-to-day basis, when it comes to brewing the perfect cup of coffee, consistently.

No success without analytics

Without analytics, there is no way of measuring your success or shortcomings. During the implementation phases of Cropster Cafe, the analytics software from our application platform was removed. Unfortunately, it also did not get replaced with another system. This was the cause of a lot of challenges, misunderstandings, and the inability to measure the success or shortcomings of the new features we are implementing.

Only validated assumptions

To do user-centric design, we need to continuously validate our assumptions and talk to our users - they always tell us what we don't know and how can we meet their expectations.

Shortcomings of a browser application

I learned a lot about the limitations that come with having an in-browser application, as opposed to having a native application. For e.g., having a "long press" gesture in a browser application cannot be customized and will take on the functionality of the browser, rather than your application.

Legacy application limitations

When developing a new product, that has a mobile-first approach into a desktop-first application, we needed to rework a lot of existing components in the design system to make it work for mobile. For example, large data-heavy tables we use throughout the application, that we needed to optimize for mobile screens.

Where would you like to go from here?