Brand

Project

Making the internet a better place through the power of usability testing

Summary

Scout allows potential customers the ability to see the benefits of using Conversion Crimes before financially committing to the service

Responsibilities

UX Designer
UX Researcher
Wire Frames
Journey Mapping
Userflow Diagrams
UI Designer

Overview

The driving power of Conversion Crimes is to make the web a better place through usability testing. Large companies have the resources to conduct user testing in-house. This allows them to continuously refine and optimize their website. However, optimizing the user experience can be more difficult without in-house resources. At Conversion Crimes, we are looking to address that, with Scout. The goal of Scout is to give potential customers access to Conversion Crimes services so they can learn more about the value of usability testing.

User Stories

User stories are the basis of all the functionality and tasks that come up within product development. It is the start of the design team problem solving what our clients will need to do within the platform.

Task Flows

There are two main task flows within Scout; customer onboarding and testing flow. Customer onboarding is significantly more straightforward than the testing flow.

For the onboarding we had to figure out where Scout would exist on our current website and how much information we needed the client to input. Once we had the clients information we needed to confirm that their information was correct and ensure they had a solid understanding of our service. With that complete, we could start mapping out how a user would start a usability test.

The client needs to locate where they would start to create a test. For the client to create a Scout test they input the URL for the webpage they want us to test. They then select the type of test that best suits the nature of their webpage. Scout keeps audience selection simple; clients can choose male, female or any demographic option. Once the test is launched, the client needs to receive updates as testing is completed. From there the client needs a way to view the videos, take notes, and see what the tester said about the site. At this point, the client has the option to become a paying client and test more in-depth scenarios on their site. Otherwise they have to wait a month before they can use another Scout formatted test.

Wire Frames

Scout was built upon the pre-existing platform of Conversion Crimes. It is also intended to be an up sell to get more people buying into Conversion Crimes. The interface had to have the familiar layout of Conversion Crimes, but clearly identify that the user is accessing Scout and not Conversion Crimes. With a general design system in mind and a user flow implemented, it was time to start developing the placement of buttons and windows to allow the best usability testing experience. These wireframes acted as a proof of concept, which allowed the design team to comment and collaborate. This  ensures we don't overlook any needed features. I tried keeping the wireframes simple and low fidelity to keep the team focused on function over form. I used minimal boxes and a colour palette of black, grey, and white. These wireframes were the building blocks for version one.

Sign Up Screen

When solving for the landing screen we had a few different concepts to choose from. We anticipated that the client would be signing up on the landing page. But there was also the thought that the client would be launching the test from the landing page. Both scenarios required a different list of requirements to execute the concepts. For instance, the signup field would be a lot longer if the user was creating the test on the landing page. However, if we made the client start the test from the landing page they would have no insight as to what the dashboard looks like or how to launch future tests. With that in mind, we decided to go with a more traditional sign up; log in and verify your email so you can receive notifications, and then proceed to sign in. There was also a lot of discussion over how the background would change when the client did sign up for Scout. We had to draw the user’s attention to the important message that told them, the next step in the onboarding process. We started with a blurred background, but found it confusing which resulted in us moving to the darker background. We later realized it wasn’t ideal either and this was a chance for us to present our brand better and created a whole page informing the client that checking their email was the next step.

Dashboard

The dashboard saw numerous revisions on the way to the final version we launched. It was clear early that it’s not easy to just reuse an existing dashboard for a new service. There were a lot of questions to answer with Scout. For instance, how will the user know what they signed up for, or how will they know they are using Scout and not Conversion Crimes? These were the two most prevalent questions that drove the design direction for the dashboard. In the original dashboard we basically added a toggle to flip between Scout and Conversion Crimes and implemented different colour schemes. In hindsight this was a terrible idea. The similar interfaces made it confusing and the toggle looked hideous. It is extremely hard to make a toggle fit into the aesthetic and keep it noticeable. We ended up upgrading the Conversion Crimes dashboard and leveraging the same one for both. We made Scout identifiable by adding it to the test creation menu as the top option. We also made sure that all the tests in the client’s dashboard were labeled as our offerings, Guided, Expert Insight, Managed and of course Scout.

