Affinity Map
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.

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.

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.

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.

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.

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.

Final
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.