Cache Grab is a SaaS collaboration platform that allows you to save and share a variety of content such as links, images, documents and notes. This is a project I completed for my UX/UI design program at Bloc. My Bloc mentor served as the project manager/voice of the client.
It was hard to predict if this project would be successful without first researching my target user and similar products on the market. I had to learn about user habits, goals and frustrations. Were people happy with their current methods of saving and sharing content or was there a gap in funtionality that I could tap into?
I interviewed users and observed them saving and sharing internet content to better understand habits and frustrations. I also sent out a survey to gather additional quantitative data about demographics and tool usage. This research revealed:
This data, along with my list of observed challenges and frustrations, confirmed the need for my product.
I conducted a competitor analysis to better understand the market and each product’s offerings. I focused on identifying their positioning and differentiators and I compared their features to my own list of requirements for a minimum viable product (MVP).
What I discovered is that the majority of products focused on saving only one type of content, whether it be images, internet content or personal documents. There didn’t seem to be one product that was good for saving all content types/sources.
I created personas for each user tier envisioned for my product. This was a good way to combine my qualitative and quantitative research and added a layer of real-world consideration to my design. Each persona was representative of a ‘typical’ user.
I created user flows focusing on main tasks and goals. Each flow had a clear start and finish and illustrated steps in sequential order. I also created sitemaps to help determine the application’s navigation structure and page hierarchy. When creating these I kept in mind usability standards such as Hick’s law, Miller’s law and the 3-click rule.
I created low-fidelity wireframes for the product page and application using Balsamiq. This was a quick and effective way to organise the site content and page layout.
In order to create the initial brand identity for my product I used a variety of methods such as word associations, mind mapping and sketching. Here are some samples showing the evolution of my design:
To work out exact sizes and placement of elements, I created high-fidelity mockups using Adobe Illustrator. I experimented with different layouts and adhered to UX best practices and common UI patterns.
Using InVision I created a clickable, interactive prototype using my high-fidelity wireframes. This allowed me to test out user flows and get quick user feedback before continuing with my design process. I carried out usability testing with Steve Krug’s usability test script from “Rocket Surgery Made Easy”. This helped me to refine the registration flow.
You can view my prototype here.
One design challenge I encountered was determining the best view for each of the different content types. One option was to display a simple screenshot of the image/document for a clean and streamlined design. Another option was to add an overlaying icon signifying the type of document and providing additional context to the user. In order to decide which design option to use I created a preference test using Usability Hub. The first design won.
All high-fidelity mockups were created using Sketch.
This project was a great learning experience in how to take a project from conception to final design. This work deepened my understanding of user-centric design and I learned how research and usability testing can eliminate the need for guess work and assumptions.
One regret I have is that I did not take a mobile-first approach which would have required me to identify and focus on the vital functionally of the product. This would have challenged me to create a strong product despite the limitations of a mobile screen and would have provided the opportunity for me to be creative with enhancements for the desktop application.