POV Video

Responsive website redesign

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.

Tools

  • Figma

Team

  • 1 product designer: Emily Heiden

  • 1 product owner

My Role

  • User research

  • UX/UI design

  • Prototyping

Timeline

  • 4+ weeks

  • Ongoing

Problem

POV Video is a video production company based in the San Francisco Bay Area. They provide specialized equipment, trucks, and skilled operating personnel to broadcast events onto tv. The previous website was out of date and difficult to navigate.

Solution

The goal for this project was to create a responsive website design for desktop, mobile, and tablet that represents the brand well and provides an accessible, usable, and useful experience for the users. This was accomplished by conducting competitive analysis research, usability testing, and iterating on the design.

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.

POV Video

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.

POV Video

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.

POV Video

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.

POV Video

Design

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.

POV Video

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

POV Video

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.

POV Video

Wireframes

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

POV Video

Test

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.

POV Video

Affinity Map

Iterate

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.

POV Video

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.

Thank you for reading my case study!

If you would like to connect, please reach out on LinkedIn.