Scroll
work sample
Veedro Films
Company Background
Veedro Films, situated in São Paulo, Brazil, crafts captivating narratives for commercial and creative clients, spanning from award-winning documentaries to promotional videos for startups.
Challenge
Renowned as documentarians, Veedro Films now extends their expertise to industrial/commercial clients; however, their outdated website failed to cater to the needs of their expanding client base. The navigation was unclear, cramped, and directed traffic primarily to documentary resources.
Goal
The aim was to develop a unified website that effectively marketed both of Veedro's services while bridging the gap between the artistic nature of documentary clients and corporate/commercial clients. By portraying their commercial work through a narrative lens, we aimed to boost traffic and revenue for Veedro's business.
Original Layout
Inconsistent information architecture.
Muted color palette lacked a strong CTA slowing interactivity.
Unclear navigation funneled traffic towards documentary
resources.
Website served as a second thought for word-of-mouth clients.
Creative visuals were artistic, but didn’t encourage functionality.
Process
Over four weeks the redesign began with in-depth research to grasp both the client's needs and the diverse target audience's preferences. This research led to the proposal and testing of multiple unique design directions with users. By carefully evaluating client feedback and user responses, we refined our creative approach, resulting in the development of user-centric wireframes for improved UX and high-fidelity screens that elevated the UI. The outcome was a seamless design that not only prioritized user satisfaction but also aligned with the client's objectives.
Research
To understand the divergent users of Veedro Films and their needs, we conducted a user persona workshop with our client. By envisioning potential users, their goals, needs, and frustrations, we aimed to optimize our designs for them. Subsequent research underscored a significant gap in catering to Veedro's industrial and commercial clientele. To better understand their needs we subsequently performed a competitive analysis of industrial competitors in São Paulo, revealing a noteworthy trend - successful companies prominently featured a distinct, complementary accent color, a departure from Veedro's muted branding palette.
Concept
The initial design concept emerged through the creation of mood boards informing the design of subsequent style tiles, which were then subjected to user desirability testing. These design elements were shaped by the insights derived from the competitive analysis, taking into account the client's preferences. Desirability testing uncovered a strong resonance among users for simplicity and authenticity. Users favored a layout with fewer elements presented in a grid format and responded positively to images featuring people, adding a realistic dimension to the design.
Moodboard A
MINIMAL & MODERN
“It’s beautiful, a bit more sophisticated, and fresh in terms of layout.”
Moodboard B
WARM & FILMOGRAPHIC
"The movement, the action, It’s seductive. I wish I could see more."
Style Tile A
BOLD & SIMPLE
“I like this. Clean, professional, tech savvy. That’s what they (Veedro) do.”
Style Tile B
APPROACHABLE & REAL
“It’s more colorful so it has more personality.”
Desirability Test Insights
+ Warm tones are relatable
+ A simple, grid layout is best understood
+ Authenticity is recognized through images of candid people
+Keeping to one accent color cuts down on visual noise
+ Serif fonts aren't preferred
+ A simple, grid layout is best understood
+ Authenticity is recognized through images of candid people
+Keeping to one accent color cuts down on visual noise
+ Serif fonts aren't preferred
Wireframes
Navigating Diverse User Needs
At the heart of this design challenge lay Veedro's dual user groups: those seeking narrative-based documentaries and commercial-industrial users. Balancing these distinct needs was critical for the company's success. To address this, I conducted UX testing to determine whether these client needs truly necessitated separate landing pages or if alternative solutions existed. Card sorting activities and wireframe testing were employed to explore this question.
Narrative
OR
Industrial
Card Sorting Information Architecture
Focused on usability, we conducted a card sorting activity that provided insights into what information users wanted to see prioritized on the site and whether users found the current blocks of information and labels intuitive to understand. This usability data guided us in creating low-fidelity wireframes that included the most important information users wanted on the site, organized into categories that they found intuitive and natural.
TAKEAWAYS
User feedback revealed that 80% of users preferred a single "portfolio" for both documentary and commercial work.
The top priority, on average, for users was the portfolio.
Initial Wireframes
I crafted wireframes based on user feedback from mood board testing, implementing a grid layout for images and text to prioritize simplicity. I explored offering users a choice between Narrative and Industrial work on the homepage, per the client's suggestion. However, user feedback indicated confusion, and card sorting activities favored a streamlined approach. Users stressed the significance of evaluating all work, irrespective of background. Therefore, I concentrated on clear labels and avoided rigidly categorizing work types, ensuring easy access for clients from diverse fields.
Labeling and Layout
Through the card sorting activity and the wireframe testing, I streamlined Veedro's portfolio into three categories: Documentaries, Aerial/Drone, and Commercial. The addition of "Aerial/Drone" highlighted a unique skill for Veedro. Users' input also helped to refine the Services page, aligning it with the portfolio categories for consistency and ease of use. The goal was to ensure visitors understand Veedro's offerings and how the showcased work fits into those service categories.
Prototype
The original site's layout, labeling, and design choices lacked clarity and hierarchy. In response, I created a minimal, clean, and modern site that aligned with the client's preferences.
Portfolio
Video Player
Services
Design Choices
To highlight Veedro's imagery and film work, I minimized the amount of text as this was validated by user feedback. While staying true to Veedro's brand colors, I slightly increased the intensity and brightness of a blue tone based on the importance of accent colors in appealing to commercial clients, as observed during our competitive analysis. This also increased accessibility. I opted for sentence case in Futura (for titles) and Helvetica (for body text) to strike a balance between approachability and a modern, geometric, and clean style.
For an in-depth exploration of element usage, refer to the
Design System
Launch
Bridging Design to Reality
I developed a responsive website (including mobile design) that seamlessly met both the client's specifications and the varied needs of the users. With the design approved for implementation, I meticulously fine-tuned every detail and facilitated the connection between the client and a developer to bring the project to life. For an in-depth demonstration of the site's functionality, please view my video walkthroughs.
Walkthrough
User Review
Final Thoughts
Key Takeaways
Prioritize Visual Simplicity.
In design , prioritize visual simplicity to effectively convey information without overwhelming users. Emphasize essential details to guide users through the content or interface.
Utilize Repeated Patterns.
Employ consistent layout patterns and labeling to reduce cognitive friction for users when organizing and comprehending new information.
In design , prioritize visual simplicity to effectively convey information without overwhelming users. Emphasize essential details to guide users through the content or interface.
Utilize Repeated Patterns.
Employ consistent layout patterns and labeling to reduce cognitive friction for users when organizing and comprehending new information.
Understanding Cross-Cultural Influence.
During user interviews, I observed how different cultures influence decision-making. Even with a shared language, communication of unexpected decisions could still be unclear. To enhance communication in such scenarios, I discovered the importance of continuous questioning when user reasoning was ambiguous.
Next Steps & Considerations
Complete Mobile Mockup Testing.
Due to project time constraints, full testing of the mobile mockup was not possible. Future development should prioritize thorough mobile testing.
User Feedback on Video Support.
As video support becomes available in the prototypes, it is essential to gather user feedback on aspects like video placement, autoplay preferences, and presentation to enhance the user experience.
Performance Evaluation.
Regularly touch base with Veedro to assess any potential improvements in acquisition statistics since the launch of the new site, ensuring that the site aligns with their evolving goals and objectives.
Due to project time constraints, full testing of the mobile mockup was not possible. Future development should prioritize thorough mobile testing.
User Feedback on Video Support.
As video support becomes available in the prototypes, it is essential to gather user feedback on aspects like video placement, autoplay preferences, and presentation to enhance the user experience.
Performance Evaluation.
Regularly touch base with Veedro to assess any potential improvements in acquisition statistics since the launch of the new site, ensuring that the site aligns with their evolving goals and objectives.
More Projects
© 2024 Susannah Bayliss. All rights reserved.
