VP header.jpg

Website Redesign & Development for Video productions startup | Voth Productions

Voth Productions are a team of creatives and digital advertisers based out of Denver, Colorado, who aspire to give the most exciting brands the momentum they need to make an impact. As listeners, they understand the thrill of a great story. But as writers, they also understand the challenge of telling that story. Voth wants others to experience your brand the way you always have.

The project’s primary objective was to redesign and develop their preexisting website into one that enables them to gain new clients and get their name out.

Roles

UX Researcher 

UX Designer

Front Developer

Programs Used 

WordPress

Adobe Suite

Webflow

Timeline

6 Weeks

Design Process

(1) Research

(2) Structure

(3) Design 

(4) Iterate

- Interviews

- Competitive Analysis

- Brand & Website Goals

- Prototyping/ Web Development

- Usability Tests
- Final Product

 

Research

  1. Find out what Voth Productions goals were for their brand & website

  2. Identify features and functions that enable users to understand Voth's vision

  3. Define who are the leading & alternative competitors and what they are doing.

 

Interviews Findings

Want to establish creditability in Market

  • There are tons of video productions and agencies all looking to get clients.

  • How might we establish street credibility amongst more prominent agencies?

Make sure brand message is concise

  • Making sure that the brand message is to the point

  • How might we deliver their message in a creative way that shows who they are?

Brand Style Tile is used throughout

  • Keeping brand icons and logos consistent throughout the website

  • How might we shed new light on Voth's brand?

Competitors Analysis

Boulder Media House

Strengths

  • Strong brand message

  • For a startup, they have a lot of amazing clients & have a good variety

  • Fun, really try to humanize their brand & connect with their users on their level

Weaknesses

  • Very distracting text and cursor, which take away from their work

  • The color scheme is off, not very accessible

Insignia Studios

Strengths

  • Have a section full of trusted clients helps them gain new clients' trust.

  • Explains what and why they do very well, they make sure that the information is easily digestible.

Weaknesses

  • Hectic website, tons of information.

  • Not accessible at all, very hard to read

  • Inconsistent design across website, different font weights, and color schemes.

Sweatpants Media

Strengths

  • Love the use of the scroll down the line, helping guide the user down through their story.

  • Love the autoplay focus on the featured section, well organized.

Weaknesses

  • Very cluttered, wow, way too confusing

  • When on the menu, the cursor is hard to find, creating some friction to see tab.

Thought Process:

When looking at competitors, we focused on startups looking to find their credibility because we wanted to learn which areas most agencies were focusing on. We noticed that showing the process and how the client will fit within that equation allows them to feel part of the team. Another data point we found was showing the previous clients that the agency has worked alongside. They were allowing clients to see what they have done. (This client had previous clients tell them that they can't put their (clients name) on the website. With that challenge in mind; How might we gain that trust with new clients?

Structure

  1. Brand & Website Goals

 
banner-1@2x-scaled-1.jpg

Brand & Website Goals

Consistent Brand Message 

Make sure the brand's identity & message are consistent throughout the website

Use Previous Color Palette

Use all of the colors that Voth Productions owns, and use them in a way that helps guide the user.

Tell Voth Productions Story

Make sure Voth Productions story and mission are being told correctly.

Use previous web platform

Allow for WordPress SEO to work while using Webflow's customization abilities

 

Design

​1. Prototyping/ Web Development

Prototyping & Web Development

When prototyping, I gather the agency together, and we jotted down our goals on the board, so we could refer to them when making our designs. We each did the crazy eights, which we then presented our ideas. Why did we do it this way? How will this meet the goals and needs of Voth? Finally, after we presented and chose the specific features, I started to make some prototypes on Webflow. (I skipped Figma because I like to make prototypes on webflow to test/publish them on the go. 

Template Search

We started off looking at many templates because we could learn from how templates structured the information. 

Here were the classic webflow templates, and I research other video production templates, which aided with prioritizing.

1st Prototype

We wanted to make a statement as soon as the user entered Voth's website because Voth wants to be part of the media's luxury side. We chose to start with a question to enable the users to start thinking about their stories. How might the new client see themselves working alongside Voth?

2nd Prototype

At first, we decided to have the about page as its separate page because we saw the people enjoyed seeing the team and their mission. The problem we found was, the team was only two, so they wanted to make it more of a team mission versus two individuals.

 

Iterate

  1. Usability Tests

  2. Final Product

Usability Tests Findings

1. Users didn't understand that they needed to scroll to see the rest of the information

2. Users found the services page easily to use and understand

3. Users thought that website didn't give enough information regarding Voth's process

banner-4@2x-scaled-1.jpg

Final Product

 
TH header.jpg

TechnoHUNT | Web Design & CMS

black-mockup – 45.png

Onewheel | Security Features Add-on

front-view-mockup-of-macbook-pro-with-a-

Mirror | E-Commerce Website

woman-holding-iphone-xs-mockup-perspecti

Let's Hang | End to End Mobile App

responsive_design2.png

ReBlocks | Responsive Website Redesign