Overview

Taiwan’s second-largest convenience store chain FamilyMart launched an app in 2016. Now, it has been downloaded at least six million. FamilyMart app provides mobile payment, online shopping, coffee pre-order, coupons and so on. However, this app gets only 3.4/5 on GooglePlay and 2.7/5 on App Store, so my teammate and I conduct a side project to redesign FamilyMart App.

Project Scope

FamilyMart app develops consumer loyalty programs and integrate online and offline consumption scenarios for standing out in a highly competitive market. Its vision of seamless shopping experience allows customers to browse featured products and new launches and easily order right away.
Therefore, we select two main redesign missions :
(1) Ordering Commodity Process
(2) Transferring Commodity Process

My Role - UI/UX Designer

Tasks :
- User Research - Questionnaire, Interviews, Usability Studies
- Wireframe
- UI Design

User Research

In user research, first we released questionnaire and selected 4 interviewers who had experience on using the features of ordering and transferring commodity. We did interviews to understand users' shopping experience and then conducted usability test to observe the participants' behavior and their feeling.

Interviews

I couldn't distinguish the features between commodity reservation (隨買預約取) and preordering online, picking up in any store (隨買跨店取). Moreover, the position and color of buttons is not apparent to notice.

I usually rely on exploring the app by randomly trying very features. I would not actively find out the manual. For first-time users, I suggest that there would call attention to noteworthy features in app or illustrate any required or recommended steps that users should take when using the app for the first time.

When I use the feature of transferring commodity to my friend, I feel uncertainty because I don't know whether my friend receives the gift and downloads the app or not.

Usability Testing

We delivered three tasks to observe the participants' behavior.
‍
(1) Find a specific feature : Please find out the feature of transferring commodity.
(2) Ordering commodity process : Please add Wandan Milk into cart and make an online payment.
(3) Transferring commodity process : Please transfer commodity to your friend.

Pain Points

Pain Points - Understanding

(1) The price tags were unclear, so users misunderstood the items' price.
(2) Words were too small to read. Especially in choice chips, users would directly neglect them.

Pain Points - Discoverbility

(1) The search bar/button was hidden in hamburger menu, so when users searched an item, it was hard to find the search bar/button on page. Moreover, the users might just scroll down long page to search, and it was quite a hassle.

Pain Points - Discoverbility

(1) The pages of redeeming and transferring commodities were separated. When users click “My Purchase”, there was only the feature of redeeming, so users had to go navigation bar or click the gift icon （我要轉贈）on top bar to find the feature of transferring items.

User Experience Redesign

Navigation Bar

Originally, there was two sticked sections, barcode and notification（我的優惠）and online ordering. They occupied 1/4 layout and contained a lot of information so that users couldn't focus on picking up commodities.

Changes :
(1) Mostly users used barcode when they paid in convenience stores, but this page aimed for online ordering. Deleted the barcode and discount notification because they were also in the homepage.
(2) Added search and cart icons on the bar which users could easily search items and proceed to checkout.

Button and Interaction

From user research, the color of buttons made white texts unapparent enough. Users could not recognize the words so that they easily neglected choice chips.

Changes :
(1) Negative Space in order to make the page more readable.
(2) Added segmented control and used swipe gesture to switch features.

Transfer Commodity

Originally, transferring and ordering commodity were separated pages. Therefore, many users would misunderstand "My Purchase" also had transferring feature.

Changes :
(1) Integrated the processes of transferring and ordering commodity into "My Purchase" page.
(2) In original version, users' eyes had to shift to left side when checking the numbers. Therefore, redemption period changed to set in the bottom of the choice card.
(3) Enlarged action buttons so that users can easier click.