top of page
The challenge
The Digilifeap.com website had remained stagnant for years, with several known usability issues affecting visitors' engagement. As a company without a website, I set out to establish Digilifeap.com and build its online presence from the ground up.
As a first-time WordPress user, I faced several challenges, from learning the platform's interface to customizing the design and functionality to fit Digilifeap.com's needs. Navigating themes, plugins, and site structure required a learning curve, but it was a valuable experience in building a strong online presence from the ground up.
My goal was to enhance the user experience, refresh the visual identity, and optimize the site to attract more clients for video and film production services. Another challenge was working within the existing framework, as a full back-end overhaul wasn't an option.
A user-flow approach
I began the project by creating a user-flow diagram to map out the ideal journey for visitors on the site. This helped me visualize the structure and user experience before moving into the sketching phase. I also collaborated closely with the client to understand how he wanted users to perceive the brand and interact with the website. This input guided the design direction and ensured the final product aligned with his vision.
-
Established a clear user journey
-
Identified key touch-points
-
Mapped user intentions
-
Prioritized simplicity and clarity
-
Collaborated with the client
-
Ensured flexibility in the flow
I began by mapping out how users would naturally interact with the site, from their first visit to taking a desired action, whether exploring the portfolio or reaching out via the contact form. This ensured the experience felt intuitive and purposeful.
I outlined the essential pages and interactions, such as the homepage, services, about, and contact, that would guide users through the site in a meaningful and efficient way.
The user-flow served as a foundation for wireframes, sketches, and visual design decisions. After blocking out the basic user-flow, to keep me consistent with creating pages, I proceeded to design the header and the landing page to give me time to create each product page. This helped in the thought process behind each module design.
Hero banner
The hero banner was where we attracted the audience, so it definitely had to start the show through video modules and micro-animations. To create a compelling first impression for Digilifeap.com, I designed a dynamic hero banner featuring video and subtle micro-animations on key buttons. The video serves as an immediate visual storytelling element, capturing the brand's energy and showcasing its work in motion. The micro-animations enhancer user engagement by providing intuitive feedback and drawing attention to important calls to action. Together, these elements establish a modern immersive experience that reflects the creative nature of the brand while encouraging users to explore further.
The hero banner for Digilifeap.com was designed to span the full width of the screen, immediately drawing users in with striking visuals from featured video content and brand work. While retaining the rotating carousel format to accommodate existing media, I streamlined the experience by reducing the number of slides and adjusting the animation timing. This allowed the content to breathe, minimizing distractions and creating a more focused, engaging introduction to the site.
Showcasing work
To effectively showcase Digilifeap.com's portfolio's depth and quality, I prioritized a visual-first approach that placed their video work at the forefront. Given the brand's focus on film and storytelling, it was essential to highlight this content in a way that felt immersive yet easy to navigate.
Feature Film
We bring cinematic storytelling to life through compelling narratives and high-quality production values.
Television
From episodic content to broadcast-ready segments, our work is tailored for impact on the small screen.
Commercial
We create visually striking and message-driven commercials that connect brands with their audiences.
Corporate Video
Our corporate videos are crafted to communicate brand identity, values, and services with clarity and style.
Documentary
We tell stories with authenticity, capturing moments that inform, inspire, and engage viewers.
I curated and organized the videos into a clean, modular layout that emphasized variety while maintaining a cohesive viewing experience. This approach not only celebrates the brand's creative range but also allows users to engage directly with the work, offering a more authentic and compelling introduction to what Digilifeap.com offers.
To truly highlight Digilifeap.com's rich body of video work, I designed a sleek, interactive portfolio carousel as the centerpiece of the "Our work" section. With video being the core of their creative output, it was important to present the portfolio in a way that felt both cinematic and accessible. The carousel format allowed for a curated, scrollable showcase that balances storytelling with usability, and visitors can easily browse through projects without feeling overwhelmed. I incorporated smooth transitions, hover effects, and preview thumbnails to encourage exploration while keeping the interface clean and intuitive. The result is a dynamic portfolio that invites users to engage with the content whie leaving a lasting impression of the brand's creative capabilities.
About us hero
I incorporated subtle micro-motion on the "About us" hero page to add a sense of depth and interactivity. These animations guide the viewer's attention and create a smoother, more engaging user experience without overwhelming the content
The goal was to create a sense of movement and energy that complements the storytelling without distracting from the content. These micro-interactions not only enhance usability but also add a layer of sophistication that reflects the creative personality behind the site.
Client partners
To highlight credibility and industry reach, I designed a clean, scrolled carousel showcasing the brands and companies Digilifeap.com has collaborated with. This section adds social proof while maintaining a minimalist aesthetic that complements the overall design. It's a subtle yet impactful way to reinforce trust and professionalism.
Contact page
The "Contact page" was designed to be straightforward, welcoming, and easy to navigate servicing as a direct bridge between the brand and its audience. I aimed to remove any friction by keeping the layout clean, with only the essential fields needed to start a conversation. Clear headings, intuitive form placement, and consistent visual design help build trust and encourage outreach. Wether a potential client, collaborator, or curious visitor, the goal was to make it as simple as possible for users to take that next step and connect.
Welcoming new opportunities
With the design in place, we stepped back and felt confident that Digilifeap.com now reflected the brand's creativity, professionalism, and cinematic energy. The refreshed experience not only showcased the work more powerfully but also created space for new collaborations and future growth. What started as a simple need for a digital presence evolved into a bold, strategic platform, and we're just getting started.
Project overview
Title: Website design (RWD) Client: Digilifeap.com
Industry: Film & Video Duration: October 2023 - February 2024
Role(s): UX/UI designer, Front-end developer, Content strategist, Product Manager, Analytics specialist, QA tester
Tool(s): Figma, Adobe Creative Suite, WordPress
​
bottom of page