KEEPAROO

Keeparoo is a SaaS (Software as a Service) web application which allows users to collect information and store it in a single place. Users can create simple documents, keep images, links to websites, and collaborate with others.

DELIVERABLE

Design |Prototype | Website

CORE RESPONSIBILITIES

UX Process | UI Design | Branding | Development

TOOLS USED

Adobe Illustrator, Photoshop | Sketch | InVision | HTML | CSS

The Challenge

There were many problems to consider when beginning to design the keeparoo website. Users needed to be able to easily store images, save links, and create notes. Keeparoo users also needed to have the ability to collaborate with other users. This application also has to work across different platforms.

The Solution

Design a web application for users to create notes, keep images and links, and have the ability to share that information with individuals or teams. There will be three different plans available. The differences between the plans will be the amount of pouches, collaborators, and storage that the user will need.

THE PROCESS

USER RESEARCH

UNDERSTANDING HOW USERS ORGANIZE SAVED INFORMATION

The first step in solving the problem was to do a survey of potential users. A Google docs survey of 21 questions was conducted asking users about the devices they use for browsing and saving content online. The survey also asked about the tools they use most when they’re online and what they like and don’t like about the tools. The age range was between 18 and 54 years. The professions varied from teachers, students, artists, and professional positions.

83%

Polled users browse social networks online the most often followed by news at 67%.

75%

Use their browser to bookmark links or images they want to keep. Other close choices were Pinterest and Facebook.

68%

When asked about note-taking habits, over half keep notes for personal and business reasons.

50%+

Polled users browse social networks online the most often followed by news at 67%.

VIEW SURVEY RESULTS

COMPETITIVE ANALYSIS

RESEARCHING THE COMPETITION

Since there were already some variations of cloudsharing apps out there I did an analysis of three competitors similar to keeparoo to understand the competition. I compared Ember, Readme.io, and Evernote. I compared the dashboard-home page, functionalities, sharing functionalities, and pricing of each application. See my competitive analysis here.

VIEW COMPETITIVE ANALYSIS

USER PERSONAS

IDENTIFYING POTENTIAL USERS OF KEEPAROO

I developed three user personas based on future users of collaborative cloudsharing apps. The common goals of these users were to save time, be organized and to have an app that was easy to use.

HENRY S.

18 y.o. college student

"I like new technology and using it to be organized is a plus."

SAMANTHA A.

44 y.o. mom, student

"I would love an easy to learn app for organizing my pictures."

ALLAN W.

31 y.o. software developer

"I like keeping in touch with my family and sharing fun stuff I find on the internet."

VIEW COMPLETE PERSONAS

USER STORIES/WORKFLOWS

CREATING USER STORIES AND WORKFLOWS

Based on the data gathered from user surveys and personas, I created a number of user stories containing all of the features that new users would love to see feautured in keeparoo. From these stories I sketched out a couple of workflows: one on upgrading an account and the second on favoriting, or tagging, an added item. The workflows were quickly hand sketched then drawn in Draw.io.

BRANDING

CREATING A LOGO AND COLOR SCHEME

My goals for branding this application was to make sure it had a catchy name and the colors are fresh and contemporary. The name “keeparoo” came from the idea of mother kangaroos keeping their joeys in their pouch for safekeeping. The idea was that users want to keep their images, links, and notes safe too. The logo graphic is a silhouette of a mother kangaroo with a little joey in her pouch. For the main typography and headers, I chose the Montserrat font for its simplicity and serif style. For the subtext, I selected Lato, which is available in most alphabets and has lots of style variations.

WIREFRAMING AND MOCKUPS

DESIGNING LAYOUTS FOR USER TESTING

Based on user workflows I next designed high-fidelity wireframes in Illustrator in basic black and white. These wireframes were user tested through a usertesting service that InVision offers. The results from the prototype test is discussed in more detail below.
Using the design styling, color palette, and the feedback on the user tested wireframes, I created a series of full-color mockups in Sketch. Below are a few examples of the wireframes along with the finished mockups.

VIEW LO-FIDELITY PROTOTYPE

VIEW HI-FI FIDELITY PROTOTYPE

PROTOTYPES

GATHERING INVALUABLE FEEDBACK FROM USER TESTING

In order to conduct a usability test on the wireframes, I created a prototype using InVision. This prototype was submitted to UserTesting.com through inVision, an online prototyping software, for critique. Upon the results of the first test, I created a second prototype using the mockups created in Illustrator. This allowed the users to view the full-color variations of the site with the fonts and colors I selected.
The usability test was conducted by a volunteer user tester and she sent me a video of her session. I learned the tester liked the name keeparoo and guessed that the app was some file-saving service for images like Pinterest. She thought that the prototype would work in a business setting because of the collaboration aspect and the simple design. She said that the design reminded her of a Powerpoint presentation with the boxes looking like slides. She liked the simple design but wondered how projects would work and how limiting the sharing would be. She also was concerned with the sizes of the photos/images and if the boxes were large enough to view them.
Based on these results, I opted to keep the name keeparoo, and incorporate some changes based on her feedback to the overall design. Overall I felt that it was good feedback.

VIEW USABILITY TEST VIDEO

DEVELOPMENT

PUTTING THE DESIGN INTO CODE

The next step after the final user testing was to code out the full-color mockups in HTML and CSS. I used Atom to code and Chrome for testing that code. Since this was my first real coding project, it was fun but challenging. The most challenging process was converting my design that was done in mostly Illustrator. I had to think about how grids and containers worked within a webpage plus make sure it was responsive when the screen size was changed from a desktop, tablet, or mobile screen. It was also great to learn new software programs like Github, Sublime, Atom, and even the inspector tool in Chrome.
Something I would change for this first HTML/CSS project was to make my design in Sketch simpler for coding purposes. This project made me realize how much more I have to learn about front-end development. I look forward to practicing coding in my future projects and know that it’ll get easier.

VIEW CODE ON GITHUB

What I Learned

I feel that this project was successful in its design and ideas for an all-in-one application for users in a business or personal setting.
The parts of the project that worked for me is the design itself because it is simple and the colors are soothing. I’m happy with the name, keeparoo, because I was able to make it my own and have fun with the design, while making it friendly and engaging for the user.
What I thought didn’t work were the sizes of the sample pictures and files within the dashboard. I think I could increase the size of them, or stack them, to make it slightly more organized. Also the sidebar could have more options geared toward project organization.
Since this was my first major UI/UX project from start to finish, I learned a lot during the process. It was very challenging and rewarding to see keeparoo come to “life.”