Test Builder

The test builder had a very simple function; allow the client to add their URL, select the genre of the test they wanted to conduct and the audience the test is geared towards. However, there was much more to it than just that. We had to figure out the best way to present this information. The client needed to be informed of what each genre of the test was and see what tasks the testers would be going through to make sure that it aligned with the type of test the client wanted to run. In the original version we had a tooltip to let the client know what each kind of test was geared towards; whether it be e-commerce, SaaS, or marketing. Once the client selected the test type it would pop up a modal to give them a preview of the scenario and list the 3 tasks the tester would complete. We decided to use this as an access point for an up-sell by adding a “create your own questions when you upgrade to pro”. This was an appropriate time for this since this is the point the client would see the limitations of Scout, hopefully resulting in them wanting more details and converting. The last step was for the client to select the tester group; a simple selection of male, female, or either. Then the client would be prompted to confirm and run the test.

For the second version, we removed the modal as we found it to be far too distracting as well as confusing since the client got a modal for the confirmation as well. We kept the tooltip to allow the client to know what each test was meant for but they didn’t have visibility to the questions at this point. This left us confused as to the best way to show the client the test scenario and questions while also having a smooth flow. We decided to do a page break style dropdown. The client could use the tooltip to see what genre their business fit, but once they selected that type of test the page would slide down showing the test scenario as well as the tasks that the tester would be conducting. This layout allowed us to show the whole test creator in a single-window view, allowing the customer to see all the steps to launching a test. This also allows them access to all the information needed to make the most informed decision, thereby giving them the maximum value.

Test Results Page

The test results page needed to include two main versions. The version before the client reviews the test video and the version after they have viewed the test. For the initial screen before the client reviews the test video, we had to decide which information was most relevant and find a way to ensure that the client watches the video. In the first version, we thought the most important info was the video. Then we had to narrow down which of the Conversion Crimes tester ratings offered the most value. We landed on Experience, Trust, and Design. Then we decided that listing pain points and the tasks completed would give the client useful information to work with; so we placed them under the tester ratings at the bottom. We quickly realized our mistakes. The video viewer took up far too much of the screen and the pain points are client provided input so they wouldn’t exist till after the video was viewed. With that knowledge, we decreased the size of the video viewer, located the tester tasks beside the video viewer along with the stacked tester ratings, tester site descriptions, and a notes section in ascending order. We then completely reinvented the page, adding a header to allow the user to more seamlessly flip between the results and the video viewer. We also made sure the URL was listed to remind the client what site they were testing and added the video viewer. Below it, we added the tester ratings and the tester descriptions. In neatly packing it all together we ended up with an up-sale section in order to increase our conversion. With the initial test review page layout complete, it was time to start designing the video viewer.

Video Viewer

The video viewer had one main goal, which was to allow the client to watch the results identifying the pain points on their site. We had to allow the user to take notes on the video, and rate the tester to ensure we are only using the highest quality testers. A common issue we had with Conversion Crimes was seeing the video viewer on a smaller screen format, so that was the first issue we wanted to rectify with the Scout Video Viewer. We had to map out an interface that allowed the client to watch the videos and take notes at the same time, while also ensuring the video player was large enough to see tiny nuances in the video. Once we had figured out that layout we had to solve the best method for the tester review section. We decided to make it a drawer that would be open when the client lands on the page. Thus allowing the client to know it’s there but also allowing for a larger video viewer on a smaller screen format. There was a lot of dot voting around the visual design for the drawer pull. We were trying to narrow down the most noticeable drawer pull with a design that matched our aesthetic. Once we had sorted the drawer pull out, it was time to decide the order for the drawer contents. Key Conversion Crimes metrics measure to see if the tester understood the purpose of the website, if the target audience is clear and then if there were any issues faced. We made sure to carry these over for the client to input in Scout. Then we needed to figure out the best ways for the client to rate the Tester. This took more work than we had anticipated. The client needs to have an efficient tester that gives meaningful insights and communicates these well. Those became our metrics goals but how would we rate them? Sliders seem easiest but scales can be arbitrary. How would we ensure the ratings were even and equal for everyone's interpretation of numbers? We tried a few sliding scales with words but the aesthetic looked off. We found the easiest solution to get the product out was just to put in a 5 point rating system where 1 is poor and 5 is excellent. This will probably be changed in a later update but in the interest of time, it was the simplest fix. The last step in improving the video viewer user interface was copying the Conversion Crimes colour scheme and coloring the client review drawer black. We made the entire interface uniform, allowing for the client to have a smoother experience, as well as getting them accustomed to where certain things are located across both platforms.

