The Blue cup of coffee

The Blue cup of coffee is a new start-up Coffee Shop born in the City of London. The owner is a 55 years old Italian Barista with more than 30 years of experience in the Naples hospitality industry. The client, with his first attempt in the English business market, asked for ideas, strategies and research for a mobile app for coffee ordering. An app enables to connect his shop with offices and professionals in the area.

UI design system

The logo design follows the millennial-style and it was designed by me. The client wanted me to adopt a minimalistic approach with the use of a handwriting typeface: Nanum Brush Script. When I designed the app I have decided to keep this typeface just for name sections in order to be consistent with the logo but I have used Ubuntu as main typeface throughout the app as the app needed a clean accessible typeface. Ubuntu has those characteristics and it looks contemporary. I have used a system where you have 4 different sizes: 12px, 16px, 20px, 24px all of them with 2 options: regular and bold weight.

'User must move' approach

After the research and analysis concluded, we focused on designing all the screens through ‘the user must move’. We created the visual elements and their interactive properties through the use of patterns, spacing and colours to guide the user most quickly. Buttons are easy to recognise and always in the same position to make orders quicker and systematic.

Animations and illustrations

In order to give an happy look-and-feel to the app I thought I could designed animated gifs using After Effects:

Prototype

The final prototype was able to cater to the needs of the client and users. Figures and testing have shown excellent feedback on time-saving with consequently increased customer loyalty:

The challenge:

The challenge was more than just developing an app for coffee ordering and collecting. In a nutshell, the difficulties of the project showed:

Propose a strategy suitable for the competitiveness of the City of London

Building the fastest coffee ordering solution with user-friendly characteristics

Delivering a quality product-idea within a very limited budget

Developing the app from scratch with limited technology and local marketing understanding, shared by the client

The team:

This project was carried out by the UI/UX and digital designer Gennaro Draisci and Selene Grandi, marketing expert and UX designer. The team worked together on users interviews, surveys, analysis, ideas, sketching, and testing. While Selene was focusing on the strategy and usability, Gennaro led the project from accessibility and visual interface.

The research: Competitive analysis and survey

The process started with a survey and competitors research. Although there are thousands of apps to order coffee, we decided to analyse two of the top competitors: Starbucks and Costa. For the survey, we decided to interview City professionals, especially commuters.

Costa ordering app - Pain points

  • Content amount and customizability
    Much better compared to Starbucks app, but still with too much choice and content. Difficulty to finish a task quick.

  • Usability and accessibility
    The app is no user-friendly especially for people with disabilities. The information architecture is complex and unclear. The dashboard has too many sections. You can find the order section scrolling.. Setting side is dispersive and not functional.

  • Payment method
    Debit/credit card option.

Starbucks mobile app - Pain points

  • Content amount
    Displaying all nutrition information results in content overload

  • Customizability
    Too many options and no step-by-step walk through helping user to build the drink. Overload. No rapid choice.

  • Lack of usability/accessibility
    App ot friendly for beginner coffee drinkers and people with disabilities. The experience is overwhelming. Hierachy of information is fairly complex and user must scroll too much to read everything.

  • Payment method
    In store or topping up a digital card. No debit/credit card. Difficult to understand it.

The problems:

The research and interviews that we carried out, outlined the following insights:

People want quick access to an order and hot drink list. They don't want to lose time scrolling or reading non-essential information

People in the City of London work in a fast-paced environment, so drinks need to be ready to collect on time

Although ordering coffee fast is the priority, people need to feel a welcome “good morning”

Target and user persona

The combination of interviews and secondary research aimed to identify one main potential user. The focus was on-the-go and time-poor millennial professionals who work in central London. To gain a clear picture of whom we were designing for, we made a representation of our target audience.

To further visualise and capture the entire experience, the picture below presents the storyboard of how Charles would buy a coffee by using the mobile app while he is in the office.

After presenting the storyboard of the User Persona, I sketched a basic user flow (Happy Path) to simulate the same scenario (see figure below).

The strategy and problem solving:

Through the analysis and the comparison of other apps and surveys, which comprise of errors and results, the team was able to identify the strategy, the user's needs, and the main features to implement the app.

Therefore, based on previous research, we tried to address the problems mentioned above with the following solutions:

The app must be intuitive and have clean features that allow completing tasks in a few seconds. The app needs to balance contents and information architecture to avoid overloading, including some customisable tasks

The app has to make possible to choose a collection time

The app should create a sort of digital customer service, with a warm welcome message and modern illustrations.

As a result, the app we proposed to the client needed to follow the “grab and go” coffee shop concept as well as being minimalist and purely functional. However, research and figures based on previous experience showed that people want to solve problems and feel the aesthetic satisfaction in using apps. For this reason, we proposed to the client a full re-branding of the company through a refreshed logo much closer to the style of the City a new slogan, and an upgraded social media channel to promote the business and the app. The purpose of “The Blue cup of coffee” appeared to be a new point of connection between fresh quality and fast coffee, and professionals in the area.

Sketch and wireframe:

Before the visual design and content, we created a low-fi paper and a site mappresenting the information architecture of the future layout.

Testing:

The research and interviews that we carried out, outlined the following insights:

Non-user

Casual user

Heavy user of food ordering

For all the tasks: Sign-in, choose the drink, and pay the completion rate ware 95%, with just one failed task by participant number 1. As a non-familiar user app, he struggled to put a product on cart.