In 2021, I was very active on the freelancing platform Codeable, where I secured this particular project. Upon initial contact, I discovered that the client made the designs on his own. Initially, I was skeptical about taking this work as I didn’t want another scope creep. However, after having a Zoom meeting with the client my skepticism turned to excitement.
Challenge
Unlike many other projects, the challenge here didn’t lie in understanding the business or user. Instead, it was a straightforward task of converting UI designs to WordPress as most of the background work had already been done by the client’s team. However, a notable technical challenge was that designs were crafted using Canva, a platform not typically associated with web design. Canva’s is not a tool for web design design, it has an interface that will build the design in slide-based PowerPoint format. It lacks the fluid height design capabilities essential for web design. Despite initial skepticism, I recognized an opportunity to leverage this unique tool and effectively incorporate the client’s vision into the development process.
Approach
My background in both UI Design and Development turns out to be very helpful to collaborate with the client. This dual expertise allowed me to effectively bridge the gap between design and coding, enabling me to comprehend and translate the Canva designs into a functional website. Understanding the client’s comfort with Canva, I made a conscious decision not to introduce new tools or workflows, so I decided to opt instead to adapt to their preferred platform.
On my end, I created a global style first, for elements such as headings, paragraphs, and lists, ensuring consistency throughout the website. Understanding the importance of web-friendly fonts, I suggested revisions to the client, which they readily accepted and implemented.
Solutions
As the client wanted to present every section of the website in 100% height, just like in Canva, I created each section of the website in a slide-by-slide format, with every scroll revealing a new section dedicated to 100% height. I also did not want to make it like a PowerPoint experience so made sure the scroll experience would stay as in the normal website world without breaking the general convention of the website world.
I incorporated animations as per the client’s precise instructions, ensuring that each interaction was executed flawlessly. The client hadn’t provided a mobile version of the design, so I took the initiative to make the website mobile-responsive. With my combined expertise in UI and coding, I navigated this task with ease. This dual background proved invaluable, enabling me to address both design and development aspects, resulting in a nice website that I am proud of.
Despite its experimental nature, the project spanned approximately a month and has gained great feedback from stakeholders. Here what client had to say about me:
Throughout the project, we engaged in numerous online meetings, totaling approximately four to five sessions. Collaborating closely with a client who possessed a keen eye for design, even if not professionally trained, was a new experience as well as challenge for me. While the website may not meet ADA compliance standards, I took the approached as an experimental endeavor with more focus on design and interactions. By embracing unconventional design approaches and tools, and working closely with the client’s vision, I was able to transform abstract concepts into a tangible, engaging website.
All the videos and photos featured on the website were captured by the client’s in-house team, leveraging their photo and video studio. This ensured that none of the content was sourced from stock footage, adding a layer of authenticity to the project. Notably, the team even traveled to Berlin to capture specific footage, showcasing their dedication and love for the design which gave me more confidence to work with them.
