As we create the packaging, we start developing the website. Its main purpose is to present all types of tests offered by the company.
Creating a draft site map.
![genotek site process 1](genotek-site-process-1.jpg)
The most interesting part is the personal tests. We need to get visitors excited and ultimately sell them a service.
One of the features of Genotek tests is that the company offers several of them with different themes: Diet and Sport, Family Planning, Talents and Predispositions and Health and Longevity. The first test a client takes is more expensive, but all subsequent ones are offered at a discount. In the end, customers can purchase tests only for specific themes they are interested in or buy the entire set over time.
Estimating the target audience for each test.
![genotek site process 2](genotek-site-process-2.jpg)
Considering a way to present genetics based on themes.
![genotek site process 4](genotek-site-process-4.gif)
![genotek site process 5](genotek-site-process-5.gif)
![genotek site process 6](genotek-site-process-6.gif)
![genotek site process 7](genotek-site-process-7.gif)
![genotek site process 8](genotek-site-process-8.jpg)
Deciding to drop all the abstract features for now. Trying to play with contrasting scales: a cell as a “genetic factory;” an eye as an illustration of a person’s congenital features with its color and shape; a ballerina as a representation of talent and realization of human abilities.
![genotek site process 9](genotek-site-process-9.jpg)
Getting interested in the blur, focusing and zoom effects. A genetic test as a way to make a blurred understanding of oneself crystal clear, to see oneself in maximum detail. Putting together a prototype to demonstrate all the effects.
Looking for an impressive graphical feature. Deciding to go with ASCII patterns and feeding lots of pictures to the generator in an effort to find something worthy.
![genotek site process 11](genotek-site-process-11.jpg)
![genotek site process 12](genotek-site-process-12.jpg)
![genotek site process 13](genotek-site-process-13.jpg)
Trying to combine it with animation.
Having acquired an entire range of effects we can use, starting to work on the contents. Deciding to build the website inside out by prioritizing contents of individual pages, such as the How to Submit a Sample guide and individual test pages.
![genotek site process 15](genotek-site-process-15.jpg)
Arriving at the following structure for test pages:
—a cover image and introduction;
—a description of a problem and related life situations;
—an insert about genetic factors influencing that sphere of life;
—benefits of the test;
—an overview of future results;
—a guide on purchasing the test and submitting a sample.
Working on the contents of each test page together with the client. Starting with a wireframe.
![genotek site process 18](genotek-site-process-18.jpg)
While the work on the texts is under way, we move one level up and start to think about the main page and landing pages. By that time, the first sketches of the packaging are ready, so we decide to place it in the center of attention. Assembling an interactive prototype to demonstrate the mechanics of the main and landing pages.
Starting to prepare illustrations for individual test pages. Deciding to build everything around a young couple, Oksana and Pavel, and connect all tests in a single narrative. We’ll have the couple do sports, explore their heritage, plan children and take care of their health.
![genotek site process 20](genotek-site-process-20.jpg)
Using page scenarios to develop cover images which are title illustrations that have to resonate with the theme of the test.
![genotek site process 21](genotek-site-process-21.jpg)
![genotek site process 22](genotek-site-process-22.jpg)
![genotek site process 23](genotek-site-process-23.jpg)
![genotek site process 24](genotek-site-process-24.jpg)
![genotek site process 25](genotek-site-process-25.jpg)
![genotek site process 26](genotek-site-process-26.jpg)
![genotek site process 27](genotek-site-process-27.jpg)
![genotek site process 28](genotek-site-process-28.jpg)
![genotek site process 29](genotek-site-process-29.jpg)
![genotek site process 30](genotek-site-process-30.jpg)
![genotek site process 31](genotek-site-process-31.jpg)
For the Talents and Sport test, we decide to replace a single photo or video with a chaotic carousel of objects that come together to form images of an athlete, engineer or a musician when the page is scrolled.
![genotek site process 32](genotek-site-process-32.jpg)
Launching a full-scale photo factory to prepare images: finding props, taking photos, retouching.
![genotek site process 33](genotek-site-process-33.jpg)
![genotek site process 34](genotek-site-process-34.jpg)
Preparing draft cover images for the tests.
![genotek site process 36](genotek-site-process-36.jpg)
Assembling wireframes of all pages, looking at what’s missing and where the contents might be weak.
![genotek site process 37](genotek-site-process-37.jpg)
On all test pages, the cover image is followed by a description of a problem using real-life examples. Deciding to use simple objects that people come across in the chosen sphere of life for illustrations.
For the diet test we create fake health and beauty magazines, covers of books on losing weight and a screenshot of a nonexistent beauty blog. Gathering all possible clichés people come across when considering a diet.
![genotek site process 38](genotek-site-process-38.jpg)
Asking Oksana to bring pictures from the family archive for the page on genealogy.
![genotek site process 39](genotek-site-process-39.jpg)
Dividing pictures into the paternal and maternal lines and placing them on different sides of Oksana’s portrait.
![genotek site process 40](genotek-site-process-40.jpg)
Finding medical objects, test results, a medical log book and doctor notes to illustrate the health test.
![genotek site process 41](genotek-site-process-41.jpg)
For the test on family planning, finding objects used during a baby’s first year of life.
![genotek site process 42](genotek-site-process-42.jpg)
The introduction is followed by a block about the influence of genetics on each sphere of human life. Drawing "the best illustration of a call on the internet."
![genotek site process 44](genotek-site-process-44.jpg)
Trying to apply the illustrations and test descriptions onto the typeset templates. Adhering to the approved structure, but realizing that the main part describing usefulness of the test comes out too detailed which makes pages unbearably long. Where possible, cutting down the number of examples and details, coming up with transition illustrations to break down lengthy texts and control readers’ attention better.
![genotek site process 45](genotek-site-process-45.gif)
![genotek site process 46](genotek-site-process-46.gif)
Drawing additional icons and technical graphics.
![genotek site process 50](genotek-site-process-50.jpg)
![genotek site process 51](genotek-site-process-51.jpg)
Remembering that we also need photos for other pages. Visiting the client, taking pictures of the laboratory as well as a group photo of all employees.
![genotek site process 43](genotek-site-process-43.jpg)
To make sure there are no glitches on the website, working on performance by regularly running browser tests.
![genotek site process 49](genotek-site-process-49.gif)
Making another approach to the layout. Drawing a standard page and completing individual test pages.
![genotek site process 52](genotek-site-process-52.jpg)
Taking and retouching a bunch of photos, drawing more technical graphic elements.
![genotek site process 53](genotek-site-process-53.gif)
![genotek site process 54](genotek-site-process-54.jpg)
![genotek site process 55](genotek-site-process-55.jpg)
![genotek site process 56](genotek-site-process-56.jpg)
![genotek site process 57](genotek-site-process-57.gif)
Getting approval for the pictures and drawing icons for the rewards block and the account page.
![genotek site process 58](genotek-site-process-58.jpg)
Time to think about B2B. Sketching the appearance of the future page.
![genotek site process 59](genotek-site-process-59.jpg)
Client: Looks like Silent Hill.
Adding a rainbow.
![genotek site process 60](genotek-site-process-60.jpg)
Using photos to draw lab equipment for the first tab of the For Laboratories page.
![genotek site process 62_1](genotek-site-process-62_1.jpg)
![genotek site process 62_2](genotek-site-process-62_2.jpg)
Searching for equipment dimensions on the manufacturer website and creating 3D models for the future picture.
![genotek site process 62_3](genotek-site-process-62_3.jpg)
Choosing the best photos, cutting them into planes and putting them on the models.
![genotek site process 62_4](genotek-site-process-62_4.jpg)
![genotek site process 62_5](genotek-site-process-62_5.jpg)
Moving on to premium tests. These are expensive services that include all the regular tests as well as additional services. Thinking how we can fit five pages into one and explain both the benefits of the tests and the differences between them.
First, an idea of a cover is born: we can show how genes influence our present and future literally.
Then each test will be covered briefly in its own tab and there will be a comparison table. Several iterations later we have mock-ups of all tabs.
![genotek site process 63](genotek-site-process-63.jpg)
![genotek site process 64](genotek-site-process-64.jpg)
Working on diagnostic tests. Their pages have to contain maximum information since they will be used by doctors and their patients. Not a place for entertainment.
Coming up with the first draft of gene pages.
![genotek site process 65](genotek-site-process-65.jpg)
Getting the client feedback and starting to work on the panels for disorders and mutations. Sketching the appearance of diagnostic test pages.
![genotek site process 66](genotek-site-process-66.jpg)
![genotek site process 67](genotek-site-process-67.jpg)
Choosing images for covers and videos for premium tests.
![genotek site process 68](genotek-site-process-68.jpg)
Working on the main page. Trying to render the box in three.js, asking the visualizer to create a model. Uploading it into the three.js editor.
![genotek site process 69](genotek-site-process-69.gif)
Spending a lot of time to work on perspective and animation. Fighting poor performance and setting up light.
![genotek site process 70](genotek-site-process-70.jpg)
Client: Looks like a fridge. Definitely doesn’t look like a genetic test submission kit.
Coming up with other ideas to demonstrate the box in real-life size.
![genotek site process 71](genotek-site-process-71.gif)
![genotek site process 72](genotek-site-process-72.gif)
![genotek site process 73](genotek-site-process-73.gif)
![genotek site process 75](genotek-site-process-75.jpg)
![genotek site process 76](genotek-site-process-76.gif)
A story with an explosion diagram of the box wins. Expanding.
From simple 3D models, the boxes become beautiful renders on the website pages only to disappear entirely later by the client’s request.
![genotek site process 78](genotek-site-process-78.gif)
![genotek site process 79](genotek-site-process-79.jpg)
![genotek site process 80](genotek-site-process-80.jpg)
Meanwhile, the technologists are busy building the website.
![genotek site process 81](genotek-site-process-81.jpg)
Making a couple of dozen of final brush strokes and launching the website.