Sayurbox iOS App Redesign (Oct ‘19)
This post was originally posted on my old account in October 2019.
Introduction
Sayurbox is an online marketplace for goods and groceries with farm-to-table concept. Sayurbox will deliver its goods from farmers to the customer within 24-hours. There are several similar services like HappyFresh, Brambang, TaniHub, or with the introduction of BlibliMart by Blibli, JDMart by JD.ID, made the competition much more exciting within the grocery startup industry.
Sayurbox also available in both mobile apps (for iOS and Android) and desktop website. But in this redesign, I want to focus just on the iOS version of the app.
I made this study case for the hiring process of an internship in Stoqo.
I’m going to take some problems just on my experience using the app. So I’m going to try to fix these problems based on my knowledge and my experience.
User Persona
The Problems
Problem #1
This is the look of the app on October 19, 2019 (version 1.30.3). I’m going to point out the first problem, the inconsistency of the language used in the app. The bottom navigation bar, names of categories, and Titles in the app use English, but the rest use Bahasa Indonesia. This may cause confusion for people who don’t speak in both English and Bahasa Indonesia. There’s no language settings in the app too.
Problem #2
In the bottom navigation bar of the app, the fourth menu from the left, Chat has the same literal meaning to the other menu, Inbox.
chat | CHat |
verb (chats, chatting, chatted) [no object]
- talk in a friendly and informal way
- exchange messages online in real time with one or more simultaneous users of a computer network
inbox | ˈinbäks |
noun → electronic folder in which emails received by an individual are held.
verb [with object] informal → send a private message or an email to (someone, typically another member of a social networking website or online forum)
Chat in this navigation bar leads to chatting to customer service in the Help Centre whereas Inbox is where the messages (not customer service chats) are held.
Problem #3
When user taps the logout menu to log out from the app (duh!), they don’t encounter a confirmation dialog. They immediately logged out from the service. This may cause accidental clicks from users since they rarely use this feature.
Problem Validation
Validation for Problem #1
Inconsistency in language use in the app makes the app bad for localization which ruins the user experience.
Say you’re a native American who just speak English wanted to order some groceries from Sayurbox. You just understand texts from the categories, bottom navigation bar, and titles in some sections. This also applies to Indonesian who doesn’t speak English at all. They don’t understand texts from the categories, bottom navigation bar, and titles in some sections.
According to the research from ilanguages.org, an estimated 60% of the world’s population is multilingual. Bilinguals alone outnumber monolinguals — 43% versus 40%. The rest speak even more languages. As a rule, there is no such thing as “somebody’s language” in the singular.
But we shouldn’t ignore the 40% monolinguals, especially in our developing country.
The chart above shows the average scores for the High School English National Examination from 2015 to 2017. The trend declined from year-to-year with the lowest 39.08 out of 100 for SMK (2017). This demonstrates the English ability of majority Indonesians. So you have to assume that your audience is monolingual. You can see other data here.
Based on the article from UXmatters.com, in such a highly competitive marketplace, a flawless user experience is not a luxury. It is central to your product’s adoption and success. A naive approach to localization can instantly cancel out all your hard-won gains in user experience. This obviously applies to the first problem with all the competition in grocery startup industry (Ugray, 2018).
A particularly notorious offender is code that glues together messages programmatically — for example, “You have [ x ] items in your [ y ].” There is virtually no language on the planet other than English in which it’s possible to just translate the strings You have and items in your and expect the result to make sense (Ugray, 2018).
Validation for Problem #2
In the fifth point of this article by UX Planet, they said that users are accustomed to traditional menus, users are also accustomed to specific icon designs. Unclear or unfamiliar icon designs are some of the worst UX offenders which a very common mistake that leads to navigation difficulty (Appsee, 2018).
Using Chat Bubble icon for Chat menu is valid, but the button leads to Help Center/Customer Service. Also putting it next to Message icon for Inbox menu may leads confusion to untrained users.
Validation for Problem #3
Based on the research by Jakob Nielsen, he pointed out on why have confirmation dialogs in the first place? To allow users a second chance to check their work before proceeding with a dangerous action.
However, it’s not a second chance at all if users automate their response to the conformation and simply click Yes without thinking further.
A confirmation dialog must restate the user’s request and explain what the computer is about to do, with specific information that allows users to understand the effects of their action. (Nielsen, 2018)
Logout feature is not a feature users often access, a confirmation dialog can prevent users from accidentally clicking the feature.
Solution
Try the redesigned app here.
Solution for Problem #1
I created two interfaces, translated to each language for Indonesian market. The languages are English and Bahasa Indonesia.
English Interface
I have translated all the elements to English. So English speaker can navigate through the app completely, not just the categories and the bottom navigation bar. I also created translated banners.
Bahasa Indonesia Interface
For Bahasa Indonesia version, I have translated all the elements to Bahasa Indonesia. So monolingual locals can navigate through the app completely, not to be confused to the previous foreign language categories labels and the bottom navigation bar.
I also created an option for users to change their preferred language inside the Account/Akun Saya menu.
Solution for Problem #2
I created a new icon for the fourth menu in the bottom navigation bar. Instead of Chatting Bubble icon with Chat label, I replaced the icon with Question Mark inside a Chat Bubble icon which represents Help Centre. I also renamed the menu as Help and removed the Help option in Account menu. ‘Bantuan’ option in the Account menu acts as Frequently Asked Question (FAQ) which can be included in the Help Centre.
English Interface
Bahasa Indonesia Interface
Solution for Problem #3
To prevent accidental logout from users, I created a confirmation dialog for each language interface. The default language interface is in Bahasa Indonesia.
English Interface
Bahasa Indonesia Interface
Usability Testing
User #1
Name : Evan
Age : 20
Occupancy : Engineering Student
Language Preference : English
User #2
Name : Jason
Age : 20
Occupancy : Medical Student
Language Preference : Bahasa Indonesia
User #3
Name : Diman
Age : 43
Occupancy : Security Guy
Language Preference : Bahasa Indonesia
The usability testing is divided into two sections, the first one is using the current version of Sayurbox app (v1.30.3). The second one is using the redesigned version. The language interface in redesign version chosen based on the language preference of each user.
Scenario #1 — Using current version of Sayurbox app (v1.30.3)
Scenario: Selecting a product (Cabai Merah) via categories section.
Step 1: Open up Sayurbox App
Step 2: Selecting Herbs & Spices category
Step 3: Select Cabai Merah from the list
Scenario #2 — Using current version of Sayurbox app (v1.30.3)
Scenario: There’s a problem with the order, user wants to seek some help from the Customer Service.
Step 1: Open up Sayurbox App
Step 2: Selecting Chat menu
Step 3: Start using the help feature.
Scenario #3 — Using current version of Sayurbox app (v1.30.3)
Scenario: Logging out of the app.
Step 1: Open up Sayurbox App
Step 2: Selecting Account menu
Step 3: Selects Logout option.
Step 4: User realizes that they have been logged out
Scenario #1 — Using redesigned version of Sayurbox app
Scenario: Selecting a product (Cabai Merah) via categories section.
Step 1: Open up Sayurbox App
Step 2: Selecting Bumbu & Rempah category
Step 3: Select Cabai Merah from the list
Scenario #2 — Using redesigned version of Sayurbox app
Scenario: There’s a problem with the order, user wants to seek some help from the Customer Service.
Step 1: Open up Sayurbox App
Step 2: Selecting Bantuan menu
Step 3: Start using the help feature.
Scenario #3 — Using redesigned version of Sayurbox app
Scenario: Logging out of the app.
Step 1: Open up Sayurbox App
Step 2: Selecting Account menu
Step 3: Selects Logout option.
Step 4: User realizes that they have been logged out
User Flow
Problem #1
Since the difference only ‘cosmetic’, I don’t think there is any improved user flow.
Problem #2
Accessing the Help feature
As you can see in the diagram above, User Flow in the Redesign version has much improved than the current version. In the current version, untrained users may be confused with the unclear menu labels which causes multiple useless clicks that may affect efficiency and time consuming.
Problem #3
Logging out of Sayurbox account
This may not improved the amount of clicks or time of the user flow, but since the purpose of the redesign is to prevent accidental click of the Log out feature, I added another step in the flow for user to confirm their action to log out.
References
- Appsee. (2018). 6 Navigation Design Mistakes, And 3 Apps That Do It Right. Accessed October 20, 2019 from https://uxplanet.org/6-navigation-design-mistakes-and-3-apps-that-do-it-right-2e05fda7088b.
- Babich, Nick. (2016). 5 Essential UX Rules for Dialog Design. Accessed October 20, 2019 from https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116.
- Coyle, Andrew. (2016). Designing Confirmation. Accessed October 20, 2019 from https://medium.com/flexport-design/designing-confirmation-278d159723e.
- ILANGUAGES.ORG. (2018). Multilingual People. Accessed October 19, 2019 from http://ilanguages.org/bilingual.php.
- Interaction Design Foundation. (2018). Localizing User Experience. Accessed October 19, 2019 from https://www.interaction-design.org/literature/article/localizing-the-user-experience.
- Lokadata by Beritagar.id. Nilai Rata-rata Ujian Nasional Bahasa Inggris Tingkat SMA. Accessed October 19, 2019 from https://lokadata.beritagar.id/chart/preview/nilai-rata-rata-ujian-nasional-bahasa-inggris-tingkat-sma-1509004079#.
- Nielsen, Jakob. (2018). Confirmation Dialogs Can Prevent User Errors — If Not Overused. Accessed October 20, 2019 from https://www.nngroup.com/articles/confirmation-dialog/.
- Puspendik Kemendikbud Republik Indonesia. Laporan Hasil Ujian Nasional 2019. Accessed October 20, 2019 from https://hasilun.puspendik.kemdikbud.go.id/#2019!smp!capaian_nasional!99&99&999!T&T&T&T&1&!1!&.
- Sita N. (2018). Startup Karya Anak Bangsa Ini Bercita-cita Menyejahterakan Para Petani di Indonesia. Accessed October 19, 2019 from https://www.goodnewsfromindonesia.id/2018/01/29/startup-karya-anak-bangsa-ini-bercita-cita-menyejahterakan-para-petani-di-indonesia.
- Szerovay, Krisztina. (2018). Internationalization & Localization. Accessed October 18, 2019 from https://uxknowledgebase.com/internationalization-localization-d84795b7962c.
- Ugray, Gábor. (2018). 7 Ways Bad Localization Can Ruin the User Experience. Accessed October 19, 2019 from https://www.uxmatters.com/mt/archives/2018/03/7-ways-bad-localization-can-ruin-the-user-experience.php.
