Project
Google ✦ Qalam

Role
UX + UI Designer

Delivery
Responsive web app

Year
2018

Awards
FWA of the day -
Mobile + Desktop
The FWA →

Team
Richard Fenn – Art Director
Rosie West – Producer
Andre Le Masurier – Creative director

Every year millions of people all over the world celebrate the month of Ramadan. During this period, friends and family send each other messages of love and thanks.

Ramadan and Eid greeting cards are the top trending searches before, during and after Ramadan. Queries such as “How to wish someone a happy Ramadan” and “How to make an Eid greeting card” are extremely common.

We also discovered a high volume of users used Image Search terms such as “Ramadan Kareem” then copying and pasting that image and sending it via WhatsApp. We saw this as an opportunity to help people create their own beautiful, personalised messages to share easily during Ramadan.

Collaborating with 9 internationally renowned calligraphers and typography artists, we created hundreds of unique greetings cards in Tilt Brush, Google’s 3D virtual reality art tool.

We captured the essence of this ancient and traditional art in a truly modern, innovative and shareable way through a responsive web app.

Named after the Arabic word for a calligraphy brush, Qalam was created.

After gathering insight from our users we sketched and made quick prototypes to develop our ideas.

I created in depth flows and wireframes to figure out the user journey while creating prototypes in Principle to explore the motion design. As we were going through this process the artists created their pieces in tilt brush with help from the Google brand studio team.

Qalam_Wireframes
Qalam_Render01
Qalam_Render02.png
Qalam_Render05
Qalam_Render03
Qalam_Render04
Qalam_Render07
Qalam_Render06

We created a simple, elegant interface that compliments the artists work.

The bespoke art pieces were then incorporated into a responsive web app where users can easily personalise and customise their own Ramadan message. Users could change the colour, animation and add thier own message of love and thanks.

Qalam-mobile01
Qalam-Mobile02
Qalam-Desktop-fronton
Qalam-Desktop+Mobile
Qalam-Desktop-moons

The web app enabled users to customise and export thousands of unique pieces of art. Users could choose between static image and looping animation formats.

Google+Qalam+Diaa+Allam+1+(1)
Google+Qalam+Lulwah+Al+Homoud+1
Google+Qalam+Rachel+Joy+Price+1
Google+Qalam+Diaa+Allam+2
Google+Qalam+Diaa+Allam+3
Google+Qalam+Rachel+Joy+Price+3
QC_Desktop+Mobile_Mockups

Take a look at some of my other projects

Meta ✦ Workplace →Website – UI design / Direction / Design system

Drivetribe →Website + App – UI design / Direction / Design system

bp ✦ Accelerate →Website – UI design + Design system

Jio ✦ Drive →Android + iOS App – UI design / Direction / Design system

View