top of page

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.


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


Rectangle Copy 4.png


identify a problem

Rectangle Copy 4.png


think of solutions to problem

Rectangle Copy 4.png

UI flow

think thoroughly towards overall app design

Rectangle Copy 4.png


alleviate conversation gaps with clients

Rectangle Copy 4.png


design style as original website for clients

Rectangle Copy 4.png


represent the structure, elements in a static way

Rectangle Copy 4.png


experiment with ideas while checking usability

Rectangle Copy 4.png


assist engineer whenever they need help




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


UI Flow

An approach for designers to organize mindset easily and design all pages needed

下載 (1).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.


img-X26200500-ApeosPort-IV 4070(350121)-6355-191026200510.jpg-2(已拖移)

Planning shopping cart pages and member center main page

img-X26200500-ApeosPort-IV 4070(350121)-6355-191026200510.jpg-4(已拖移)

Planning home page and product content pages

img-X26200500-ApeosPort-IV 4070(350121)-6355-191026200510.jpg-3(已拖移)

Planning category page and inner pages

img-X26200500-ApeosPort-IV 4070(350121)-6355-191026200510.jpg-6(已拖移)

Design games pages’ user interface for game manufacture company

img-X26200500-ApeosPort-IV 4070(350121)-6355-191026200510.jpg-8(已拖移)

Planning games’ inner pages

img-X26200500-ApeosPort-IV 4070(350121)-6355-191026200510.jpg-7(已拖移)


Adopt the original website style in application style design so that the website and application had a strong connection in the user's mind.



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

Home Page

iPhoneX Dark Copy.png
iPhoneX Dark.png

Shopping Cart

iPhoneX Dark Copy 4.png
iPhoneX Dark Copy 5.png


iPhoneX Dark Copy 9.png
iPhoneX Dark Copy 8.png


iPhoneX Dark Copy 3.png
iPhoneX Dark Copy 2.png

Member Center

iPhoneX Dark Copy 6.png
iPhoneX Dark Copy 7.png


After I streamlined the design development process through Marvel, prototyping allowed clients to envision the final project and apply in user testing to observe the behavior and preference.


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. 

More Projects 

bottom of page