POV Video

Overview

The business owner created their website in the early 2000s and had been wanting to update it for a while. I was hired to recreate a responsive website design based on data from user research.

Before

The original website was very unorganized and confusing to navigate. It had not been updated for many years, and many of the links did not work. It was not a responsive design. The image below is a screenshot of the desktop version of the website.

Competitive Analysis

 I started by conducting competitive analysis research on other video production companies in the Bay Area. My goal was to understand how competitors are approaching their design problems.

Persona

I created a user persona based on the target audience user. While it was not feasible for me to interview any real users of POV Video's website or their competitors, I was able to gather information on who the users are and what they need from the business owner. This information along with my competitive analysis research informed my user persona.

From my competitive analysis research, I found that many of the competitors have websites that are not only logical to navigate, but also visually appealing and organized. It was important for me to create a website that looks modern and attractive to the user while also being useful and usable.

User Journey

I created the sitemap, user flow, and task flow to visualize how the user will navigate the site. This was useful to refer to when designing the wireframe sketches.

Style Tile

First, I created a style tile to get a sense of the brand aesthetic before I started sketching wireframe ideas. I included the original logo here, although I planned on redesigning it.

Logo Redesign

I wanted to redesign the logo to look more modern and simple while keeping the brand recognizable by using the same color palette. On the left is a collection of redesign ideas I played around with before deciding on the final redesign logo

Sketches

I began the design process by sketching low-fidelity wireframes to visualize several different design solutions before committing to one. My sketches were based on my competitive analysis research and conversations with the business owner. I referenced these sketches when I began designing the mid-fidelity wireframes on Figma.

Wireframes

Using my sketches as a reference, I designed my first iteration of mid-fidelity wireframes in Figma.

Usability Testing

I created a high-fidelity prototype using Figma. I recruited 3 participants to test the prototype. The participants made observations and gave suggestions while scrolling and clicking through the prototype. Afterward, I created an affinity map to group the data in a way that would help me to understand the users' needs and pain points.

Desktop Product Description Modal

Pain Point

There was a lack of visual hierarchy, poor use of whitespace, and no CTA.

Solution

Added a CTA button, added a product description heading, added an available for rent section, fixed whitespace/spacing issue, updated photos, made the headings bold for hierarchy.

Future Revisions

Due to time constraints, I used many stock photos in the design. In future revisions, I would like to update the photos to include photos from the owner as I receive them.

Additionally, I would like to test the revised design with a larger group of research participants and continue to make improvements to the design based on user feedback.

Learnings

This project allowed me to work directly with a business owner to bring their vision for their website to life. One challenge I encountered during this project was a lack of timely communication from the business owner. I had to make design decisions without much clarification on what the business owner was looking for. From this experience, I learned to expect delays that are outside of my control and to factor that into my timeline for completing the project.