Cafeco Page

Project Overview

As a family owned and operated business, Cafeco aims to facilitate an accessible user-friendly online purchasing experience for its customers on top of providing homemade style dishes for the neighborhood.

Aiding the User Centered approach, there were certain factors that needed to be addressed while designing the Cafeco app:

User Needs

Customizing orders (specially for allergy concerns).

Sharing favorite items with their contact list.

Smoother curbside pick up experience for the customers.

Business Needs

Designing an accessible user-friendly native mobile app.

Easy payment and ordering process.

Picture Representing User and Business needs

Credits

Duration

5 Weeks

Team

Group of 2

Role

UX/ UI Designer

Software

Figma

Miro

Photoshop

Devices

Mobile

About Cefeco

Cafeco is a mobile-first user experience that not only benefits the users by providing fresh ingredients and customizable options but also by adding the brand new curbside feature and time estimation section for the pickups. Now both regular and novice users of the café can rely on the cozy environment of Cafeco to focus and get their work done while enjoying spending their rewards and offering points on yummy beverages and fresh goodies.

Problem Statement

Time consumption for picking up the products.

Customizing technique for food concerns (vegan, allergy alerts, health factors, nutrition factors).

Keeping track of the rewards and offers within the app environment.

Process

Having responsive native mobile approach this project has been covered within three different zones: Understanding The User, Starting The Design and Refining The Design. Stages will be thoroughly covered:

Understanding User

User Research

Creating Persona

User Journey Map

Competitive Analysis

Site Map

User Research

9 individuals as research audience

67% of them were females

Among the participants 56% were employed having a full time job

Same audience preferred to spend less than 10 minutes of their time buying goods in person!

“ The primary user group was full-time working adults with a busy life style who are looking for a user-friendly straight- forward app to fulfill their purchasing needs.”

Competitive Analysis

To learn more about Cafecos’ competitors and the vital factors that could aid having a unique local cafés’ app for both loyal and novice customers, 4 café applications and their work flows were analyzed. To understand how designing a mobile-first information architecture and its features work here are some of the results:

Major Takeaways:

The only close competitor of Cafeco is Timhortons. Based on the surveys done with Timhortons’ users their online services can’t be always reliable. Cafeco is a local platform while Timhortons is a franchised Café business.

Picture Representing Competitive Analysis Cafeco

What outcomes do we want to see?

After running back to back interview and survey sessions and understanding the users, their problems and needs, we went through several hours of brainstorming on how we can respond to their concerns. These are the critical possible solutions that we came up with:

Saving time

Busy users with their hectic life-style can save time aiding an online time tracker for their purchases and an automated curbside pickup method.

Item customizability

Integrating a customized option for most of the products within a local platform satisfies novice users as well as the loyal ones.

Accessibility

Customers want to be able to share their cart items with their loved ones and make it a fun experience for their family/ friends; therefore, using the “share icon” on each product will deliver such an experience.

Less to no use of hand

In the post-COVID-19 era less to no use of hand would be ideal for customers and a user-friendly app with an easy user flow, simplified interfaces, and no restricting features and elements that don't support user needs can make this possible.

Site Map

Based on the thorough user research, I then utilized my idea of a site map and Cafeco.s’ site map was built:

Starting Design

Paper Wireframing (Low- fi)

Digital Wireframing (Mid-fi)

Usability Studies

Paper Wireframing (Low-fi)

During the wireframing session I have tried to iterate several versions for each page and based on practicality and user-friendliness narrowed down my options to the targeted designs.

Digital Wireframing (Mid-fi)

To better address the pain points and resolve challenges the customers face, the low- fidelity sketches have been translated into a digital form of mid-fidelity wireframes in Figma.

For presenting what we discovered as critical information on the Landing Page, Navigation bar and other pages and getting prepared for usability testing the grey scale of the wireframes have been used.

Through this phase, several rounds of iteration have been performed before the final content was developed.

Picture Representing Digital Wireframing

Usability Test

After conducting an unmoderated usability test among 5 participants for the Cafeco. app; there were certain pain points that caught my attention which could potentially lead to a less pleasant experience for the users, among those, below were the main key findings:

Usability Test

Cafeco.s’ iterated mock up was tested once again under an unmoderated usability test (5Ws & H) among 4 users and this time the impacts were promising!

Takeaway

Simple approach for Typography

Using one single typeface while having different fonts and sizes within pages helped users to deal with a less cluttered screen which was more user-friendly, minimalistic and at the same time created a better hierarchy and clarity within the app flow.

Real backgrounds for products in action

In order to convey the coziness and local atmosphere of Cafeco, I took advantage of having real backgrounds for each product in action. This boosted the uniqueness of Cafeco compared to franchised options!

Pop up pages

Earlier in the design, inaccurate placement of pop ups was confusing most of the users. Now, for having an easier navigation within the pages of Cafeco, I tried to engage less pop ups and only within the ordering pages to make my audience more engaged and the interactions less complicated.

Accessibility in customizing orders

Aiding choice chips with check boxes within them that can horizontally be scrolled, facilitated customizing process for ordering different products.

Common and familiar Iconography

Cafecos’ design system not only easily conveys the story but also saves in time while navigating through the application.

Digital Prototyping (High-Fi)

Within this flow, now users can:

Easily order their target items.

Navigate within the app quickly.

Benefit from various features the app is offering: a. Loyalty points b. Sharing their favorite items with their contact list c. Customizing their orders d. Checking out simple and fast

Reflection

Working on a localized product that not only has its way through loyal customers’ heart but also wants to attract more novice users, was a tricky undertaking; however, it soon escalated to revealing new ways to utilize the information and mold it into an interactive prototype.

Satisfying the urge for having a more functional local café in growing towns.

Empowering the local businesses which will simultaneously benefit the users having high quality goods in hand.

Where to go from here

Due to time constraints a number of tasks have been paused that could potentially be addressed next:

Incorporating new accessibility features for the senior users to better facilitate the delivery experience.

Continuing to bring transparency and trust to the forefront for new students who have recently moved into the town.

What I would do differently

Iterate, improve and test all over again

Looking back to the valuable feedback received from our low-fidelity prototype, I would spend more time to document different versions of our iterations and cope mindfully with unexpected changes and client expectations. In that way, I could be having a much smoother flow for show casing the iterations of the app.