RECbook Case Study

RECbook Header Images
Desktop Prototype
Mobile Prototype

The Problem

My cloud storage research revealed a need to upload and organzine a variety of content. This ranges from photos and videos to documents, links and articles. In addition, content needs to be easy to find and users want to make notes or comments on cloud content. The capability to view contact’s content, share, and collaborate on topics is desired.

The Solution

The response to these issues is RECbook. By creating a series of books with chapters, the user can save themes and stories in their own personal library. Multimedia books allow the saving of photos, videos, documents and links. A network for viewing activity, collaborating and sharing allows for social interactions with contacts. The user can search the site using key words given in descriptions.

User Research: A survey was conducted to understand user’s familiarity with cloud storage, saving information online, content type and desired social interactions.

A survey showed many people had kept a journal, personal photos and photos from the internet and documents were top itmes to save and people were inerested in a social aspect.

Journal Graph

75% of respondents kept a journal at some point and almost all were interested in storing content online.

Top Needs Graph

Top needs were to upload pictures, save pictures and links from the internet and save documents.

Social Graph

Most of the respondents were interested in exploring and sharing content with contacts.

Competative Analysis

To understand the market, a review was done to find internal and external positives and negatives of 3 major competitors.

SWOT Conclusion:

It is important to have easy searchability, clear organization, ability to share, social networking aspect, diverse content - both original and internet.

Google Drive Logo

Google Drive

Strengths
  • Ability to save original & external files.
  • Easy sharing of content.
  • Privacy control.
Weaknesses
  • No multiperson realtime collaboration.
  • Unable to explore content casually.
  • Difficult to interact with internet content.
Opportunities
  • Opportunity for real time collaboration.
  • Network to connect and follow.
  • Unique search capabilities.
Threats
  • Ways to save & share internet content.
  • Tags for cross reference.
  • Cloud storage with networks.
Pinterest Logo

Pinterest

Strengths
  • Folders and subfolders for organization.
  • Easy to network and follow boards.
  • Web extention for saving.
Weaknesses
  • Dead links & overload of similar content.
  • No document saving.
  • Lacking capability for original content.
Opportunities
  • Multiple category saving & auto organize.
  • Creating content, not from a blog.
  • Prompts to explore own pages.
Threats
  • Sites with more diverse content.
  • Ability to create original content.
  • Sites with more detailed saving.
Evernote Logo

Evernote

Strengths
  • Ability to save clips of internet content.
  • Can make note on a page & share them.
  • Web extention for saving.
Weaknesses
  • Difficult to upload original media content.
  • Unable to bring in links.
  • No way to browse topics.
Opportunities
  • Integrate calendar or alerts.
  • Better word processor & sync documents.
  • Add subfolders.
Threats
  • Sites that have social connection.
  • Ways to search outside of connections.
  • Sites with lesser fees.

User Personas

A closer examination of a couple key types of users. Examine Personas.

    Profile Picture Allison
  • Profile
    Allison, 45
  • Profession
    Speech Pathologist
  • Pasttime
    Mother to 3 Kids, 2 Dogs
  • Location
    Wisconsin Dells, WI

“My kids are involved in sports and activities. Between them and keeping up on work with S&L development, I have very little free time.”

Motivations:

Community, Usability, Organization, Value

Goals:
Check

To be able to organize information from different areas, in one place.

Check

To save & easily access her children’s achievements and records.

Frustrations:
X

Difficulties searching specific content, information feeling scattered.

X

Lacking ways to make notes or follow-up comments to online content for teaching.

    Profile Picture Sophia
  • Profile
    Sophia, 33
  • Profession
    Social Media Manager
  • Pasttime
    Books, Food, Travel, Cat
  • Location
    Queens, NY

“I’m always looking for a good book to read, a good trip to take or tips for cooking. Work requires me to keep on social media ideas and trends.”

Motivations:

Socialness, Mobility, Exploration, Convenience

Goals:
Check

To be able to save found and original content in one place.

Check

To be able to collaborate with others on topics and albums.

Frustrations:
X

Difficuties saving and subcategorizing online written and image content.

