Hvr
Social Chrome Extension
A Startup environment
Our client came to us with a very interesting, technical and challenging idea to create a Chrome extension that allows you to tag, share and collaborate anywhere on the internet. When I became involved the with project we were into the full product development. I read the book “The Lean Startup” by Eric Ries before joining, and successfully applied much of the theory I learned to the project.
Testing Phases
Since this was a lean startup project, we held testing phases after completing any new technical feature or major navigation change to make sure users could understand and use the plugin properly. I set up interviews with subjects from our office and ran them through a series of scenarios, gaining insight for each new version by using new subjects as well as those who had used prior versions.
Design Sessions
Our stakeholder was very hands-on; he was always coming up with new ideas and would whiteboard at every opportunity. I decided to involve him in a design exercise – collaborative wireframing. Using paper, markers and scissors to create basic wireframes allowed the client to see how the design would come together quickly and easily. You can read more about my experience in this blog post I wrote on the topic.
Landing Page
A landing page for Hvr was important for the marketing of our client’s product, to provide potential users a sense of credibility to the brand. I designed the landing page to be a full-page slider that tells a story. The images show different use-cases for Hvr; conversations, tagging images, sharing with groups, planning trips, and reminders for later. The main purpose of the landing page was to redirect the user to the Chrome store to install the plugin. To make installation easier, we included the ability to install from the landing page as well.
Marketing
As a lean startup designer, I was also responsible for creating graphics and material for marketing purposes. I helped to evolve the logo, create branding language and an executive deck for our client to use in potential partner and investor presentations. The most challenging part of marketing Hvr was the large number of use-cases. We decided to funnel them down to a core few and target those.
Hvr Interface
There are two main parts to the Hvr interface, the Sidebar that contains most of the tools and the comment feed, and the Tags on the webpage itself. Tags show the user where comments are and how they can interact with them, and the Sidebar can be put aside anytime.
mobile experience
Our client wanted to explore the potential in a mobile app that could mimic a browsing experience like that of Hvr on Chrome on a desktop. With limited real estate on mobile screens we knew we would have to completely rethink the Hvr idea, since a Sidebar wouldn’t fit. We came up with a bottom- scrollable drawer that shows 3 comments at a time, so as not to overload the user.