A user-friendly and visually appealing website for individuals interested in exploring their genetic information.
Through extensive research, thoughtful design decisions, and a focus on privacy and data security, I successfully created an engaging user experience that has positively impacted user engagement and satisfaction
Full Website
![](https://framerusercontent.com/images/mTbTz2HjGRHSYMFD2UwYt4UTE.png)
![](https://framerusercontent.com/images/SdFBzeYvMTcxNyCdfAcit07Tc.gif)
Explore my work!
Project Overview
Genetically is a company that provides comprehensive DNA reports and services to individuals seeking to understand their genetic makeup and ancestral origins.
The main objective of this project was to create a user-centric experience with a visually captivating interface. The aim was to enable users to effortlessly navigate the website, gain meaningful insights from their DNA reports, and engage with a range of personalized services offered by Genetically.
Brief
In October 2021, Genetically approached me with the goal of creating a complete user experience and interface for their DNA report services.
The client aimed to provide an intuitive and engaging website that would enable users to explore their genetic information in a personalized and meaningful way.
![](https://framerusercontent.com/images/n8WvVXxW9na2l0zOo3xVf2mev0.png)
Design Process
The planning and design process for this project involved four essential steps: UX research, solutions, wireframing, and prototyping.
![](https://framerusercontent.com/images/OIRsoP4grmWis158gWKxMMVzCY.png)
These steps formed the foundation for creating a user-centered and intuitive website.
60 hours of work
1
Research
This involved gathering insights about the target audience, their needs, motivations, and expectations related to DNA reports and services. Methods such as competitor analysis and build a user persona were employed to gain a deep understanding of the user's perspective and identify opportunities within the existing market.
2
UX Solutions
3
Wireframing
4
UI Designs
User Flow
The process of defining the user flow for this project involved mapping out the sequence of steps and interactions that a user would take while navigating through the website.
![](https://framerusercontent.com/images/a3v0PjLRec2XjAsP4a5ALIjveY.png)
Creating a UI kit involves a systematic and iterative process that includes several key steps:
![](https://framerusercontent.com/images/JWp032RIRDMrDfXzByFLhyi60ZE.png)
Define visual style, typography, color palette, and other design elements.
![](https://framerusercontent.com/images/JWp032RIRDMrDfXzByFLhyi60ZE.png)
Identify the common UI components (buttons, forms, navigation bars, cards, modals, icons, etc).
![](https://framerusercontent.com/images/JWp032RIRDMrDfXzByFLhyi60ZE.png)
Establish the base styles for each component (size, spacing, typography, colors, and other visual properties).
![](https://framerusercontent.com/images/JWp032RIRDMrDfXzByFLhyi60ZE.png)
Design each component individually considering their purpose, functionality, and usability.
![](https://framerusercontent.com/images/JWp032RIRDMrDfXzByFLhyi60ZE.png)
Document clear guidelines on how to use them effectively.
![](https://framerusercontent.com/images/XLyiTgh6oaNYxzUBuZcUFL9BOY.png)
UI Designs
The prototyping stage involves a cyclical method, enabling designers to assess and polish their design ideas prior to entering the development stage. By mimicking user interactions, evaluating user-friendliness, and soliciting input, prototypes are essential in generating user-focused and efficient digital experiences.
For this project I designed desktop and mobile versions of interactive prototypes in Figma.
![](https://framerusercontent.com/images/ZhHdrhE3HDDFTuC7m9HDyarKU.png)
![](https://framerusercontent.com/images/K2ELrNyatnXK1g109gANYdxQ.png)
Final Prototype
The final delivery for the Genetically included an interactive prototype that showcased the complete user experience of the website.
This interactive prototype served as a tangible representation of the design concepts and allowed stakeholders to fully explore and interact with the proposed solution.