Combining interactive game in fresh food shopping application. Famicloud’s main target is to attract young group that provides them rapid and immediate delivery service.
Famicloud
DURATION 2 months
PLATFORM iOS, Android
Collaboratively Work in UI & UX Design
I partnered with the creative director to disclose insights and translate concepts into features that address customer behaviors and motivations.
Customer Insights & Ideation
I created wireframe, flow map and prototypes to share website vision and content strategy. Those facilitated clients to evangelize ideas, gain alignment and drive decision making.
Experience Strategy & Vision
I designed independently and closely collaborated with PM partners to translate product features for each platform context. Besides, I negotiated with the front-end engineer with a fair amount of details to perfect the website.
Oversight & Coordination
I executed style, wireframes, prototypes. Besides, I evangelized customer goals and balanced business goals. I prioritized and negotiated features for launch and beyond.
Design Execution & Validation
PROCESS

Define
identify a problem

Ideate
think of solutions to problem

UI flow
think thoroughly towards overall app design

Wireframe
alleviate conversation gaps with clients

Style
design style as original website for clients

Mockup
represent the structure, elements in a static way

Prototype
experiment with ideas while checking usability

Done
assist engineer whenever they need help
MY ROLE


2.
Apply Breeding Games in Application
To access our prospective users, we added interesting icons and images to make complex information more appealing and readable. In other words, this allowed users to quickly grasp the need they are looking for. Compared with texts, images and icons can easily catch users’ attention. From then on, better user experience would be built up in the user's mind.
The assumption was reasonable — young groups are easily addicted to mobile games because of positive stimulation which makes them delightful in their spare time. In particular, farm breeding games would give users some coupons after planting fruit successfully. With tangible advantages, this app not only saved the young group’s consumption in life expenses, but also got rid of their worries regarding spending time purchasing the food.
The Challenge
Attracted Young Group to Purchase Fresh Food on Famicloud
With the growth of e-commerce, the online market was partitioned by numerous enterprises. Hence, Famicloud looked forward to providing distinctive services and intriguing shopping user experience via app in order that they could corner the market.
Our challenge was to design stylish and fascinating applications for the target audience. In addition, we had to simplify complicated contents on the website into an application with a small interface.
The Approach
Add Attractive Patterns and Colors to Increase Users’ Attentions
1.
UI Flow
An approach for designers to organize mindset easily and design all pages needed
.png)
With one accord, wireframe is an indispensable approach. I used a wireframe to condense the conversation bridge with coworkers and clients, and naturally the meeting process became more efficient and smooth. Besides, I could organize my thoughts first to get rid of impossible tactics.
Wireframe
![]() Planning shopping cart pages and member center main page | ![]() Planning home page and product content pages | ![]() Planning category page and inner pages |
---|---|---|
![]() Design games pages’ user interface for game manufacture company | ![]() Planning games’ inner pages | ![]() |
Style
Adopt the original website style in application style design so that the website and application had a strong connection in the user's mind.




Mockup
Combining wireframe with style allowed clients to scale chiefly for testing, or display for their developers.
Home Page


Shopping Cart


Login


Category


Member Center



Conclusion
This application design contained a fair amount of information and categories, such as product pages, advertisement, promotion etc. Hence, it took a lot of time for me to negotiate and organize the information with clients. After contemplating how to display the entire information without confusion and misleading, I broke down the complex information into a list and re-organize the structure. Afterwards, I substituted tangible design layout for some implausible methods, such as adding attractive patterns and colors to attract attention. After finishing, clients provided positive feedback towards my overall design because I broke through original website design and adopted distinctive design tactics. Even though this project was still being developed by engineers, the present project had certainly solved clients’ problems.