MY ROLE
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
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
propose three distinctive design layout
Mockup
represent the structure, elements in a static way
Prototype
experiment with ideas while checking usability
Done
assist engineer whenever they need help
The Challenge
Transform Gene Topic into Interesting issue
1.
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.
2.
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
WEBSITE
APP
Wireframe
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.
 Planning main page layout and elements position |  Planning About page and adopting data visualization concept |  Planning Service page |
|---|---|---|
 Planning the page of inspection steps |  Planning app login pages and main page |  Planning app report pages |
Style
[ 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.
Prototype
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.
Conclusion
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.
