Work : App UI/UX and Visual Design  | Company's industry : Biotech | Tools: Figma, Illustrator

Project background
After the launch of the "GeneLife 3.0" app MVP, I started working on different iterations, covering both app improvement, new features, and flow implementations needed to support the business growth.
The company is selling different genetics kit, each user can embrace a different DNA journey, starting with a basic kit, and later choose to get more genetics reports according to the topic of interests: sport, diet, personality...
Until now, the user can buy additional  kits and/or reports thanks to  the e-commerce website. In order to make the things easy for our app users, it seemed natural to offer the opportunity to perform a purchase through the app. For that, we wanted to give enough flexibility to user, with different payment options: credit/debit card, Paypal, Apple pay but also the possibility to pay with his/her App store/Google Play store account ("in-app purchase).

Challenges
1. Manage the different purchase methods according to some genetics testing constraints
Additional genetics reports can be purchased and automatically delivered if the first genetics test performed can be used for another type of report. Because the reports is 100% digital, it's possible to use an in-app purchase method.
But some additional genetics reports requires to perform a different test from the first one, and for that, we need to proceed with a new testing. In this situation, the user must purchase a new DNA kit. As a physical product - the DNA kit - is involved, the in-app purchase method cannot be used.
2. Guide the user through the different payment method
According to the type of additional report wanted, the user will have the choice (no re-testing needed) or not (re-testing needed). 
3. Ensure a secure and safe management of personal, billing and shipping information
3. Follow iOS guidelines for the implementation of in-app purchase​​​​​​​
UI/UX design process
1. User flow


2. Wireflow


3. Mockups and screens flow

4. Focus on the design of the credit card payment method
Back to Top