VideoMyJob Website
VideoMyJob
UI/UX Design
Branding
CASE STUDY
Project overview
The marketing website is the face of a company and helps determine whether a prospect becomes a customer. Working closely with the marketing team, I made several improvements to the visual branding and improved the overall user experience of the VideoMyJob website.
Goals
- Improve overall visual hierarchy and ease of use across the entire website
- Re-design outdated visual design
Improving visual hierarchy and ease of use
The visual presentation of a web interface should guide users from one action to the next without feeling overbearing. Information that users are seeking should be easy to find while also encouraging them to move to the next stage of the funnel by clicking "Schedule a Demo" and getting in contact with the sales team.
A clear call to action
Clicking the call to action (CTA) button is the most important action a website user can take. It needs to stand out above all other elements on the page. The previous design did not clearly communicate the importance of this button.
- The CTA button lacked contrast and was lost in a similar coloured background.
- The button did not stand apart from other options in the navigation bar and was in a less noticeable position compared to other options like "Support" and "Sign In".
- The wording of "Schedule a Demo" was too long.
Previous Website Design
- In the new design, the CTA button stands out clearly on a white background.
- Website navigation items are moved to the left and actions to "Log in" and "Book a Demo" have been moved to a more prominent position on the right.
- The wording has been simplified to "Book a Demo".
New Website Design
Legibility
The previous website included small font sizes, often with very little contrast. This made it difficult for users to read the content. An all uppercase style was also used (buttons and titles) which made it harder for users to read as they are more accustomed to sentence case.
I improved the website's legibility by increasing font sizes, improving the contrast and moving away from uppercase styling.
I improved the website's legibility by increasing font sizes, improving the contrast and moving away from uppercase styling.
Previous Font Styling
New Font Styling
Using analytics to guide navigation structure
Information architecture (IA) is the structural design of shared information environments and, in this case, how website pages are organised and linked together. It's important that the pages are organised in a logical way so that users can find what they're looking for. The most visited pages should be the most easily accessible, with any secondary pages logically stemming off from them.
While adding new pages to the website, we saw an opportunity to better organise the navigation menu. We noticed that the pricing page and the about us page received a large amount of traffic. The pricing page was located within a dropdown and therefore treated as a secondary item. Similarly, the about us page was located at the bottom of the page in the footer.
We moved the pricing page link to be one of the primary options in the navbar and moved the about section into the dropdown for "Why Video?" and renamed it to a more engaging "Our Story". These small changes made it easier for users to find these popular pages.
While adding new pages to the website, we saw an opportunity to better organise the navigation menu. We noticed that the pricing page and the about us page received a large amount of traffic. The pricing page was located within a dropdown and therefore treated as a secondary item. Similarly, the about us page was located at the bottom of the page in the footer.
We moved the pricing page link to be one of the primary options in the navbar and moved the about section into the dropdown for "Why Video?" and renamed it to a more engaging "Our Story". These small changes made it easier for users to find these popular pages.
Redesigning a dated visual design
The VideoMyJob app allows users to record, edit and share branded videos straight from their phones. The product does incredible things and uses cutting-edge technology to do so. The website needed to reflect this but with its outdated fonts, visual styles and UI components, it was not achieving this goal.
Making video fun
One of the biggest issues VideoMyJob faced when it comes to user activation is getting people comfortable with being on camera. The branding needed to be more approachable and exciting so that users felt less intimidated and were able to have fun with the experience.
I added secondary colours that were more fun to the existing teals and blues, which by themselves can tend to feel more corporate. I also introduced character illustrations and abstract shapes which made the brand feel less serious and more visually engaging.
I added secondary colours that were more fun to the existing teals and blues, which by themselves can tend to feel more corporate. I also introduced character illustrations and abstract shapes which made the brand feel less serious and more visually engaging.
