Les Alchimistes

Profile template with synchronized data

Company
Les Alchimistes

Position
UI/Visual Designer

Tools
Figma, Google Sheet, Google Meet

Date
2023

Introduction

Les Alchimistes is a new-generation dating agency in the spirit of "slow dating", helping Parisians find love. It was founded by Laure and Jean-Philippe in 2023.

The agency's objective was to create a profile template on Figma, with the possibility of synchronizing their customers' data with this template, plus a mock-up that could be downloaded in PDF format.

The agency's target audience is heterosexual singles looking for a serious relationship, aged between 25 and 50, living in the Ile-de-France region.

My responsibilities
During this project, I had to:

  • Researching tools for data synchronization and application of concurrent dating.
  • Producing information architecture, sketches and wireframes.
  • Proposing and adjust graphic mockups.
  • Producing the most complete mockup, synchronized with website data.

Process

Meeting the customer

The first step was to:
  • Determine her objectives, budget, start date and end date.
  • Are there other freelancers working with her? Does she work alone?
  • What are her communication tools?
  • What presentation format does she prefer for her project? Does she have any presentation templates? Does she want the same profiles for men and women?
  • Would she like to include audio in the layout? a video? (pay-per-view format on Figma)
  • Does she want an explanation document? What resources does she want?

Research

Synchronization tools

My first task was to find a tool that would allow me to synchronize data with Figma. Eventually, I found the Google Sheet Sync plugin.

Competitive analysis

Analysis research - Bumble app
Analysis research - Bumble app

The customer had told me about Bumble, a dating app she really liked, especially the profile pages. I also conducted my monitoring with other dating apps like Fruitz, Tinder and Happn, as well as on social networks like Dribbble and Instagram.

Sketches

I created the first sketches with the information to be included: first name, profession, sex, age, height, city, hobbies and passions, outings, adjectives, sport, number of children, travel, vehicle, eating habits, alcohol, tobacco, religion (practicing or not).

Ideas

First ideas

The client provided me with her graphic charter, and her website also served as inspiration to keep in line with what was proposed. I downloaded the fonts, took over the colors and the finesse of the icons, to produce 2 different styles of mock-ups with a woman and a man.

First mockups of the Les Alchimistes project
First mockups of the Les Alchimistes project

Color selection
Green (#8BF6DB) and pink (#FF6161) were the main colors of her website, followed by black and white. So I wanted to bring them to the front for these two proposals. The first is the result of my inspiration and monitoring research, and the second is similar to what's presented on Bumble.

Micro user test (a vote)
Each of the proposals has good and bad points.
That's when we did some micro user testing, showing them to his teammate and other friends of his. The first proposition was most appreciated.

Problems encountered on the mockups

  • Photo sizes will be different for differents customers.
  • There will be only be 2 or 3 photos per page in different places each.
  • Create a mockup that can be adjusted to the content, regardless of the size of the photo and text.
  • Move the button to listen to audio, with auto-layout, it did not work on the image.
  • Activities, sports, outings and traveil are per line and not in paragraph blocks.
  • Activities, sports, outings and travel are too long to fit in the bubble.
  • Some content has been removed such as gender and full first name.

Test with other proposals from the chosen one
Test with other proposals from the chosen one

The most accomplished design

Once the mockup was chosen, we continued with other adjustments and finally arrived at the final mockup. Subsequently, I created a template (reusable page model), synchronized with the Google Sheet Sync plugin, to add real customer data. I made the model adjustable depending on the content.

Template of the profil page
Template of the profil page


Video of the profile sheet template

Deliverables

Design system

To guide the client, I provided her with the design system for the profile sheet which was part of the initial deliverables. The most important thing about the project is that she has the profile sheet templates in vertical and horizontal format and can modify them as she wishes.

The customer has the possibility of modifying the photo format in vertical or horizontal format. Thanks to the design system and the assets created, it can change the icons, colors or typography.

Design system
Design system

Plugins

Google Sheet Sync.

The plugin was tested before starting the project and at the end of the final mockup. Everything was connected between the model and the plugin via the #s.

PDF Compresser

It allows you to export a mockup in PDF format while reducing its volume (compression).

Iconify

It allows you to find or replace icons.

Explanation document

The documentation describes everything relating to the use of plugins, the insertion of images, the created template and the design system.

Conclusion

Summary

I had the opportunity to work on this type of subject for the first time, which was a good discovery. During this project, I was able to:

  • Synchronizing data with the Google Sheet Sync plugin.
  • Create a profile sheet template on Figma that is reusable.
  • Collaborate with the client for the success of the project.

Next step
We communicated regularly with the customer about the problems they subsequently encountered.

Ressources

Les Alchimistes : Les Alchimistes
Bumble : Bumble website

Completed projects

Android widget Somfy Protect
Mobile app
Somfy app redesign
UI Design • Feedback • Design system • Mockups
Teams
Plateform
Teams features
UX Design • User research • User test • Redesign
Site web 50 ans
Website
50 ans
UX/UI Design • Web • UX audit • Mockups • Redesign