Hive

Redesigning the digital notebook:
A buzzworthy way to create, share, and collaborate

THE PROBLEM

The world of productivity services is full of competitors. From Evernote to Microsoft OneNote, each digital notetaking and syncing service delivers its own variation of convenience and productivity to keep content stored and accessible at any time. Despite this variety, frustrations remain over organization: some tools don't consistently save notes into the correct folders; some possess inadequate search capabilities; others don't provide controls over how content can be saved or displayed.

THE SOLUTION

Introducing Hive, a Software-as-a-Service web application providing effortless content management to solve the problem of digital disorganization. Hive combines the ease of bookmarking content in a browser, the flexibility of formatting notes in desktop apps, and the powerful searchability of cloud storage tools, within one intuitive interface. Organization is no longer a chore with Hive's predetermined item categories built into the upload process. Whether it's capturing thoughts during an office meeting or sharing photos of a recent trip with friends, Hive makes it easy to add anything in seconds, keep things organized, and access content quickly and efficiently.

THE RESEARCH

User Research


I created a user research survey to get to know my perspective users' preferences and habits. My questionnaire focused on:

  • How people browsed the internet and saved interesting content;
  • When and how people write notes to themselves;
  • What tools people used to save online content and take notes and what they liked or disliked about those tools; and
  • How people shared resources with colleages at work.

Results were gathered from 22 respondents across social media from around the world.

I summarized the data and identified common user motivations, frustrations, and considerations, including:

  • Bookmarking and downloading were the most common methods used to save interesting online content;
  • Respondents liked bookmarking tools that were easy to use and easily accessible but were frustrated by difficulties with searching for items and resulting clutter; and
  • The majority write notes to themselves using smartphone applications for their simplicity but disliked how ease of use was sometimes gained by sacrificing organizational capabilities, such as not being able to format text.

From these results, I was beginning to see that users wanted a productivity tool that could streamline the organizational decision-making process but still provide options for more specific categorization.

Personas


I interviewed survey respondents to dig deeper into their responses and clarify my understanding of the problem and my potential solution. From these interviews, I identified three major user groups, which I developed into three personas.

The personas established strong preferences for being able to store content in one location, organized within a clear hierarchy that could be easily searched and shared.

Competitive Analysis


Given the number of existing productivity services, I needed to take a closer look at potential competitors to identify how our product could provide the most value to our users. Instead of evaluating other notetaking apps, I focused my analysis on cloud storage heavyweights like Dropbox and Google Drive to perform a basic SWOT analysis. Since users' strongest desires were for better organization, examining the successes and faults of services built to house and handle vast quantities of data revealed insights and opportunities beyond just how to build a better interface for typing and storing notes.

User Stories


After compiling a lengthy list of tasks that users would want to accomplish with my product, I prioritized those essential for a minimum viable product (creating and upgrading accounts, adding and viewing content) from the nice-to-haves (sharing and favoriting content, adding and managing collaborators).

User Flows & Sitemap


I converted the users stories into user flows to visualize how the user would accomplish those stories with my product. Separate flows demonstrate how new and returning users would be welcomed into the platform. A combined flow for tasks within a dashboard took several iterations as I mapped out the smoothest paths for adding content, searching for specific items, and managing accounts. To solidify our navigation structure and content hierarchy, I drew up a sitemap before diving into the design of the actual product.

BRANDING

The brand identities of several productivity and syncing apps present minimal colors and basic imagery to communicate a purpose: a bookmark or list for notetaking, a cloud or box for storage. From my interviews, I knew our product needed to fit within this universe without completely blending in. I set out to create a unique brand name and personality to make our product discoverable and memorable.

Typography


I paired Rubik and Quattrocento together to reflect our product's professionalism, trustworthiness, and slight playfulness. Rubik's rounded corners and geometric structure complements the wide, open letterforms of Quattrocento, a classic, strong typeface.

Brand Story & Logo


I began my brainstorm with a word-association exercise surrounding the idea of valuable items in a safe space. This eventually lead me to two brand concepts: Trove, defined as a store of valuable or delightful things, relates to how users would collect and save treasured content in one place. Alternatively, Hive, defined as a place in which people are busily occupied, relates to how our product is meant to be a place of activity, encouraging personal notetaking and collecting, and inviting others to collaborate in the shared space. Ultimately, I chose "Hive" for its more active connotations and its element of fun.

My sketching process produced numerous logo ideas for various brand names. For Hive, I started with a box to convey our product's storage function. I played around with the concept of a beehive before settling on my final design: stacked boxes reminiscent of the shape of a capital "H." This communicated our product's key message and personalities: simple, professional, and organized.

Colors


Hive also needed a color palette to encourage feelings of active engagement within a soothing environment. I chose a complementary color scheme composed of shades of teal to reflect dependability and security, a light blue to represent friendliness, and a contrasting orange to depict inviting, vibrant energy.

EXECUTION

I transformed barebones sketches into a clickable prototype through rounds of exploring visual design, conducting usability testing, and iterating on user feedback.

Balsamiq Sketches


To be able to share my mockups with a remote design partner more efficiently, I used Balsamiq to sketch initial concepts. I created several variations for the landing page and layouts for additional content pages, focused on iterating quickly and communicating ideas. Once the partner was on board with selected mockups, I moved into the next phase of concept development.

Low-Fidelity Wireframes


Using my sitemap and a list of project requirements as reference points, I built wireframes in Adobe Illustrator for our MVP. I then wanted to test if the landing page design adequately conveyed our value proposition, along with how users would accomplish the primary tasks identified in our user flows. I set up 5-minute tests with random participants through UserTesting.com and recruited survey respondents for in-person usability tests. In-person participants were guided through an InVision prototype using a test script.

Feedback generated from the tests of my interactive wireframes informed my top action items, including:

  • Revise copy in pricing section and account settings to clarify tier benefits;
  • Add text or visual elements to provide users with more system feedback as they go about completing an activity (e.g. whether or not content is automatically saved); and
  • Rethink position of global navigation bar to increase navigability and conform to standard design patterns for the location of account settings.

High-Fidelity Prototype


As I transformed my wireframes into a high-fidelity prototype, I put my iterations to the test on UsabilityHub through a Five Second Test to gather first impressions of images and page elements, a Navigation Test to gauge navigability, and a Preference Test to validate button placement. I also conducted a second round of usability testing. Synthesizing the feedback from these tests helped to ensure that each revision to the design was borne out of improving usability and utility as opposed to pure aesthetics.

Take a look at the final clickable prototype!

KEY LEARNINGS

Creating this web application challenged me to devise an intuitive solution to the organizational frustrations of users regarding existing notetaking apps, within the limitations of specific business requirements. I also learned the importance of in-person usability testing, along with the necessity of repeated practice, to be able to guide easily-distracted users and obtain feedback on issues critical to a product's viability and feasibility while still leaving enough room for exploratory tangents and unexpected insights.

With more time, I would build out additional screens to test our search and share functionalities and collaborative features in order to develop Hive's capabilities for social networking and more advanced corporate needs.

CODING

Coming soon!