Netra.IO
About: Netra is an early-stage machine learning software startup. Their software can analyze photos on the internet to see how consumers interact with brands on social media.
Netra's software provides key social listening and market insights for brands to make sense of related images and videos on social media platforms
Challenge: Netra needed to improve the self-serving functionality of their website and to enable prospective clients to better understand / explore / demo Netra’s tech product directly on the website. The ultimate goal of the project is to optimize the self-serving functionality and layout of Netra’s website to attract new potential customers and improve Netra’s brand presence online.
Our task was to create a web-tool demonstrating Netra's capability as a visual recognition system. This tool would be a model of the software repurposed for Netra's new website. The objective was to re-structure the site so that users would be directed towards the web-tool.
This web-tool needed to be able take a user-uploaded photo and connect it to Netra's API, which automatically labels the image for brand logos, humans and the context (their emotions or locations) in the image. This information would then be displayed for the user in real time via the demo page.
Research: Our first objective was to figure out how we were going to organize the framework for the page. We started by researching other visual recognition companies (Netra's Industry Rivals) that have self-serving functionalities on their websites. We did industry research on the funding of A.I / Machine Learning companies on academic databases.
As Netra is a tech company with a marketing product, we contacted Netra's business clients. We reached out to market research companies Kantar and Crimson Hexagon to see how Netra helped them grow, and more importantly, where there was room for improvement.
click to see examples of Image Recognition Tools in the Industry
Ideation: Upon concluding our research, we decided that our web-tool wouldhave:
a drag-and-drop-zone for users to input their photos
a visual interface that demonstrated the tags based on brands and context,
a visual graphic that demonstrated the process and flow in which both the tool and the software gathered data.
A well-placed input form that was able to collect the user's information
For the landing page, we decided to change the aesthetics and the copy used on the website. We found that there was some cloudiness regarding Netra's value and feature due to the language used to describe it. We found that in order to understand what the product did, we had to watch the videos scattered throughout the website. We sought to bring that explanation to the body copy on the website's front page.
To increase Netra's marketability, we set out to write a whitepaper for Netra to use during presentations, industry conventions, and to place on their website. Our research found that we could use industry statistics and quotes to increase the credibility of Netra's product, so we sought to gather quotes from interviews with Netra's clients onto the website.
Design Process: After looking at our results from competitive analysis, we set off looking for ways to highlight Netra's biggest strength: Brand recognition. This is in comparison to other image recognition tech companies' strengths, some of which range from scenes/locations and human expressions. The UI featured a clickable slideshow of images that were already tagged, and these were the early drafts of this UI.
We found that adding a process graphic illustrating the web-tool's operation would help the user. To research this, we invited users unacquainted with Netra's product to play around with the web tool, and asked them if they knew what they were doing / what was going on. We found that contextual understanding of the web-tool increased by over 40% with a supporting graphic and explanatory paragraph. This is what that graphic was drafted to look like:
Wireframes:
This is what the mid-fidelity drafts of our demo-tool looked like. We were working with Netra's principal front-end developer, who wanted us to incorporate a new color and font scheme.
We planned on placing the process graphic on the bottom right hand side of the page.
After looking at some example photos, we concluded that a simple mind-map that illustrates user input and output (or return) would help illustrate Netra's value and allow for them to have a view under-the-hood of Netra's deep learning and image recognition technology.
The purpose of this graphic would be to hopefully answer the questions for potential customers who may be on the fence. This hands-on experience would help get the customers' imaginations working.
Initial Feedback:
Feedback on our ideas were initially positive. Through our initial presentation, we were able to get the ball rolling and bring forth a whole set of proposed changes to the Netra site structure and layout. After the presentation, the team had suggested that we change the design scheme of the website, using color for the web-tool itself, and keep the rest of the website at a black-and-white scheme. This would help direct the users attention to the photos on the website (as images / image recognition is mainly what Netra is working with).
Iteration:
After our first working prototype (made using node.js) impressed the CEO of the company, we decided to figure out how and where to place it on the landing page. We decided to place the demo image right below the fold. During this iterative process, the visual graphic made to be placed in the demo page was removed from the landing page, to be placed on the "What is Netra" page, as well as brochures and white-papers. The visual design for the process graphic was touched-upon and optimized for print.
Design Solution / Future Directions:
To get a working prototype of Netra's demo tool required intermediate knowledge of HTML, CSS Frameworks, and JavaScript Libraries such as Dropzone.js, Angular-file-upload.js and node.js.
The trial-and-error nature of creating a unique web-tool like this made for an incredible learning experience in an industry that will continue to expand exponentially in the future. Indeed it was difficult learning while doing, but getting it to function was a huge success that allowed Netra to base the design and architecture of the website around the feature that we built.
Designs for the web-tool were made on Sketch and Fireworks.
Credits
Design/Front-End: Ronny Mitra, Pietro Coelho
Back-End: Dan Williams, Keith Johnson
Marketing: Rachel Sciaba
Sales: Phoebe Sturges
Product Management: Marcus Widdell