X

Challenges in collaborating on photo albums and sharing between groups.

User Stories & User Flows

Wireframes outlined steps of the major processes of the site, such as onboarding, uploading content, creating content and browing network activity. Examine User Stories.

  • ONBOARD: As a new user I want to sign up for an account.
  • CREATE CONTENT: As a returning user I want to create and save content (notes, documents).
  • UPLOAD: As a returning user I want to upload files (videos, images, PDFs) from phone or computer.
  • BROWSE: As a returning user I want to browse friends/associates content.
User Flows

Wireframes

User flows were put into action with paper wireframes. The concept was futher developed going from paper to digitial wireframes.

Paper Wireframes Paper Wireframes Paper Wireframes Paper Wireframes
Digital Wireframe Dashboard Digital Wireframe Table of Contents Digital Wireframe Book
Wireframe Testing:

User testing for wireframes tested “Signing Up for an Account”, “Adding a Piece of Content”, Organizing a Piece of Content. The sign-up portion went smoothly for all, though there is protentional for more robust information gathering at this phase. Adding a piece of content test resulted in changing the wording from “Create” to “Add New Content;” I also needed clarity on wording for “Organizing” as opposed to “Arranging Files.” There was some difficulty conveying this task since it it meant to have some click and drag components. After testing, it was suggested to focus on a desktop version to cater to the features.

Branding

The thought process building ideas around journal. Style Guide

Mood Board Pictures Inspiration Words and Logo Sketches

Color

Parchment embodies the tradition of recording information. Bright white pages keep a blank slate for content. Deep navy grounds the neutrals, representing intelligence and loyalty. Accent colors subtly add vitality. Sage Green: memories and life. Fuchsia: confidence and energy. Periwinkle Blue: creativity.

RECbook Colors

Typography

The goal for the main font is to keep the general text readable and adaptable. The header font adds an accent that conveys a bold, noticeable title with a little personality.

RECbook Font

Logo

The logo adapts the words RECORD and BOOK. It was built on the concept of simplified open book motifs layered on top of each other, with a pencil in the middle. This creates the effect of a traditional writing quill.

RECbook Logo

Hi-Fi Mockups

The final version of mock-ups after several rounds of iterations and testing.

RECbook Dashboard RECbook Book Home RECbook Pages RECbook Pages RECbook Pages RECbook Collaboration

Iterations

Adjustments were made through rounds of iterations to achieve consistency and clarity in the design.

RECbook Dashboard Iterations

Dashboard updates included button color changes, left menu highlights, wording and book background.

RECbook Collaboration Iterations

Collabortion page updates include color, font size and button variations, as well as the addition of a chat box.

RECbook Popup Iterations

Details were updated ensure consistency, such as making the pop up boxes the same size.

Testing

Testing was done to establish clarity in details and functional usibility thoughout the site.

Preference Testing

Variations of features were tested with Usability Hub for feedback to make design decisions.

Button Options

There were a few ideas for the buttons to add page content. Icon buttons were favored overall, however participants were split between the word button options. Another test could be done icons and individual word buttons.

Dashboard Options

A preference test was given to decide whether to back the dashboard book text with white, to boost readability. Since the white somewhat blocked the descriptive photo, results were split. In the end I compromised to use with white backing at a reduce opacity.

User Testing

Testing to gage usability was done using the clickable prototype. The users tested the site for signing up for an account, adding a piece of content and organizing content. In addition, users were encouraged to go through the site.

Left Menu Change

After a round of user testing, it seemed the New Book option on the left menu was redundant, also there was no direct way to the key component of the Collaboration page. This resulted in the removal of the New Book link and added direct link for Collaboration.

More Options Menus

As users went through the pages, it was apparent that not all pages had ways to organize or edit content, so a need to add more option menus.

Conclusion

RECbook succeeded in being able to build out and support a variety of content, as well a being able to share specific media between groups and individual. It was a challenge to keep this project to MVP, and some original ideas were not developed as strongly along the way. Additional elements that could be developed are controlling specific privacy levels, creating original documents and methods of searchability.