sc.jpg

Screencastify: UX Client Project

 
 
icons4.png
 
 
 

Problem


Screencastify is a screen recording tool used to inspire people to create video content, however they’re seeing an alarming number of uninstalls on their plugin, and people who visit their website for information are unsure of what the product is or how to use it. 

 

Business Goals

 
 

 
 

During our interview with our client, we came away with three main deliverables: 
• Increase conversion rates      
• A complete overhaul of the current Screencastify website
• Integrate in everyday lives

 
 

Research

 

 
 

Our research methods consisted of:
• Three Surveys (Educator, General, Online tech support)
• User Interviews (One Power user, Nine Educators/ Teachers using Screencastify)
• Contextual Observation (Users trying out SC for the first time)
• Secondary Research (Competitive Analysis)

 
 
 

Contextual Observation played a huge roll in our research because it helped us understand why people were uninstalling the plugin after downloading it. It also let us see the emotions and thoughts of first time users as they walked through the website to get an understanding of what the product was. We were able to get their feedback on if the website enticed them to become a lite or premium user, how they felt about the price points and if this was a product they could use. 

 
 

 

What We Wanted to Know

• Who are the users
•  How are they using it
• Why upgrade
•  What improvements need to be made 

 

Here are a few key insights we got from our interviews:

Stakeholders:
• Designs and user flow for all pages associated with the new website
• Increase conversion rates
• Needs incentive for customers to keep premium version


Contextual Observation:
• Users don’t understand what the product is when they arrive on the website
• Users don’t know how the tool can benefit them
• Users don’t find the value in upgrading to the paid premium version

 

Qualitative Data we received from our interviews:
1. People aren’t using any screen recording tools in their everyday lives for personal use as they don’t know what value they can get from it. 
2. Users won’t upgrade unless they find value in the product, its features, and are using it on a consistent basis.
3. Users aren’t sure how to use the product after on-boarding, and feel that the permission process lacks transparency.

 
 

Research Synthesis

 

 
 
 

After gathering our research, we began affinity mapping and identifying core Screencastify users.  We also looked into behavioral patterns for screen recording users across the board. 
 

20170106_155150.jpg
 
 
20170106_155150.jpg
 

For each user, we narrowed down our research to the top 3 reasons that drove their interest. 

 
 

User Needs Concepts Map

 
 
 

 

From this we formulated the following problem statement
Users won’t upgrade unless they find value in the product, and still aren’t sure how to use the product after on-boarding.

 

To tackle this problem we came up with 3 main design principles:
• Communicate the value of a screen recorder to everyday users?
• Create user loyalty?
• Inspire people to use a screen recorder tool?
 

User Flow & IA

 

 
 

As we tackled the content of the site redesign, we also looked at both new and returning user flows and also what updated information architecture might look like based on our user research. New Sub Page treatments included:

• Tutorials:  Educates and informs users how to use extension
• Plans (formerly Pricing): Improved IA
• Gallery: A “community resource” to engage and inspire users to use Screencastify
• Support: Improved IA
• Profile: Improved IA; File/User Management/Video Analytics

 
 
 
 
 
 

Based on our research findings, we divided up the deliverables and began creating concepts. One was a full redesign of the current website, and the other was a redesign of the on boarding in the Google Chrome extension. As a team we sketched ideas for how we could tackle this and voted on the best concepts. 

With this, I was responsible for educating and inspiring customers as soon as they arrive on the website. I also worked on a concept for creating a need for the tool after the videos had been created. 

 
 
 

Style Exploration

 

 
 
demo.jpg
 
 

I took a look at some of our competitors to understand what they were doing right, and what could be done better. I found that they put a lot of emphasis on downloading the product, but didn’t do a good job of explaining what it is and who it’s for. 

I wanted our product to stand out among competitors, but most importantly I wanted to adhere to our design principles. Since the main goal of our project was to inform, educate and inspire, I created a few different versions and conducted user tests to see which design best achieved that. 

 
 
 
 

I took a dark approach to my first design. I used a black overlay on the images so that the text would be a focal point in white.

 
 
#2.jpg

I wanted to add color so I went with the took a similar approach to the previous design but in white. I wanted to give the images a lighter effect to see if it felt more inviting. I also incorporated orange for a pop of color to help guide eyes throughout the page.  

 
 
 
 

Here I wanted to combine my first two looks by adding color to the black version. This also turned out to be a better way to differentiate the use cases at the top of the page.

 
 

For my final design, I decided to combine all three of the versions I created. I wanted the site to feel exuberant, but still have a sleek look. 

 

Wireframes

 
 

 
 

I approached the layout for the website keeping in mind our design principles of inspire, educate and motivate. I wanted people who landed on the site to immediately know what Screencastify is, and how it could work for them. Without having to scroll or click around for more information, I wanted the site to instantly draw people in with its imagery, color, and language. These wireframes are my initial approach at that. 

 
 
 
 
 

High Fidelity Mock ups

 

 
 

My team and I worked together to produce mockups. Below are the screens I created.
*Click to enlarge

 
 
 

Prototype

 

 
 
 

Click here to view the final prototype in Invision

 
 

Final Thoughts

 

 
 

Leading a team of four with design direction and execution helped us meet the demands of our client in the full redesign of the website. We met the deadline for the redesigned website and chrome extension going from conception to delivering a final product in three weeks. Having a solid understanding of the users needs for a screen recording tool was made possible with thorough research before design. This contributed to the success of this project in that we were able to come up with use cases and display them on the website to educate, inspire and motivate people to use the product. Having identified where Screencasitfy falls in the market of similar products, we called out many of their free and premium features on the homepage of the website and how they can benefit various use cases. 

 
 

Website Design and Content © 2017 Ashley Jackson