[App Copying 100 Knock #1] Finally Started | Analyzing the FamiPay App from a UI/UX Perspective
Hello! This is Bun.
Starting immediately, I would like to post my #AppCopying100Knock.
1. What is App Copying 100 Knock?
▼Overview
"App Copying 100 Knock" is a training exercise to sharpen your "instant responsiveness" as a UI designer by rapidly copying only the "skeleton" of an app.
▼Skills defined as instant responsiveness
I believe the following three skills are important for a UI designer:
Observing the subject
Identifying patterns from phenomena
Giving form through improvisation
In this initiative, I define the state where these are demonstrated in total as "instant responsiveness".
▼Why copy only the "skeleton"?
By daring to strip away decorations and visual expressions, and tracing only the "skeleton" such as information structure and screen design,
you can deeply consider:
What is the "core experience" that serves as the foundation of the app?
Where do the creators place their intent and focus?
deeply.
▼The purpose of this initiative
By accumulating insights through copying, I aim to:
Accumulate design thinking and structural patterns
Increase the "drawers" (repertoire) within myself
The goal is to improve the ability to turn ideas into form immediately .
▼ References
I learned about this initiative through an article by Kunio Terada (nio).
Thank you, nio-san! 🙌
2. How to do the App Copying 100 Knock
Choose one app you want to copy,
Take notes on things that catch your attention while using the app (10 minutes)
Turn a sticky note vertically and hand-copy three selected screens (10 minutes)
Take notes on things that catch your attention while using the app (10 minutes)
3. About the target app [Target app: App Name]
App Overview
・The FamiPay app is operated by FamilyMart and is designed to make shopping at FamilyMart more convenient.
・It includes a proprietary payment method called FamiPay, and since it can be used outside of FamilyMart, it also functions as a payment app.
Assumed Target
・FamilyMart users
Overall Insights
・My first impression was that it also has a strong aspect as a payment app. Within the app, I felt an emphasis on encouraging the use of FamiPay payments, such as through loan information notifications and coupons limited to FamiPay users.
・Impression from operation: Although there is a large amount of information, the content is displayed in a large format, which prevents it from feeling overwhelming, so even first-time users should not feel stressed.
・Point of interest compared to other apps: I thought it was unusual to have six navigation menu items. It felt like the content with higher priority was arranged from left to right.
4. Copying Practice
Practice 1: Home Screen
📝Things I noticed (Insights during the 30-minute workshop)
・The barcode is placed at the very top, a design that makes it easy to pay.
・Frequently viewed brand pages are automatically added based on past behavioral history.
・Notification content is unified with the same color scheme as the brand logo, giving a sense of consistency.
・You cannot see coupon information from the home page without scrolling, so it feels like the information you want is not visible on the initial screen.
🔁Things I noticed while writing the article / Supplements and reconsiderations while writing
・On the screen in its non-scrolled state, there is nothing other than the payment barcode except for information related to FamiPay payments.
・The design prioritizes loan information over coupons. While coupons are the information users actually want to know, is the loan information placed above because the provider wants to convey it, knowing that users will look at coupons proactively anyway?
・There are many campaigns with a large amount of text, which can feel overwhelming, but the design reduces the sense of pressure by increasing the width of the objects themselves.
・Why is the 'Frequently Viewed Brand Page' placed at the top when it didn't feel like essential information? → Is it because having only rectangular announcements would make the design look monotonous?
💡Improvement Proposal
• Design the 'Frequently Viewed Brand Page' section so that the bear icon has a speech bubble, saying a short announcement.
→ This brings a friendly impression to the app as a whole, prevents the design from looking monotonous, and allows the provider to convey the information they want to share.
Practice ②: Coupon Screen
📝Things I noticed (during the 30-minute work session)
・You can switch between coupons and multi-use tickets.
・Coupons that they want to highlight have labels like 'Limited Quantity' or 'new'.
・When you add a coupon to your favorites, you can sort by favorite coupons only.
・When you press 'Set', a toast saying 'Coupon has been set' appears from the bottom of the screen.
・Once set, a 'Set' indicator and animation appear on the home screen.
・The order is mixed, including genres and new arrivals. (Recommended → Multi-use → New)
・When set, the button switches from 'Set' to 'Cancel'.
・There is a new experience with the 'Gift' button for coupons.
🔁Things I noticed while writing the article / Supplements and reconsiderations while writing
・Tapping a photo within a coupon allows you to view an enlarged version, a design intended for users who want to confirm the target products for that coupon.
・Is the strategy to increase FamiPay users by designing a 'Gifting' experience to attract more app users?
・Instead of using diagonal lines, they use font weight variations within the coupons to improve visibility.
・Trial coupons do not show the target coupon unless you click on them.
💡Improvement Proposal
・Since there are so many coupons, it would be convenient to have a feature to sort by new arrivals or by genre, such as food.
・It is hard to notice that trial coupons are clickable, so adding a shadow or similar effect would make them feel more interactive.
Practice ③: Challenge Screen
📝Things I noticed (during the 30-minute work session)
・There is a distinction between 'Before Challenge' and 'During Challenge'.
・Challenges also include surveys.
・Numbers are used frequently, making them easy to catch the eye.
🔁Things I noticed while writing the article / Supplements and reconsiderations while writing
・By including surveys within challenges, they add a gamified element, reducing the barrier for participants.
💡Improvement Proposal
・Challenges you are eligible for and those you are not are mixed together, so many people likely choose not to participate because they don't understand which is which.
・The conditions for participation are complex.
Summary
By doing my first 'App Copying 100 Knock', I realized that even the screens I touch casually every day are packed with the creator's intentions and many fine details.
Also, by not just observing but actually copying and working with my hands, I noticed many new things and felt the importance of 'creating while thinking'.
Since this was the first one, I overthought it and it took quite a long time💦
From the second one onwards, I want to organize my approach and make this a more effective training session.
And above all, I will continue to enjoy the process🔥