Summary

There are so many applications to sort and collect data, but KeepIt is different because it is a SaaS application that lets the user sort and collect a variety of information - notes, documents, images and links - in a single place. It has a modern and functional UI that would provide its users with a delightful experience to create simple documents, store images, links, and collaborate with others.

Problem

Most of the available tools on the market, such as Evernote, Pocket, Pinterest, etc. allow for saving one type of content, but they all fail when it comes to saving variety. There is a demand of a desktop app that would be fully responsive, has a visually pleasant UI, is easy-to-use and allows for saving and organizing a variety of content.

Solution

Based on competitive analysis, user research and survey results, I came up with the project structure, and focused on the features at hand, instead of having to worry about navigating the entire project. In addition to saving all of the content in one place, users can file this content into different project folders that they can share with collaborators. They can start with a free account and upgrade to a paid one at any time.

View clickable Prototype

Process

User Surveys

In my role as UX and UI designer, I was involved in every phase of the project from user research to final prototypes and user testing. In the planning phase the key goal was to become familiar with the users and understand the needs of the people who will use the application. I created and distributed a user survey, focusing on the user’s behavior and their need for a service like KeepIt. I wanted to know how my users interact with their devices, the tools they currently use for saving content, their collaboration and sharing of resources, and their use of social network logins to sign up for websites. I determined potential patterns by analyzed the data, comprised of charts, graphs and text, and came up with the following conclusions:

  1. Creation of a responsive site so our users can access and view content in KeepIt from any device.
  2. Better navigation, grouping the content and adding note-taking features will be a focus as I design KeepIt
  3. Competitive analysis, that I created, helped me explore top competitors among Pinboard, Pocket, Memosnag, Xmarks, and Diigo, determine how KeepIt is different from them and how we can solve similar usability issues.
  4. Simplicity in creating notes is recommended. Users want the process to be quick and accessible, much like using traditional pen and paper. Indexing the notes for quick searches will also be very helpful feature.
  5. Being able to collaborate with ease will be required, and sharing needs to be simple.
  6. A requirement for KeepIt is to include social registration. Based on the survey results, this feature will be used by most users.
Survey results
Personas

Equipped with all the survey results, I conducted in-person interviews with some of the survey participants. The interviews allowed me to create a written representation of my intended users, understand better their motivations, and how they will use a desktop application like KeepIt. I used diverse user types from different backgrounds to determine and finalize the requirements, validate my concepts and move on to the next step.

Personas
User stories and user flows

The art of the writing good user stories is the most difficult of all, especially in an agile environment. If the designer does not correctly evaluate the user needs, it does not matter how well the project is executed. I wanted to build a product that provides value for the users; that is why I felt that the customer involvment is the most critical factor for determining the requirements. With this in mind, I crafted a list of user stories for new and returning users. With all the user stories in mind, I created one spreadsheet with Nice-to-haves, another one with prioritized user stories and a third one consisting of user stories for MVP.

Dashboard and Sign-in userflows
Branding

I selected Varela Round and Lato for the design of KeepIt. I limited the number of the chosen typefaces to two to keep the interface consistent and simple, and designed a logotype with a style guide for its usage. For the color scheme, I chose an analogous color scheme, with blue being main color as it appears calm and professional. With all these choices on hand, I designed a style guide for the application for further reference.

Wireframes
Wireframing, mockup, prototype

Using Balsamiq and already established set of features, I created low-fidelity wireframes to display plan for the user flow while finding best placement for call-to-action, images and additional information. These served as a place to start as I added elements on the page and sketched the best structure.

Low Fidelity Wireframes
High fidelity Wireframes
Clickable prototype and user testing

In the design process, it's important to test early and often, so I submitted my Invision high fidelity prototype to Peek for quick usability testing, and received a few responses. I also submitted my clickable prototype for testing on UserTesting.com. Using a set of questions that I prepared for the testers helped me gather a valuable feedback and make a list of items that I can improve. Additionally, I conducted three other in-person usability tests with volunteers. Prototyping and usability tests allowed me to gather feedback and improve my designs.

I ran a Five Second test on Usability Hub to receive qualitative feedback on my home page design. Based on the feedback of 30 users, users seem to recognize and remember the name KeepIt. Many agree that the brand appears trustworthy. I also created a Navigation Flow Test on Usability Hub and received feedback from 63 participants on the placement of the Add button on the dashboard mockup.

After testing the interactive prototypes and performing preference, navigation flow test and a few 5 minute user testing sessions, I was able to make placement decision of the Add button based solely on the test results.

View clickable Prototype
Style guide

Conclusion

Although I was definitely on the right track, some of the decisions I would have not been able to do myself. For example, because of privacy concerns, I would have never guessed that users prefer signing in using their social media accounts. In fact, based on the user surveys, 80% of the people use this feature. Another interesting fact is that the results form the Preference test were slightly inaccurate, based on the fact that the test received only 9 responses. If I did not do the Navigation Flow Test, I would have drawn a wrong conclusion for the placement of the Add button. After testing the interactive prototypes and performing preference, navigation flow test and a few 5 minute user testing sessions, I was able to make placement decision of the Add button based solely on the test results (attach visuals). Based on the user’s feedback, these are my final thoughts:

While all the people thought that the overall design and layout of each page looks good and the site looks professional and trustworthy, I agree with the opinion that the account settings menu is buried at the bottom of the dashboard page, therefore difficult to see.

All the users shared that the structure and the navigation of the site is clear and easy-to-use. However, it is pointless to offer a free trial if there is a free account. The free account should serve as a trial for the service and they would change “Start your free trial” button to “Sign Up” on the home page.