a UI/UX Designer based in CANADA 🇨🇦
I AM Available for full-time, freelance or remote work opportunities.
Feel free to reach out.
‍
My career in design started in 2009 as I worked for several production compagnies. I make logos, posters, design apps and websites.
My goal is to empower people with delightful experience and better relationships. I’m striving to create emotional connections through design.
well done !
Case study of THis very website!
The cradle of imagination
The building of the site was initially planned to be a walk in the park. It was to be a mere platform for my works, plain and unsophisticated. The goal was to show off my works and not waste any time in developing the website. That makes even more sense if you are a great web developer and have the proper tools to make it happen.
‍
Having said that... I gave it a second thought and realized the website was just as relevant as its content and couldn’t be left out of the equation. It was going to be the first thing users will see. Thus, it had to be thought out as a grand display for the great projects I  make. And as such, it should be the epitomie of my abilities.
‍
Well, well well... my skills as a web developer are limited to HTML 101. It would literrally take me months to fiddle around just to understand what I'm doing. The creation of the website turned out to be nothing but a pain from the get go.
‍
In other terms, this project highly qualifies as a substantial challenge.
Challenge:
Even though, my knowledge is scarce I knew that my design skills would help me out. I held on to three essential rules. The website should be :
‍
-Â Â Â Â Â Creative
-Â Â Â Â Â Innovative
-Â Â Â Â Â User Friendly. Â
‍
To go along with this idea I decided to up the ante by adding my personality to the process.
If my own website was not sprayed with a little magic , it wouldn't really represent me quite well. Hence, those three more criteria to consider.
‍
- Â Â Â Â Â Original
- Â Â Â Â Â Playful
-Â Â Â Â Â rememberedÂ
‍
I knew it was going to be a bumpy ride but I had to create my own website even if it meant it won't be as perfect as I imagined it. I started drawing, sketching, laying out some possible page structures and made some intense reseach.
The challenge got spiced up and deserved some solid UX knowledge to hit the nail on the head.
DESIGN STYLE:
It was important to achieve a sense of singularity. Breaking the mold was the path to follow. And if I couldn't rely on my developer abilities I knew for sure my design tools would never let me down.
I used all the button interactions as a way to experiment and show off a new learned skill.
Also, I didn't want to send the user to another page whenever a button was clicked. I wanted to give the illusion of accessing different pages when there really was only one.
‍
Here are three of the main visual effects that sets the tone of the whole website:
The mask:
I came across a really sleek design that piqued my curiosity. The designer used a simple mask effect and made a website out of it. You can take a look here on Webflow.
I thought there must have been some magic under the hood. I figured Javascript and a plethora of dependencies were involved. Meaning… out of reach. After a minute of despondency, moxie took over me. I tweaked long weeks on end and finally recreated the Mask effect with sheer embedded HTML/CSS.
The Slide:
Sliding a page has this very self-satisfying feeling as though performing a magic trick. It wows me every time. When I was little I even suspected David Copperfiled was behind its creation... After all, sliding a page is like sliding a secret compartment of the browser window.
I decided to be self-indulgent and thought It could adequately be used for the playroom button effect.
The Abyss:
Depth has this great value of bringing up perspective and directing focus on several level. The idea of using depth as a means to allude to the core of the website was an interesting metaphor to consider. I envisioned this idea as a behind-the-scenes effect embodying a sacred gateway to a mise-en-abyme.
Design is diverse and could easily be the flagship for multiplicity. I reckoned UX and UI were two sides of the same coin and could have a role to play here.
I sleuthed the internet for inspiration. I went down the usual rabbit hole and came across the most god-like inaccessible thing I had ever seen. The three.js file.
It allows you to contemplate different worlds of unworldly possibilities. The particles were just mind-blowing and I just knew it had to be implemented one way or another.
The task at hand was perceived as herculean… and it ended up being herculean. Any attempt would fail. I was doomed the moment I laid eyes on it.
Eventually, Time, reluctantly gave me a hand and helped me see the light at the end of the tunnel.
The Look and Feel:
Throughout the building of the website, the user journey is to be accounted for in order to ensure a pleasant ride.  Many tools can be used but few could spontaneously make someone grin. The full idea was to convey happiness, comfort and magic. All at once. I knew the picture of a crib would naturally speak to us all and bring forth a time when nothing was impossible. Our fantasy world is unique, personal and full of a positive energy. I wanted to recreate this peaceful haven with magical floating balls. And from these very balls, it would be able to peek into my projects.
Colors were to be soft and welcoming. Pastel colors were the most appropriate. After experimenting with different shades, two main colors stood out:
‍
‍
The font selected are PLUMP and SNIGLET. Both are sans serif and are rounded. They are nice andeasy to read.
‍
-PLUMPÂ : Titles, Headings, 4vw
-SNIGLET: regular, 3vw.
Conclusion:
The importance of details is substantial to successfully and seamlessly achieve your goal.
I don’t want to dissect each detail one by one as those are the powerful glue that holds the fortress together. Nobody really wants to spoil the magic, right?
I leave you to your imagination to find out why there’s a knitting button or a reference to a famous anime.  Easter eggs are at every corner….
‍
All the goals have been met. My challenge is a success. The final result is close to what I designed originally. The website goes beyond the conventional rules and that's what i aimed for. If you don't allow yourself to go wild on your own projects , where do you experiment? Few chances are that your client will let you go crazy on their project.Â
‍
I hope the whole digital choreography was pleasant to your eyes and has given you ideas for your futur projects.Â
‍
Keep challenging yourself to reach the impossible !
Contact form
Contact form
BRIEF...
Peanut Agency is a talent agency dedicated to child actors and models. As of 2020, the company decided to freshen up their website and boost their reputation.
‍
THE PROBLEM:
The website was made about ten years ago. The homepage showed an unresponsive background video that disappeared a second after the page loaded and was overwhelmed by information.
A severely unnecessary, oversized information on the homepage was an unpleasant visual experience.
Also, the overall colors were not welcoming and two buttons on the navigation bar were confusing as they both pointed to a contact form page: “Application” and “Contact”.
Â
The research that followed confirmed those pain points. We conducted tests with people between the age of 30 – 50 to narrow down the pain points.
PA’s target market includes actors’ and models’ parents as well as professionals from the entertainment industry:
4/10Â tested felt displeased that fee information was one of the first information to welcome them to the site.
‍
7/10 were not happy that the two tabs in the navigation bar weren’t combined into one page. Page divisions forced them to navigate through extra steps when seeking more information about what the company had to offer.
‍
10/10 Â described their overall experience as static and unsatisfying. Words such as "uninviting atmosphere" or "confusing" were uttered.
‍
CHALLENGE:
-Rebuilt of the landing page.
-Remove any “warning” information or any superfluous indications.
-Showcase talents in a visually pleasing manner.
-Design an interface which reflected the company’s spirit.
DESIGN PROCESS:
We began putting our ideas of a new layout on paper keeping in mind the quality of the user flow.
In order to be the most welcoming,the homepage had to as pure and clear as possible. The idea of keeping a video in the background was maintained but everything around had to disappear.
The first element to be removed was the black navigation bar. Only two tabs were left on the top right corner of the screen: “About” and “Contact”. Two more options were given to the user at the bottom of the screen. “Models” and“Actors”. Those were initially on the top but placing them at the bottom give them more importance. The user feels like they have only two main choices and can, thus, easily see what they are looking for.
‍
The video in the background is now a substantial focus and takes the entire screen. PA can show reels and shines more lights on their best talents. The space on the screen is not even blocked by the buttons as those have a reduced opacity.
‍
‍
We printed our wireframes to guerilla test our approach. Each person was given certain tasks to complete and asked to narrate their process as they browsed through the website.
‍
The instructed scenario was that of a mother of a talented child who is looking for a talent agency that will understand herdemands.
‍
Some participants wished the “Actors” and “Models” tabs could allow the homepage to extend and show all the pictures. Some others wanted to be able to click on pictures to see the talent’s full information.
‍
As a result, we took note of these suggestions to improve the other pages.
DESIGN STYLE:
The logo in itself was fine but we adjusted the shades so it won’t be a clear contrast with the rest of the homepage. The colors of the logo ended up being selected to make the whole website uniform. Indeed, only two main colors were chosen.
‍
‍
Revamping a website means also rethinking the fonts. The initial fonts were plain and common. A handwriting style was selected to give a more natural and genuine feeling. Â As for the titles, it was important that they should follow the see-through concept. The Colonna font illustrates perfectly this idea by offering a visual peak at the background through the cracks of the letters themselves.
Â
- Â Gabriola, regular, 45px.
-Â Â Colonna MT , regular, 125px.
The homepage is extendable. If the user clicks on the bottom buttons the talent section appears. The user can scroll down from the homepage to select his talent. The pictures got enlarged to take all the available space. And on clicking, an overlay pops up describing the talent. All the pages are uniformed and welcoming. The warning about the fees have been gathered up on the contact page where they belong. The user can take his time going through the information and fill up the form with full consent.The user flow has never been better and the general feeling of the website has never been so positively loaded.
Here's the result:
.gif)
Contact form
BRIEF...
Electricians used to get most of their business from listings in phone books and referrals from happy customers, but that’s no longer the case. Many people today use the Internet as their primary source of information, so a strong web presence is essential for any business owner.
‍
An electrician reached out to me to build up a website for him. He wanted a: “simple design”.
To be familiar with the required specificities of such website I scanned the internet looking for electrician websites. Unbeknownst to me, several of them harbored great UI designs. As a matter of fact, the last decade saw a tremendous amount of digitization, with every domain of service. Â It made sense electricians had to follow the stream. In my research, I collected some information:
CHALLENGES:
The website had to be relatively straightforward. There was no hard limit on the age, gender or economic background of the target audience. Everybody needs an electrician.
‍
Someone who is looking for a good electrician will certainly look at the “about” page to get more details on who they are calling. But what the future client really wants is to be able to contact an electrician fast enough.
DESIGN STYLES:
One of the most symbolic items to represent an electrician is an electric circuit. When I was looking for illustrations, I realized the colors that stood out were always the same ones. Blue green and brown. I used the color picker to find out the exact hues.
HIGH FIDELITY FRAMES:
Each and every layout decision is taken with great care. The screens are modeled to be uncluttered as they provide a better user experience. Giving enough breathing room for the elements in the UI is all the more important here as the user's main focus must be the contact info.
DETAILS:
Albeit an electrician does not own a business which has a stock of items to sell, users are accustomed to paying online and ready to do so for any service. I couldn’t find one electrician website offering this possibility. So I thought it was a niche to consider. I designed a page dedicated to an online payment.
TO DIGRESS:
The challenge was to find the appropriate payment structure that would benefit both the user and the electrician. I had to be devoid of any complicated elements.
The electrician already had assigned numbers for his invoices so the smoothest way to go was to find the right software that would support a sequential numbering system and allow an online payment.
The regular system used by most companies is the Automated Clearing House (ACH) network to transfer funds between banks. The customer authentication is protected by the serial number provided by the electrician.
LOGO:
The logo idea came right from the start as every business should have a logo of their own
However, as it was not a request from the client, I just left it on the side up until I finished my work.
At this moment I thought it was probably important for the client to realize a good logo aids in building a physiological connection and could attract and keep more customers. Thus, I started creating some samples and handed them over. The client ended up choosing the logo he felt more related to.
CONCLUSION:
It was an  interesting journey from the initial idea to the final prototype of the website. At the end of the process, I was able to incorporate all of the initial goals in the design while keeping the interface minimal and easy to use.
‍
In order to get better leads I recommended to add some content marketing. They are extremely valuable and almost common on any website now.
‍
No matter what you share, your content should be engaging to your audience. After reading it, they shouldknow something new about your electrical business, something they may need, or have simply been entertained by an infographic or other content related to your industry. For instance, blogs as they create a steady stream of new content which Google loves. This can help your search engine rankings!
There’s always room for improvement, right? Maybe this recommendation will be a subject for another project.
‍
Stay tuned!
‍
Contact form
Contact form