Cache Grab

Capstone Project

Research Analysis Design
cache grab screen shot

The Project

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.


Why create this product?

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?


Contextual Enquiry and Surveys

survey results

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.


Competitor Analysis

style guide

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.


Personas

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.

personas

User Flows and Sitemaps

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.

site maps and user flows

Low-Fidelity Wireframes

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.

wireframes

Brand Identity:
Product Name, Logo and Style Guide

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:

design images

High-Fidelity Wireframes

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.

high fidelity wireframes

Clickable Prototype

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.


Preference Test

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.

preference test results

Mockups

All high-fidelity mockups were created using Sketch.

mockups

The Results

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.


I'm currently seeking a full-time position in UX design.
If you like what you see and you want to learn more please contact me!


uxcrich@gmail.com

613.408.6778

Based in Ottawa, Canada

Download Resume


View Recommendations


Back To Top