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.
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.
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.
In order to give an happy look-and-feel to the app I thought I could designed animated gifs using After Effects:
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 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
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 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
Starbucks mobile app - Pain points
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”
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).
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.
Before the visual design and content, we created a low-fi paper and a site mappresenting the information architecture of the future layout.
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.
