ViewIQ

MVP Product Design Website

‍

The goal of this project was to market the Saas product by building a website that would be used for sales pitches as well as individual businesses. This was a B2B focused project. I worked as the lead UX/UI Designer alongside two front end developers. With great teamwork, our team finished this project 3 months earlier than our projected launch. I am very excited to show you the process in which I was able to achieve this goal.

‍

Project Roadmap

‍

UX Design Inspiration

‍

An existing placeholder website was created for Proviewpdf prior to my onboarding. Not only did we change the name of the product, we had a lot of revamping to do in terms of colors, logos, and marketing website design.

The goal was to make the website look high-tech and modern, while also keeping it clean and straightforward with the product as the main focal point. Below is a photo of the original landing page prior to redesign:

‍

‍

After going through the design process, which is articulated below, the final mockup of the landing page is displayed below:

‍

‍

Style Guide

‍

‍

Logo Designs

‍

Previously named ProView, it was decided by the CEO that the name should be more modern, slick, and dynamic. He settled on ViewIQ, and it was then my responsibility to find a way to take his idea and make it tangible. Using Adobe Illustrator, I sketched a few ideas and made changes as needed until we can to a conclusive decision. ViewIQ's logo was created after 8 rounds of iterations and design concept workshops. Here you can see the evolution of the logo.

‍

‍

‍

‍

‍

Wireframes

‍

Executed wireframes based on the most complex and most important user flows from a development and business perspective.

‍

Example 1

‍

The landing page was iterated over 10 times, beginning with a darker background and more features than necessary. Through Usability and A/B testing, we found that a lighter background gave a more sleek and clean appearance and helped the product stand out. Many features that were prioritized at the beginning of design were scrapped in order to keep the landing page tidy and straight to the point.

‍

‍

‍

‍

Example 2

‍

The Product Information page was based around a concept of giving the user the top four features that ViewIQ would provide. This strategy was used with intention to show value as well as entice the user to schedule a demo in order to learn more.

‍

‍

‍

Example 3

‍

A login page for the SaaS product itself was drafted. Here is an example of one of the mock-ups created for the product:

‍

‍

Prototype

‍

A prototype was created to give the client a click-by-click understanding of the interactions the pages would have with each other. This was useful in giving the client an interactive example of the final product, which increased interest and investment in the project.

‍

Takeaways

‍

After being a part of this project from drafting the first design to building the final product, I learned the importance of articulating goals and ideas with my client. Communication played a huge role in this project, and I build strong relationships with my client that have turned into friendships!