Updated outdated avatars across various account types and improved default image consistency within the app.
- Scope: Research & Consultation
- Role: Research & Concept
- Tools: Figma & Figjam
- Collaborators: Product Manager
Existing Product & Problem
Currently, we use two default images for Advertisers and Publishers, both of which are slightly outdated. One image was sized using older dimensions. Additionally, we observed that the alt text for these images reads “No Logo Logo,” which needs improvement for better accessibility.
These images are also temporary placeholders for users, intended to indicate that they haven’t uploaded their own image yet.
Process
Discovery & Research
I audited the web app to identify where profile and company images are used, and when default images are required. This included investigating any edge cases and examining how influencer profile images are retrieved and stored.
I documented the placement and sizes of these images within the web app.
[videojs_video url=”https://www.gd86.co.uk/wp-content/uploads/2024/06/avatar-research.mov” autoplay=”true” controls=”true” loop=”true”]
I studied how other websites and apps use profile images and noted their common visual approaches. Platforms like Twitter and LinkedIn have evolved their default profile picture designs over time, highlighting the importance of continuous iteration. Many of these platforms use softer shapes and elements in profile pictures to influence user perception.
I also found that some apps allow customisation, which enhances the personal touch in the user experience, which I thought was valuable to consider for future updates.
Concepts Ideation
Since Font Awesome was our resource for icons, it made sense to me to use it as a base for the default profile picture design. I created various ideas that used the icon library and discussed my ideas with the rest of the UX team to select the most suitable icons and determine the format for the default profile picture.
I believed that incorporating customisable default profile pictures would enhance the platform’s personalization in the future. So I created illustrated examples to propose potential options for future implementation.
As I further ideated, I was concerned the icon from our resource might be less visible on larger screens. I used it as a base and illustrated a clearer alternative.
Given our customisable networks for private clients, I wondered if we could offer to customise the default profile image using a CSS stylesheet class.
Concerns & Thoughts
I questioned the need for two images if a customer didn’t have a profile picture. While most websites use just one image for simplicity, our platform used both company and customer images.
To see how the default image would fit within the web app, I inspected and adjusted the CSS to determine the feasibility of cropping and resizing images based on the page context.
Solution
I created two images: one for Influencers without a retrieved social network image, and another as the default for other cases. After discussing with the UX team, we decided to stick with Font Awesome icons for consistency. I then presented the chosen images to the stakeholders and we then implemented the chosen images in the web app.
