RecBook is a cloud storage site developed as a multimedia journal. It is meant to save an assortment of personal and internet photos, documents and links into organized content.
User Researcher, Interaction Designer, Visual Designer, Branding, Information Architect, Prototyper, Usability Researcher
Figma, InVision, Google Survey, Usability Hub
Usability Test Summary, User Task Flows, Sketches, Low-Fidelity Wireframes, High-Fidelity Mock-Ups, Style Guides, Market Research, Personas, User Stories
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 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.
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.
75% of respondents kept a journal at some point and almost all were interested in storing content online.
Top needs were to upload pictures, save pictures and links from the internet and save documents.
Most of the respondents were interested in exploring and sharing content with contacts.
To understand the market, a review was done to find internal and external positives and negatives of 3 major competitors.
It is important to have easy searchability, clear organization, ability to share, social networking aspect, diverse content - both original and internet.
A closer examination of a couple key types of users. Examine Personas.
“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.”
Community, Usability, Organization, Value
To be able to organize information from different areas, in one place.
To save & easily access her children’s achievements and records.
Difficulties searching specific content, information feeling scattered.
Lacking ways to make notes or follow-up comments to online content for teaching.
“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.”
Socialness, Mobility, Exploration, Convenience
To be able to save found and original content in one place.
To be able to collaborate with others on topics and albums.
Difficuties saving and subcategorizing online written and image content.
Challenges in collaborating on photo albums and sharing between groups.
Wireframes outlined steps of the major processes of the site, such as onboarding, uploading content, creating content and browing network activity. Examine User Stories.
User flows were put into action with paper wireframes. The concept was futher developed going from paper to digitial wireframes.
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.
The thought process building ideas around journal. Style Guide
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.
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.
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.
The final version of mock-ups after several rounds of iterations and testing.
Adjustments were made through rounds of iterations to achieve consistency and clarity in the design.
Dashboard updates included button color changes, left menu highlights, wording and book background.
Collabortion page updates include color, font size and button variations, as well as the addition of a chat box.
Details were updated ensure consistency, such as making the pop up boxes the same size.
Testing was done to establish clarity in details and functional usibility thoughout the site.
Variations of features were tested with Usability Hub for feedback to make design decisions.
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.
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.
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.
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.
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.
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.