Educate and Help Users in Choosing Best Groceries with CekCok — An UI / UX Case Study
In this case study, I will recount the creation process of CekCok, a food quality checker application.
It was started when my mother asked me to buy her some food for my grandmother. Meat, vegetable, egg, and other items. I’m not the type of person who frequently buy groceries.
In the midst of confusion at the supermarket, I tried to find a way to know information about food immediately. I ended up spending around 15–30 minutes on my smartphone, searching for information. I looked everywhere, from the top recommendations in search engine to dubious blog sites. You could predict the rest of this story.
I decided to ask the seller about freshness and expiration date.
“Sir, is this egg still fresh?”
“This one is still fresh, you can keep it for a week”
Feeling relieved, i took the egg happily. But too bad, after 3 days i stored in freezer, the egg’s yolk is thicken indicate that the eggs are not in primary condition.
From the experience, I was surprised because it turns out that sellers also do not necessarily know the quality of the goods they are selling.
At that moment I felt there was no media/application that could provide information about food quality with strong data validation.
That was the worst shopping experience I ever felt,
also the moment I decided to create CekCok application.
“Did you ever go through the same experience?”
Therefore, from my experience I made 3 simple hypotheses:
1. My knowledge of food quality is lacking
2. Interest on food quality from the public is low.
3. There is lack of media that educates public on food quality with valid data.
notes: there are some researchs using Indonesian languange
Motivated by curiosity, I started by finding out how difficult it is to find information on the quality of food through interviews with several people.
Turned out half of interviewee are still using their own feelings as their standard to pick quality of the groceries with reasons. Most common answer is uninformed about choosing quality of groceries followed with second common answer, the source and information of groceries are very limited. (source)
From the interview, i found that the lack of information about quality of the groceries has an impact towards buyer’s behavior and experiences. Then, lack of education formed an ignorant behavior to society about importance of choosing best quality groceries.
That statement supported with result of a study conducted by Ministry of Environment and Forestry in 2012 shows that Indeks Perilaku Peduli Lingkungan (IPPL), which covers uninterested on food quality, is still 0,43 out of absolute number of 1. This number indicates that interest on the environment from the public is low in their daily lives. (source)
Those findings are also supported with evaluation by Poltekkes Kemenkes Jogja that ignorance from society include on food quality caused by many factors which are education, information/mass media, social-culture-economy, current environment, experiences, and age.
These factors will be basis for my demo-graphical research. (source)
The ignorance also affect health matters, according to WHO (2002), one third of population in developed countries suffer from food poisoning every year because their food quality is bad. This condition is more PREVALENT in developing countries. (source)
Therefore, the society’s ignorance to the importance of food quality makes Indonesia at the bottom of the ranking. According to a survey conducted by OXFAM, Indonesia is placed on 83th out of 132 countries on its food quality, with 1st place is for the country with best food quality. (source)
Besides health matters, buyers and sellers with minimal information and education regarding the quality of groceries also have the potential to become actors of Food Waste and Food Loss. According to data from Economist Intelligence Unit (EIU), Indonesia is on second place in Food Waste and Food Loss list, after Saudi Arabia. (source)
Crazy, right?
Food quality has that much effect and all my hypotheses are answered with facts above.
What is the solution, then?
According to EIU, the solution that can be taken is to provide education to both producers and consumers. They must receive education to difference the quality of the food items to be purchased and on how to store their products properly to avoid premature expiration or. Consumers should also be aware of the need to prevent food waste and food waste.
This was supported by the Poltekkes Kemenkes Jogja, they recommended to make outreach in each area through visual media that provided information to the surrounding community. In this case, Poltekkes Kemenkes Jogja uses posters posted in certain areas / places as the media.
I think in this fast paced era, almost all Indonesians have smart devices and are actively wearing them. According to research conducted by We Are Social Hootsuite, as of Jan 2020, smart device users in Indonesia were 338.2 million out of a total population of 272.1 million and internet users as many as 175.4 million. (source)
Hearing this massive number, it is difficult to educate the public using media such as posters to educate the large number of users in Indonesia. Given the limited resources and the amount of expenditure that is certainly not small to do all of that, I think that a more modern and massive media is needed as a solution.
One of the solutions I offer is knowledge or education through applications.
I hope that CekCok application can be a source of education as well as a helpful solution for people who are still unfamiliar with the importance of food quality. I also hope that CekCok will be able to reduce the number of Food Waste and have a positive influence to care more about the environment.
Based on the information above,
I did validation through an attitudinal qualitative research by interviewing users to observe behavior of participants when facing problem or difficulty and find out their expectation.
First thing first, i prepare a rundown in this case study as deadline and schedule from start to end. Here are the processes:
I prepared an interview guideline with relevant questions. Result of the interview will produce a finding or pattern, which was processed into basis of my case study.
To see information that I found through interview in more detail, please refer to this link.
Here are the summaries of what I found through user-interviews:
- Participants in the interviews ranged in age from 21 to 47 years. The minority of participants still shop at traditional markets, the rest prefer to go to supermarkets. Half of the participants have had an online shopping experience.
- All participants are happy to be able to buy food directly because they can ensure its quality
- Half of the participants have no online shopping experience because they do not believe in the quality of food when purchased online. However, the remaining half of the participants who had shopped online felt helped by e-commerce applications because of the promos that made prices cheaper, free delivery, and the convenience of user-friendly applications.
- All participants agreed that the quality of food purchased directly / offline store was better and fresher
- Half of the participants will immediately throw away food if it does not meet food quality standards, the rest still want to process it because they do not want to waste food
- All participants felt able to assess the quality of food, half of whom studied independently or with the help of other parties such as parents or friends. Meanwhile, the rest use their own feelings as a reference. But in some cases of participants and observations, their intuition and learning were not fully validated / proven properly because the results of the interviews still showed that participants still had bad experiences in choosing the quality of food
- The majority of participants are interested in applications or programs that help assess the quality of foodstuffs to prevent buying poor quality food items
- Participants suggest a user-friendly application as well as additional information on the best way to store food ingredients and recipes that can be used from foods that have just been purchased
Conclusion:
The CekCok application will be prioritized for people who like to shop offline
“I think my feeling is quite helpful in determining food quality”
“I usually throw away bad quality produce even though it can still be processed. It’s not healthy”
“I think young generation in this age is ignorant and uninformed about food quality. This is very insightful.”
“Quality of product purchased online is not guaranteed.”
CEKCOK INTRODUCTION
CekCok is an application designed to help identifying and educating users on the quality of groceries (food or drinks). This application is expected to help users, especially for those who are uninformed or use food for their daily needs.
Cek-Cok stands for two words, namely “Cek” (check) and “Cocok” (to match), which are shortened into Cek-Cok. The simple philosophy is to check items with good quality standards until the user feels that the item that they want to buy matches their need, thus creating a feeling of satisfaction and a pleasant experience for the user.
If you would like to read further about CekCok, click here.
Market & Opportunity Research
Because CekCok is a new application, I think additional research is needed to gain information about the market for this application. This research is intended and conducted to find illustration and interest of potential users.
I conducted quantitative research using online survey (Google Questinnaire).
I prepared a questionnaire with relevant questions.
Result of the survey will give information in form of numbers which I used as basis in developing CekCok.
To see the result of questionnaire I made, refer to this link.
Here is the summary of information I found through survey:
- The number of participants I used as data of the latest survey is 50 people (9 July 2020). Their age is ranged from 17 years to above 35 years old. Survey was distributed on various platforms such as social media, community or group, even direct offer. People with any background could participate in this survey.
• 96% of participants prefer to buy food offline than online.
Opportunity:
CekCok would be used frequently because 96% of participants still buy their groceries directly (offline).
- 70.6% of participants obtain information about food from other source (such as family, friends or courses), followed by self-learning and personal instinct.
Opportunity:
The number of media that provides user information and educates them with accurate data validation is still very low.
- Only 7.8% (from scale of 1–7, with 1 is very uninformed and 7 is very informed) of participants think that they are very informed in choosing food with good quality (scale 6 and 7); the majority of participants, 39.2%, are still on scale 5.
Opportunity:
People need education and more information about food quality.
• 70.6% of participants have experience in buying food with bad quality.
Opportunity:
CekCok is an app that helps user to avoid this situation by helping them ensure that the product they are going to buy has the best quality.
- 50% of participants immediately throw away food that they think is bad, 35% of participants will process it so it won’t go to wast, and the rest of participants have not experienced this situation.
Opportunity:
Throwing away food that are allegedly has gone bad is an inconvenience for user, which is a form of Food Waste. CekCok provide users information, identification and ways to store food to reduce food waste.
- 51% of participants want a media or application that helps in identifying food, while the rest are not interested in this application.
Opportunity:
CekCok can fulfill the needs of customers and as a medium and solution for the problems above.
Discoveries from Research! (From User Interview & Survey)
What did I get from all these researches?
This is just additional research results to validate from user interviews and surveys. Finding middle ground between them and sorting it out to validate the truth and get to know how serious the problems are or to see how big the opportunity CekCok could take.
If you want to read about it further, please refer to this link.
Here is the summary of information I discovered:
Indication of Potential Target Market
Age range with highest potential as main market target of CekCok is between 17 and 35 years old or millennial group. This group has highest relevancy of similar problem, is willing and started to be aware of self-education, and has the highest potential user for CekCok application.
Majority of users with age above 35 years old do not feel the need to use CekCok application due to various reasons. The most common reasons are they feel confident in their ability to choose produce and they feel lazy to use application (inconvenient).
Purposes
CekCok will be prioritized for users who shop directly (offline store) so they can compare and see the quality of groceries sold on the spot.
Business Model Canvas (BMC)
In the research stage, I felt that Business Model Canvas is the most important element as business basis.
BMC is a plan and items need to be prepared when CekCok is officially released.
BMC also gives illustrations to stakeholder about the ins and outs of its business section, starting from its potential target, how to maintain relation with market target, the main value that will be sold from CekCok, and how CekCok can survive or earn income.
How does CekCok survive or earn income? If you are interested in finding out further, click here.
Competitive Analysis
Affinity Map
After doing user-interview, survey, competitive analysis, and BMC, i summarized every findings from participants into 2 main categories which are:
- Most Mentioned (what users thinking out loud)
- Most Influential (what affect users)
I put all of those findings into a quadrant as you can see below:
Personas & Empathy Map
After researching the potential user target, requirement and difficulty, I then processed these data into three personas. In here you can see their behavior, needs and goals.
Let’s meet them.
Let me introduce you to:
1. Devina Anastasia
A 28 years old housewife who really likes cooking, especially international dishes. Unfortunately, she finds it difficult to find ingredients of dishes she wants to cook.
To understand more about Devina, I have to find out more about her. Therefore, I created an Empathy map that has information about her behavior and attitude so I can find out more about her.
2. Rayhan Dio
24-year-old designer in a startup company who lives in co-living apartment and is learning to cook by himself to maintain healthy lifestyle (and saves up money)
To understand more about Rayhan, I have to find out more about him. Therefore, I created an Empathy map that has information about her behavior and attitude so I can find out more about him.
3. Aslika Putridwi
A 35 years old career woman and a mother who is currently working as Product Manager in an IT company. She has pretty tight schedule, which overwhelms her in doing her role as housewife.
To understand more about Aslika, I have to find out more about her. Therefore, I created an Empathy map that has information about her behavior and attitude so I can find out more about her.
User Story, IA, dan Customer Journey Map
Paper sketch
All process above were made through sketches on paper. Here are one of the examples:
Design sketch
Brainstorming to create design is very exciting. In here I was responsible in creating basic sketch of any design that will be used as asset in CekCok application. From sketches of homepage, logo, icon, and additional visual elements such as illustration and 3D assets.
In the logo and icon creation process, I asked Debi Natalia to be my work partner, who made her contribution to this project by creating vector of every logo and icon that I have sketched. 3D and UI asset creation were my responsibility.
If you are interested in seeing all landing page sketches that I made, please click here (This is my favorite part)
Prototype
Low Fidelity UT
After completing all pages through sketches, I made on paper and were satisfied enough with the result, I immediately ran early prototype, which was also my first UT.
In Low Fidelity UT I was focused on finding out if the tester had difficulty in running ‘task’ and recording received information or suggestions.
I had prepared an UT guideline. This guideline was useful for me. It would become UT organizer and give ‘task’ to tester. This participant is chosen based on their similarity with created personas.
Users Quotes & Feedback
Here are some statements made by several testers:
“I thought application with this theme will be difficult to use, I was wrong”
“This is my first try but I think I can access the features here”
I also received many critiques and suggestions from users on the Low Fidelty UT for CekCok development.
Here are the critiques and suggestions given by several testers:
“I think all main features on the menu should be put on the center so user does not have to keep swiping.”
“The Tap to Start instruction does not help much because usually we will prefer to tap picture than text”
“Listing and reminder features should be separated because they have different functions”
From the given UT, all participants didn’t face any difficulty when doing tasks that I gave.
To see further details on opinion, suggestion, and critique from tester from result of this Low Fidelity UT, please click here.
Design Iteration 01
I summarized the result of feedback and fixed what can be developed from the prototype on paper, I also transform the prototype on paper into digital form with Figma to test the prototype with features of a real app.
If you would like to see the entirety of low fidelity prototype, click here.
After applying all feedback above, I retested the app to see the improvements on CekCok. I used the same method as before but I used different testers.
This is the result after I did another UT; I made a UT scoreboard. This scoreboard acts as an indication whether tester is able to use CekCok application intuitively to fill their task through total score.
The higher the score, the easier the app to use.
The table and detailed information can be seen below
Users Quotes & Feedback Iteration 01
Here are some statements made by several testers after the first iteration process:
“I see potential in this app, moreover because I love to cook”
“It is quite surprising; I never thought this app is connected to many places”
“This is the app I’m looking for!!”
To see other opinions, suggestions and critiques by testers on this Low Fidelity UT, click here.
Branding and Visual
After feeling confident with user convenience in using CekCok application, it was time to set up the visual.
I started looking for pictures, UI design, and color palette as reference and started completing the visual assets from previous step that I have presented before, such as logo sketches, icons, and 3D assets.
Then I chose color scheme that would be used on CekCok.
I wanted CekCok to have only 3 base colors, which are:
- Green as main color, green gives organic and natural look. The main feature of CekCok is food quality checker, therefore green color is very suitable for the app.
- Greyish White as second color, white gives clear, neutral and clean look. CekCok’s philosophy is providing accurate and actual information and education (non-biased) to users, therefore white fits with this philosophy.
- Light orange as third color, orange radiates joy and cheerfulness. Orange color will give users fun experience when using CekCok application.
To read more details about CekCok’s brand and visual, click here. (It details CekCok’s font, color philosophy, references, visual assets, etc.)
When all references and visual assets were finished and ready to use, the app was ready to be inserted to Figma.
High Fidelity UT
In setting up the UI, I prioritized one target, which is to avoid user feeling ‘uncomfortable’ when using this app. Therefore, comfortableness is top priority.
If you would like to know more about CekCok interactive High-Fidelity prototype, click here.
CLOSING
Reflection
I’m fully aware that there are many aspects that CekCok does not have and CekCok still needs many opinions and suggestions to improve. However, creating CekCok is very important to me. Even though CekCok is a fictional application, I regard this project as my first child, whom I will keep educate and develop to be better. I will also keep improving research in the case study.
I hope that CekCok will become a source of education and solution that will help people who are unaware about the importance of quality in food. I also hope that CekCok will give contribution in decreasing food waste and increases concern on the environment.
CekCok, as my first case study and portfolio app, gives so much lessons for me as UX Designer. How to be aware about problem around, how to listen and understand others, how to create fun experience in using an app so it creates eye-catching UI appearance.
Finally, I want to apologize if I made a mistake in this writing or in CekCok application and I want to say thank you to other parties that have helped me in finishing my first portfolio (friends, parents, partner, mentor, tester, user who were willing to spare their time for interview. I also would like to give credits to Google, Flaticon, and Undraw as additional visual assets that helped me elevate CekCok aesthetics, and I even want to say thank you for those who are willing to spare their time to read this case study and any party that I cannot mention one by one
There is little bonus after this, you have arrived at the end my case study.
If you would like to read, please scroll below :)
BONUS!!
There are three features that I like the most, in addition to CekCok’s main feature.
I will discuss them a bit.
1. Games and Reward System!
When using this app, almost all testers asked me why there is a game in CekCok, whose main feature is providing information about food quality.
My main purpose of putting games is to educate the public about food quality
Buy why games?
Because potential user of this app is aged between 17–35 years old, game is right medium. Based on my research here, video game had showed that it can be an educational and fun medium for people in learning information.
Educating users on quality of various foods might sound boring, Therefore CekCok transforms this stereotype and create a fun and educational medium through games.
After playing the game, user will be rewarded with CP (CekPoint). CP is a currency that can be exchanged to rewards, such as discount vouchers, game vouchers, free delivery, or other exciting rewards.
2. Push Notification Feature
Push Notification Feature is a daily or hourly notification sent to user that invites user to revisit CekCok.
What will be the content of Push Notification?
- Reminder
For example: chicken meat and 2 other items will expire, cook them now! - Recipe & Listing
For Example:
Have you tried banana pancake recipe? Let’s learn it! Or
There are two items left to complete the banana pancake recipe, let’s buy it! - Promo from sponsor
For example: There is special price for banana in Tokopedia, check it now! - Games and Rewards
For Example: Let’s play the game and win exciting rewards!
I made this feature to create a connection between user and application. In another app, this feature is mostly used to show promo and invite user to buy product. In Cekcok, this feature is designed to remind user about storage time of food so it won’t expire and explore recipe feature to user.
3. Community
As CekCok developer, I don’t want this application only be used on certain time or periodically. I want CekCok to have positive impact on daily lives of its users through social connection.
Community is the right choice to fills this role.
Why community?
CekCok community is a place where anyone can exchange news, give suggestion to developer, create new recipes that can be shared to other community or even inserted to CekCok, therefore providing a medium for groups to buy and sell food.
Community is also expected to create new connections among users while keep running its main function to provide information and education to users about food quality.
