"The whole customer journey of the Meepl app and the Meepl platform got a fresh look and feel. The new illustrations and animations support the user throughout the whole customer journey maximizing the user experience. It was a great pleasure to work with Lydia! We would at any time recommend Lydia to potential clients and would hire her again for similar projects."
- René Stampfl, VP EMEA
In August 2019 Fision Technologies approached me looking for 4 illustrations and 5 animations to feature on their app Meepl; a body-scan service that used photographs of the user to create a set of measurements that can be imported into clothing websites to create custom clothing, size recommendations, and digital visualisations of clothing on a sized model.
Fision were looking for a fashionable and friendly mascot which would feature throughout the visuals to guide and entertain the user throughout the process.
For this I created Nora. Nora had to have two design models to illustrate the importance of changing into skin-tight clothes for the photo-taking process.
![dribble.png](https://static.wixstatic.com/media/4dd2d3_3aa123d80e354d798b2262a83c76a664~mv2_d_1600_1200_s_2.png/v1/crop/x_0,y_115,w_1600,h_955/fill/w_738,h_437,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/dribble.png)
Nora's first job was to appear as the app opened, and show the user that two photographs are needed to create the body scan, and show the app is easy and fun to use.
![meepl website.png](https://static.wixstatic.com/media/4dd2d3_6e32d0266208457eb2149b7c5b8e9938~mv2.png/v1/crop/x_0,y_3,w_1916,h_1336/fill/w_729,h_508,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/meepl%20website.png)
The next stage of the process had to illustrate the importance of wearing skin-tight clothing while taking body-scan photographs. For this, we arrived at the motion of Nora clicking her fingers, as each piece of her outfit changed.
![Meepl Snap](https://static.wixstatic.com/media/4dd2d3_949fc1a40ec645f4a25f6de3d17a5bad~mv2.gif)
![meep2.jpg](https://static.wixstatic.com/media/4dd2d3_341acc5e11504fdf99991a35e23178bf~mv2.jpg/v1/fill/w_255,h_428,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/meep2.jpg)
The third page of the app had to show that the body-scan photos can be taken alone or with a friend/helper. This animation was broken into two scenes. One of Nora placing her smartphone against a mug on a hip-height table before posing. The second scene showed a friend entering with a smartphone to photograph her.
![#3.png](https://static.wixstatic.com/media/4dd2d3_25e7373855ea4e1aa95c0293e4adcc9c~mv2.png/v1/fill/w_712,h_334,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/%233.png)
The timeline of this project was split into two halves; the rough artwork and storyboarding phase and the final artwork phase. For each piece of final artwork a rough or storyboard was created and tweaked.
![Screenshot_20200115-203025.jpg](https://static.wixstatic.com/media/4dd2d3_9155ef5d470c4fcd9996547501d4fe30~mv2.jpg/v1/crop/x_0,y_65,w_1080,h_1845/fill/w_240,h_410,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Screenshot_20200115-203025.jpg)
The next animation showed the user how to take the photos. To create a body-scan, the photos have to be taken in a very specific way. The scan works better if the background is a bare wall. The feet have to be apart and hands in fists as the user faces the camera, and when the user turns, the legs have to be together and the hands flat against the sides. The animation had to be designed to show all this clearly.
![#4.png](https://static.wixstatic.com/media/4dd2d3_b4ad7fca8f8a41558fa72f64f1f815d7~mv2.png/v1/crop/x_0,y_160,w_5094,h_3728/fill/w_734,h_537,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/%234.png)
![dribbbbbbbbbb.gif](https://static.wixstatic.com/media/4dd2d3_b43f5ae4ab0a405ea8e0e8f9027ec5c0~mv2.gif)
![Screenshot_20200115-211510.jpg](https://static.wixstatic.com/media/4dd2d3_63f4d862eaf247ee83ba9e5993fced87~mv2.jpg/v1/crop/x_0,y_72,w_1080,h_1846/fill/w_268,h_458,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Screenshot_20200115-211510.jpg)
The purpose of the next animation is to entertain the user while the app does it magic and converts the body-scan photos into a personal 'Meepl' character and measurements.
![Screenshot_20200115-205014.jpg](https://static.wixstatic.com/media/4dd2d3_0b939be602854cab8dc9a3d8dee00caf~mv2.jpg/v1/crop/x_0,y_68,w_1080,h_1846/fill/w_256,h_438,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Screenshot_20200115-205014.jpg)
![dribbbbejvbfdkvj.gif](https://static.wixstatic.com/media/4dd2d3_ccf65a50f0fe4389a93861082bbcda57~mv2.gif)
The final step of the process was showing the user their Meepl with measurements. For this, I created two different models, a male and female. This is my own meepl that I made by using the app.
![Screenshot_20191024-183715.jpg](https://static.wixstatic.com/media/4dd2d3_0f71365ac0fd4b73bf014c1b3a419030~mv2.jpg/v1/crop/x_0,y_79,w_1080,h_1820/fill/w_254,h_428,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/Screenshot_20191024-183715.jpg)
![image2 (3).png](https://static.wixstatic.com/media/4dd2d3_c024a5a53272401d8c7387cf942fe48a~mv2.png/v1/fill/w_471,h_428,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/image2%20(3).png)
I also had to create an error illustration to appear if, for some reason, the body-scan failed to create a set of usable measurements. This image had to stay light and humourous to keep the user inclined to retry the process.
![1.png](https://static.wixstatic.com/media/4dd2d3_8daa18fbef88485f805dabc25ced7aac~mv2.png/v1/fill/w_239,h_396,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/1.png)
![image1 (6).png](https://static.wixstatic.com/media/4dd2d3_9491858fb09a4e3ea688205b7705feb4~mv2.png/v1/fill/w_455,h_396,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/image1%20(6).png)
The final animation I made was an idle/loading animation to play on the Meepl desktop while the app is working.
![image2 (4).png](https://static.wixstatic.com/media/4dd2d3_9f8bd3541c4043c6afbddefccc83a08a~mv2.png/v1/fill/w_707,h_296,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/image2%20(4).png)
![Comp-111.gif](https://static.wixstatic.com/media/4dd2d3_f1b4bc332f9b43c3a08c569338d81dc1~mv2.gif)
Overall I thoroughly enjoyed working with Meepl to give their app an updated series of visuals. If you're looking for an illustrator and animator for your own project, please visit my contact form to book a call