Dr. Kellyann Landing Page
March 2024
While being placed under enormous time pressure, this DTC landing page was successfully delivered by creatively overcoming the problem of asset shortage and being well-prepared for steps that were yet to be executed.
Project Data
Web & UI Designer, Front End Developer
React, Bootstrap, Swiper Elements, Vite React
Photoshop, Illustrator, XD, VS Codium
Satisfy All Aesthetic and Performance Requirements While Dealing with Time Constraint
Changes in deadlines happened quite frequently while working for this brand. However, a deadline being brought forward by several weeks was extremely rare. Designing and building a landing page is never a one-main pursuit; it is heavily reliant upon other team members such as copywriters and graphic designers who are responsible for supplying components that make up a successful landing page.
As none of the critical assets was ready at the time at the time of production my primary focus as a designer and the developer became:
- Deploying the landing page in time by creatively overcoming the limited inventory of visual assets and supplemental information in delivering the necessary narrative to our users.
- Figure out a way to keep the page structure flexible enough to accommodate visual and copy assets (text, statistics, user reviews, etc.) that were yet to be delivered.
Working with Limited Asset Inventory
One of my key responsibilities as a designer and developer is to combine various components that are contributed by different members in the organization into a cohesive product. For this particular project, I initially had only three images to work with. While this is not an ideal, it nevertheless taught me a valuable lesson of being creative in getting the most out of each asset.
Working with limited number of assets made this project even more challenging.
Putting it all Together
Used Tried-and-Proven TemplateI used our tried-and-proven landing page template which most of our successful landing pages were based on. The main benefit of using a pre-existing template was that it allowed me to plug in page components as soon as they were ready. Knowing the page structure beforehand meant that I was able to keep working using placeholders in lieu of final assets.
While the page was being worked on, the art director hired a photographer in New York to shoot a few conceptual lifestyle images. These images were delivered after the page was completed and replaced the placeholder hero image right before deployment.
The main benefit of using a pre-existing template was that it allowed me to plug in page components as soon as they were ready.
Handled both Page Design and Development SimultaneouslyAs with most of the projects assigned to me, I was both in charge of designing and coding the page. In a time-crunched situation like this, the ability to transition between these two areas seamlessly always came in handy - especially for a small team like us. It prevented workflow from being stalled since it eliminated the lag caused by two different departments being interdependent to even make a small change on a page.
No Cutting CornersBeing time-crunched did not allow me to cut corners on any of the page details, especially when they were closely tied to the business-oriented objectives. As a DTC business, we always wanted to promote subscriptions over one-time purchases. And with this page, I made sure that the UI is modified to communicate the beneits of opting into subscription.
Even under enormous time pressure, we did not cut any corners in ensuring the page to perform well.
Post Production Notes
This project taught me the importance of remaining flexible to overcome obstacles creatively. The page was delivered successfully on time.