UX Research and Design, Strategy |2017

Wirewax Interactive Video Technology |Website Redesign |UX Design, Strategy |2017
See it live

UX Research and Design, Strategy |2017

Wirewax

Wirewax

The Set-up

The Set-up

Wirewax is the world’s first interactive video platform, turning videos into immersive experiences. They provide a web-based video editing tool as well as work for clients such as Disney, NIKE, Universal Studios, and L’OREAL. We were tasked with redesigning parts of WIREWAX.com in order to increase signup conversions and overall user experience as well as design for a shift in user aquisition strategy.

Wirewax is the world’s first interactive video platform, turning videos into immersive experiences. They provide a web-based video editing tool as well as work for clients such as Disney, NIKE, Universal Studios, and L’OREAL. We were tasked with redesigning parts of WIREWAX.com in order to increase signup conversions and overall user experience as well as design for a shift in user aquisition strategy.

We were able to identify contributing factors leading to user fallout in the signup conversion process and account for these factors in our design by focusing on user flow, communication, information hierarchy, and visual elements.

We were able to identify contributing factors leading to user fallout in the signup conversion process and account for these factors in our design by focusing on user flow, communication, information hierarchy, and visual elements.

Wirewax is the world’s first interactive video platform, turning videos into immersive experiences. They provide a web-based video editing tool as well as work for clients such as Disney, NIKE, Universal Studios, and L’OREAL. We were tasked with redesigning parts of WIREWAX.com in order to increase signup conversions and overall user experience as well as design for a shift in user aquisition strategy.

We were able to identify contributing factors leading to user fallout in the signup conversion process and account for these factors in our design by focusing on user flow, communication, information hierarchy, and visual elements.

flat-browser7

Selecting an approach

Selecting an approach

Selecting an approach

We were provided with limited information about the effectiveness of the current site at the outset of the project. With this in mind, the team set forth to put together a stringent research plan that would return the most accurate picture of how the site was being used. We needed to identify our target user for usability tests on the current site to reveal the pain points our user has as well as construct a failure map.

We were provided with limited information about the effectiveness of the current site at the outset of the project. With this in mind, the team set forth to put together a stringent research plan that would return the most accurate picture of how the site was being used. We needed to identify our target user for usability tests on the current site to reveal the pain points our user has as well as construct a failure map.

wirewax symbol home1 copy 4
microscope2
circle graph copy

Understanding our users

Understanding our users

Understanding our users

Understanding our users

As with any project, you can’t move forward in the process without first understanding who your users are and what motivates them. We learned that visitors to the site fit into two unique categories: potential customers from small studios looking to create their own interactive videos and enterprise representatives looking to WIREWAX for creative solutions. Both users have distinct and unique needs. This led to the challenge of designing for both users simultaneously without isolating one or the other while keeping in-line with the business goals.

As with any project, you can’t move forward in the process without first understanding who your users are and what motivates them. We learned that visitors to the site fit into two unique categories: potential customers from small studios looking to create their own interactive videos and enterprise representatives looking to WIREWAX for creative solutions. Both users have distinct and unique needs. This led to the challenge of designing for both users simultaneously without isolating one or the other while keeping in-line with the business goals.

As with any project, you can’t move forward in the process without first understanding who your users are and what motivates them. We learned that visitors to the site fit into two unique categories: potential customers from small studios looking to create their own interactive videos and enterprise representatives looking to WIREWAX for creative solutions. Both users have distinct and unique needs. This led to the challenge of designing for both users simultaneously without isolating one or the other while keeping in-line with the business goals.

Our Methods

The Method

Usability Testing

After identifying our primary and secondary users, we performed multiple rounds of usability testing on the current website. Additionally, we performed a round of usability testing on various competitors sites for insights into what elements are more effective than others when dealing with this particular technology. We set up a homemade testing lab for this purpose. This consisted of a facilitator and recorder and LookBack for screen and audio recordings of the test.

Site Analytics

By accessing Mixpanel analytics from the last 3 months, I was able to quantify user behavior to a tee. By visualizing sign-up conversion funnels for different buttons within the site, I gained an understanding of the effectiveness different parts of the page. From this we were able to validate certain outcomes from our usability tests as well as gain a deeper insight into the behavior of our users.

Heuristic Evaluation

We performed a heuristic evaluation using the Nielsen Norman Group Ten Usability Heuristics for Interface Design.

User Testing Insights_6

Key Insights

Key Insights

From our research we were able to identify key insights into user behavior on the site. We learned that the biggest contributor to user fallout in the signup process was the user’s lack of understanding of the services and product being offered. Most users felt the homepage didn’t clearly communicate what the product was. Additionally, the most effective way to inform users on the technology being offered is to provide examples of interactive videos. Lastly, much of the CTA copy was partially ineffective at communicating where the user was being directed to.

With this in mind, we were able to begin drafting user flows for our users.

testflow4

Design Studio

Design Studio

From our research we learned that we need a way to communicate to the user right away what the website is offering. We needed to do this for our two user types who had clearly different goals. We ran a design studio aimed at solving this problem. Each team member came up with as many sketched solutions as they could think of. We compared, contrasted, and sketched until we settled on a solution to be tested with our first round of usability testing.

wirewax wireframes
backdeleteme

Results

Results

Preliminary usability tests on our design showed promising results. We found that users were quicker to understand the product being offered, and had a more accurate understanding of who the primary and secondary users were. The timeline of the project limited our ability to obtain quantitative feedback from the tests, but as the website begins to rollout we expect to see less users dropping out of the signup conversion process, as well as longer views per page.

login2

© 2019 COLLIN BOYER