top of page

DURATION    4 months

PLATFORM    iOS, Android, Web


An ounce of prevention is worth a pound of cure. Every customer can easily screen their genes via simple steps at home, and they can also protect families’ health in advance. 


Independently Work in UI & UX Design

I individually disclosed insights and translated concepts into features that addressed customer behaviors and motivations. Besides, I analyzed competitors’ websites and gathered some useful data which could be applied in design work.

Customer Insights & Ideation

I created wireframe, flow map and prototypes to share website vision, UI Flow 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 UI flow, wireframes, prototypes for both website and mobile app devices. In addition, 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


propose three distinctive design layout

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

The Challenge

Transform Gene Topic into Interesting issue


General public has become more aware of health issues recently, and therefore our mission was to design an appealing website to attract new users. However, the first challenge was to simplify complicated genetic information and make sure all the services contained in the website could be easily comprehended by readers. 


Help Owners to Increase Selling Volume

Existing competitors are the most integral problem for us to confront. From users’ perspectives, a website represents the very first and essential expression of a company. In other words, we had to design an outstanding and eye-catching website so that the company could achieve their goal successfully.

The Approach

Colour Website Elements and Design out of Normal Standard

To access potential target users, we adopted data visualization to express genetic reports because people normally have better sensory response towards images and patterns rather than texts. Based on this factor, we then applied different colors and specific icons to each category in order that users could distinguish assorted information via those signs. Moreover, instead of implementing normal and usual layout design, we designed out of common standard. We thoroughly used the variations of figure and images to build up the diversity of visual expression. Naturally, whenever users see distinctive design work, they are more willing to spend time visiting the website.

UI Flow

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

工作區域 1@3x.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 main page layout and elements position

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

Planning About page and adopting data visualization concept

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

Planning Service page

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

Planning the page of inspection steps

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

Planning app login pages and main page

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

Planning app report pages


[ Web ]

Adopt bright and vivid color because genes consist of distinctive and specific individuals. Moreover, I applied varied geometric figures to liven interface up, and elements were stacked up to increase variations in the visual expression.

Web style 1

Web style 2

Web style 3

[ App ]

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


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


Genetic Tech

科技與知識  copy.png

Inspection Method

科技與知識  copy 4.png
科技與知識  copy 5.png

Service Intro

科技與知識  copy 2.png


科技與知識  copy 12.png

Member Center

科技與知識  copy 9.png
科技與知識  copy 7.png
科技與知識  copy 8.png

Googene App


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 was a whole new product website for Googene corporation. When I designed and planned this website, it took several times to create a unique and distinctive layout. With special visual design, it would first catch customers’ attention. Additionally, genetic information is so complicated for the general public to comprehend and focus on this issue. Naturally, the most tough task was to simplify the introduction and create an engaging atmosphere for viewers. As a result, I first surfed several relevant websites and took some reference from them. I then analyzed the pros and cons from other websites, and applied some merits to the Googene website. Finally, this design work not only satisfied clients’ requirements, but also assisted salesmen to achieve their sales goal in a short period. From this project, my data visualization skill advanced greatly. This experience would help me to carry out a more thorough user experience design for my next project.

More Projects 

bottom of page