Cafe Béllo is a coffee application that came to life due to a real-world experience. During a class session, one member of the course commented on the experience she encountered while ordering coffee. It was asked for suggestions on improvement, and I gave my thoughts. As the course moved forward, I kept my suggestions in mind and thought about expanding that as my chosen final project.
‍
I want to focus on the improvement of the waiting process when users order their coffee or any items at a coffee shop. As users wait for their orders, in some instances, there can be misunderstanding or confusion when knowing whose order is for if there is an overflow of customers in the lobby or if there is an overflow of orders being called out. In some cases, there can be a mix-up among orders whose customers have the same name.

From the observation, a real-world problem was heard, analyzed, and considered into a scan where we saw the wrongs and thought of the better.

During the Competitive Analysis research phase, we looked at 4 mobile competitors as well as one website local coffee service provider to discover what they offer to users and demonstrate in a sheet the comparisons of the designs. The platforms from Starbucks, Dunkin’ Donuts, UberEats, Joe Coffee, and Joe’s Fine Coffee website and/or mobile application were criticized and examined in 9 categories. The platform that seems to center on its members is Starbucks and Uber Eats while the others allow guest orders. This is critical information because we can see how personal orders can be in current platforms and observe whether there are more problems from the platforms that offer guest orders versus the platforms that don’t allow guest orders.

After the research of Competitive Analysis, I looked at how the organization was structured in popular applications like Starbucks and Dunkin’ Donuts and came up with my chosen organization of the coffee application from the Card Sorting research method. I was inspired to use similar key terms and items that were listed in their mobile applications because users are most likely comfortable with such categories.

Besides my own perspective on what the categories should look like, I wanted to gather data outside and went with conducting a closed Card Sorting research method. Participants would match key terms in categories while I observe the organization. In these groups, the participants were able to add any key term into the category that best describes where it would be in. Participants could duplicate and add key terms in multiple areas.

With the availability of 4 participants, ages ranging from 15 to 25 averaging the activity lasted about 2 to 5 minutes.

Once the user flow has been established, we move toward structuring the rest of the application and organizing it so that there is clarity.Starting from the top we have the Welcome Screen with the transition to the Homepage where we can walk to different tabs and areas of the application. The navigation tabs include Homepage, Menu, Location, and Setting. The menu tab has the most navigation with 8 possible routes based on the categories listed. There are bold lines to indicate how the user flow is applied in the Informational Architecture.

With all the research data, how can we transition from what was observed and think about what a real-world scenario looks like? Centered on the user flow, a storyboard of a scenario was produced to demonstrate how the interaction from the app to the store will look as well as display where the experience is improved. In this storyboard, we used a persona named Steve and positioned him as an intern who is getting coffee for the team that he is part of in the storyboard illustration.

With all the research completed, we move to the sketching phase and place down ideas that would seem fit. The sketches that were drawn out focus on the steps that the user flow was written. While sketching, we thought of questions like how the user is receiving specific information to identify their order. How is the interaction after ordering? How do users know when their order is finishing up and set to be given? With these in mind, we came up with solutions on how and what type of information will be delivered.

We began with the Homepage and flowed through with annotations and titles to indicate which sketch is for its corresponding screen. The elements that were brought up in the improvement after ordering include the personalized order number, process bar with a percentage with stages from the start to end process, and time estimation on the delivery of the order.

At the Low-Fidelity stage, I wanted to duplicate what was sketched out in the digital to be ready to move into the Mid-Fidelity stage.

At the Mid-Fidelity stage, we implement text, buttons, and icons. Text for titles and for paragraphs are placed over the indicated location. Buttons and Icons have been placed to visually represent what box is for from the annotations in the sketching stage.

In the sketches, there was a Filter feature on the Homepage but was later removed because there seem to be no purpose in having a Filter feature on the main page of the application.

At the High-Fidelity stage, the imagery was placed, and color to the cards, the navigation tab, and buttons, written content in the text sections, and made the rest of the elements look aesthetically pleasing. 

Although the process of ordering may be like other platforms, the focus was on the experience.From the questions in the sketching stage, I believe that the solutions of the personalized order number, process bar with the inclusion of stages from start to end, and time estimation of delivery will provide an improved experience for the user.

Due to the time constraint, I was unable to progress on the idea of having a screen that showcases the order number and the name of the user. Like the display on the mobile application, the screen will also have the same information but for in-store. This is an area for experimentation and research to learn how to make the design valuable as well as interactive with the information that is given from the mobile interface.

Another future idea to consider was the inclusion of display boxes for the orders. While orders are arriving and the user hasn’t arrived, the order can be stored in the boxes so that when the user arrives it can pick it up through that flow. Users can gain access to their order by scanning a QR code or by a given code in the order receipt/notification.

Working on this project was a great experience based on the outcomes and the process that I went through. This was my first project working on everything from the discovery, the research, and the designs. There were times in which I felt overwhelmed because of other projects but regardless this was an experience in which I learned more about my capability and what I can produce as an individual. There were many paths that I wanted to go toward and many ideas to pursue for the improving experience. 

I am happy with the outcomes that came forth for Cafe Béllo and it stands as a potential solution for a real-world problem.