Personal Anecdote
Out of comfort zone, P0 project, dealing with developers
Normally, I work with illustrations and storyboards, so working with images was a new challenge for me. Added to this challenge was having to collaborate entirely with developers and engineers to understand their requirements and communicate my design solutions. Furthermore, since this is a P0 project happening right before the holidays will I be able to deliver the assets on time?
How the images are sourced?
Given the urgency of the project and the need for a diverse array of subjects, objects, and themes, we have opted to utilize stock photography to fulfill the requirements effectively.
Research, analysis and lots of learning
What story should the website images tell?
The images need to educate developers and students about the various capabilities of Mediapipe and assist them in getting started. Mediapipe aims to present itself as a refined, consistent, and user-friendly brand. They desire the target audience (developers and students) to experience the strength of the Mediapipe framework. Consequently, they prefer images that are simple, clean, and incorporate ample white space.
Challenge: Some concepts were hard to understand, others tricky to represent visually
To choose suitable images, it was important to understand the diverse Machine Learning(ML) solutions and terminology. Some concepts proved challenging to grasp, while others posed difficulties in visual representation.
The ML solutions were categorized into three types:
vision, text-based, and audio-based.
vision, text-based, and audio-based.
How did I handle? Given the tight deadline, I asked the team for visual examples of each solution type. This streamlined communication, minimizing back-and-forth exchanges and reducing the need for multiple iterations.
Competitor analysis
I also conducted research on competitor websites such as Apple and Google to analyze how they presented overlays and to gain insights into the storytelling techniques employed by industry frontrunners. I recognized the importance of diversity and inclusivity in image selection.
Summarizing the research findings, the solution is distilled into these core principles
1. Consistency:
All chosen images should share a cohesive look and feel, including similar colors and lighting for a unified appearance.
2. Focus:
As overlays are common across most Machine Learning (ML) solutions ensure that the primary subject is in focus.
3. Diversity and Inclusivity:
When selecting images, prioritize representation from various categories to reflect diversity.
4. Compatibility with ML Models:
It's crucial to select images recognizable by the ML models, understanding their capabilities.
5. Bold and Legible Overlays:
The text, line color, and stroke thickness for overlays should be prominent and easily readable.
All chosen images should share a cohesive look and feel, including similar colors and lighting for a unified appearance.
2. Focus:
As overlays are common across most Machine Learning (ML) solutions ensure that the primary subject is in focus.
3. Diversity and Inclusivity:
When selecting images, prioritize representation from various categories to reflect diversity.
4. Compatibility with ML Models:
It's crucial to select images recognizable by the ML models, understanding their capabilities.
5. Bold and Legible Overlays:
The text, line color, and stroke thickness for overlays should be prominent and easily readable.
Concept development
Creating a color palette: The existing website didn't have a consistent branding so I along with our senior designer Raphael researched the website an created a palette with existing and few contrasting colors.
Establishing the image style: Based on the research, I developed a image style for overlays and text boxes.
Design Implementation
Hero images: The hero image serves as the initial focal point for visitors upon landing on the website. This image should immediately capture the viewer's attention while visually showcasing the value proposition and capabilities of Mediapipe. To achieve this, I created an image illustrating the diverse capabilities of Mediapipe solutions, like text, audio, and visual elements.
Mediapipe index hero image
Mediapipe solutions hero image
ML Solutions: For each ML solution, I curated a set of sample images and forwarded them to the stakeholders, who then chose one or two from the selection. I then edited the images in photoshop to give a consistent look and feel.
Vision and audio examples
Image segmentation
Text examples: For text solutions, I encountered difficulty in finding suitable stock photos that effectively conveyed the concept. So, I created illustrations based on the solution.
Final deliverable was late
After finalizing the images when it was time to swap the existing watermarked image with high resolution original images I came to know that the approval to purchase images will take more than a day. I promised to deliver the final deliverable the next day but this became unachievable. This resulted in inconvenience as the developer team prepared for launch without the final images.
I promptly communicated with the team regarding the situation and apologized for the delay. The team understood our concern and decided to wait for a day or two until we get the final images. I tried my level best to speed up the process by gently nudging the team constantly and making them understand the weight of the situation. Finally we were able to get the images purchased at midnight and I was able to handoff everything by early morning.
I used Adobe Stock for procuring images.
Outcomes and Impact
As the redesigned website went live the impact was immediate and user engagement soared. The stakeholders were very happy with the outcome and reached out to our team again after six months to update the website with a few more solutions. Having a style guide and template in place facilitated the swift delivery of additional assets within a week.
These images are also used in their internal marketing decks and social media.
These images are also used in their internal marketing decks and social media.
Learnings
1. First and foremost I gained experience collaborating with cross functional teams. I worked with developers and learnt a lot about Machine learning concepts and solutions.
2. This was a P0 project in both the first and second phase. Hence I aimed for small wins and maintained open communication with the client helped to finish the project on time.
3. Since this project was initiated just before the holiday season, several team members including the project manager went on vacation. I assumed responsibility for project coordination and communicating with the clients to ensure timely delivery of P0 assets.
