Mosaic Visions Productions

Freelance work for the videography & photography company based in the Hudson Valley, NY.

Hero image with logo and four phone mock ups
Timeline:
3 week,  April 2024
Tools:
Figma, Wix website platform,
A11y Color contrast checker
Project type:
Freelance work
Limitations:
-Short turnaround meant no time for research

Brief: I was given the task of revamping the existing website of the videography & photography company, Mosaic Visions Productions. Client needed a quick turnaround in order to have website up and running before doing a round of cold calling.
Goals: The goal was to identify pain points within the existing design to create a more intuitive site for potential clients, matching the new website to existing logo & company brand guide lines.
Previous design:
gif of gradient on home page
screenshot of website 1
screenshot of website 2
Pain Points:​​​​​​​
Image showing 6 different pain points
1. Site did not meet WCAG standards. Previous pages of websites were broken up by varying gradient backgrounds, with text over the gradients. Most, if not all, did not pass WCAG color contrast standards, and some were impossible to read with or without sight disabilities. The main global navigation did not have a background color, which made reading the tabs difficult.
2. Previous design had no unifying color palette. Gradient backgrounds were of varying color palettes and did not seem to have any common theme to them.
3. Previous design lacked layout cohesion. Pages did not have common layout, which made the website feel like it lacked an overall cohesion. 
4. Previous design lacked typographical hierarchy and cohesion. Typeface size chosen lacked hierarchy and was all over the place between headers, subheads, paragraphs etc.
5. Global navigation needed to be updated with new pages, adding pages to separate cinematography work, photography work, as well as adding new pages to better organize information on site.
6.Site lacked call to action buttons that brought potential customers to contact page.​​​​​​​​​​​​​​
Final outcome:
Gif of the home screen of the site
mock up of the site on a laptop
mock up of the site on a laptop
Website Updates​​​​​​​
Image showing site gradient, three color swatches and type faces used for the site
1. Gradients consolidated. One gradient was chosen to be across the site, pulling colors from the existing logo. Page headers are the only text to be displayed over gradients.
2. Website typography streamlined. Typefaces chosen were based on existing logo, using Inknut Antiqua for headers, and Avenir for subheaders and body text. Only two weights of Avenir are used through out the site.
3. Website brought up to WCAG color contrast standards. All important text is now displayed over white background, with only page titles being displayed over gradients. Text placed on gradients is very large, making it meet AA standards.
4. Global navigation updated. Site pages were better organized, putting all photography work on one page as well as all videography work on another. The about page features a background of the artist and his resume. The contact page just hosts his contact information and submission form.
Image showing three phone mockups of the site
Reflections
Ideally, I would have loved to conduct any research for this project, but the time frame did not allow. If clients wants updates or changes in the future, I would suggest some sort of research such as first click testing or moderated site navigation to check how the site can be improved.
↑Back to Top