Back to Test Results

With the client adding input to their Scout Report it would change the way the report page looks. The client needs to be able to see all the notes they made without having to click through a series of pages to get there. The easiest way to display any content added by the customer is by updating the test review page; showing all the tester's notes and ratings just like the client's original viewing of the report. But also having the modification notes the client wrote visible. Showcasing all the identified pain points on screen allows the client to implement these changes without having to search for them.

Functionality

After hundreds of Figma comments, we finally had a design that was ready to be handed off to the web developer. All the pages were stylized in the appropriate branding and colour schemes that married Scout to Conversion Crimes. We had all the buttons mapped out, with a full functionality list ready for the Web Developer to link together. The biggest changes were on the back end.. We needed to ensure that we had the most optimal flow for the developer before they started writing the code. With the pathways finalized it was time to make sure the assets were ready for the developer, this included making sure all the imagery was there and that it conveyed the message we wanted. Especially elements that were on brand, like our little robot. The final step here was making sure the asset library was up to date with all the colours, as well as logos so the developer could refer to the padding, buttons sizes, fonts, and colour hex codes. With that finalized, we sent it off and let the developer get us ready for beta testing.

Next Steps

As with all good web design, once our developer was done with the code we went to beta testing, sending the product out to a select few of our best clients. We needed them to help us find the speed bumps and bugs. After a week of user testing and making sure everything was running as it should we launched Scout. There were futher changes to be made as clients started using Scout, we have had users asking about flow changes and making suggestions. We have had to add more pathways to Scout, and change certain modals to fit the way our clients use our platform. As with all product development, our platform is constantly being updated and edited as we go along. We are also navigating a new space by giving away user tests for free, so there will always be data to support platform changes as most people using the software are new to user testing. It’s a matter of analyzing this data and figuring out if it’s an edge case or if we need to change the way the system works. The next steps are to continue identifying and rectifying bugs to allow for the best user experience possible, to gain better reviews, and reach more potential clients. After all, a usability testing site with a bad user experience cannot be trusted.

Conclusion

Building Scout was a fantastic learning experience, it allowed growth in my design practice as well as gained insights into the start-up culture. Scout was the first product the company had designed. Most of the original designers who worked on the current Conversion Crimes product are no longer at the company, so it was a challenge to understand their reasoning behind design decisions while trying to improve on their work. This meant we needed to recreate the standard operating procedure for new products. Conversion Crimes is a totally remote start-up with staff located in different time zones, adding the element of adaptation to odd meetings times and late deadlines. This created a need for a high level of organization so that we had smooth hand-offs. We needed to ensure files were ready for the next person when they started their workday. Building Scout made us realize that having design meetings and collaborative work sessions are far more effective than leaving Figma comments and letting the next team member try to decipher what needs to be done. Working through this product design led us to creating asset libraries to allow for a more consistent look as well as an evolving resource for the UI designers. In building Scout we identified that people needed different assets to be handed off based on their workflow and that some elements have different terminology in different regions of the world. Learning experiences like this are extremely valuable, not only for the next project to go smoother but also for me to grow as a designer. Going through processes allows you to be more resourceful and flexible and that experience benefits future projects.