PROCESS

Task Analysis

One of the first things we wanted to do after receiving the brief was to see how users reacted to the  existing site and test the flow and basic functionalities that CopyCopy has. We had users run through a set of tasks and recorded their reactions. During this task analysis a raft of issues were revealed around the overall usability of the project. Based on these findings we discussed with the client expanding the brief from the original focus on the clip organisation to include onboarding.

Competitive Analysis

There was clearly some confusion around the product, next we wanted to consider who are CopyCopy’s main competitors, who was doing something similar and how were they explaining their product and onboarding new users. We identified three of the biggest competitors as being Google Keep, Pocket and Evernote.
During the analysis we found that the main differentiator between these products and CopyCopy is CopyCopy’s ability to copy and store pretty much any type of item, essentially anything you can use copy on, can be CopyCopy’d. In order to look into this further we compiled a survey, our goal being to get insight into peoples copy and pasting habits.

Survey Data

Some of the main points we took away from the survey were:

• Copy pasting is predominantly a work or task-related activity. This implied to us that organising and accessing information needed to be a quick process that doesn’t interrupt peoples workflow.
• We also learnt that, though people store all types of information, bookmarks and text come up as one of the most prominent copy pastes, affirming that across work and casual environments people like to bookmark content and snippets of information. 
• Furthermore the survey revealed that increasingly people like to store their copied or saved content online rather than offline.

User Interviews

In addition to the survey we conducted interviews with 10 people to get some more qualitative data to back up the survey findings and  to understand people’s copy and pasting habits, and how they collate and store information.

We discovered that most people don’t have a singular approach to finding and storing information, while they may want to use one app to manage things they don’t feel there is something that can manage it all.

Pretty much all of the interviewees mentioned that they use or have used bookmarks to manage information they find online, but tend to abandon bookmarks, preferring to just Google a page again than try and sort through thousands of links for a single snippet of information.

Personas

We created two personas who, based on research and interviews, we perceive to be representative of users of CopyCopy.

Design Studio

Working with the founder and developers from CopyCopy we ran a brainstorming session to sketch ideas. We wanted to target two specific areas, the on-boarding and the clip list organisation. We ran two rapid sketching rounds for each topic, taking the best ideas from each person and implementing them in our designs for the second round.

Paper Prototype

This led us to our first iteration. After the initial task analysis, we knew we needed a way to let users know exactly what CopyCopy was and what it can do, we felt the best way to do this was with a video. During testing, most people actually skipped the video yet wanted to know more about CopyCopy before signing up.

Once in the app we wanted the user to be able to access and edit all the information for each clip, we tried using a contextual sidebar. In testing, people found that having to click on the clip and edit in another location confusing and annoying. We realised that individual clip editing within the clip itself would perhaps be a better solution.

Wireframes

For the second iteration we removed the side bar and placed all the functionality onto each individual clip. This proved much more successful in testing although we had a few issues with the plus icon and information icon confusing people.

We also wanted a way to sort the information, so we introduced a sort by and tagging feature. This would aide Peter and Claire in finding and sorting their information, something they both identified as a pain point.

High Fidelity Prototype

For the third iteration we made the landing page more informative, keeping the page short and to the point. Users can clearly see what CopyCopy does and how to use it before signing up to the service.

In terms of visual design, we introduced a dark, high contrast background, using greys to imply a sense of professionalism and cleanliness, dabbled with action areas of turquoise so as to not oversaturate the product.

Summary

So to summarise we feel we solved our problems of a confusing sign up process, plugin install and unclear cliplist by simplifying the landing page, removing some less essential features, hiding secondary items, and adding a fresher look and feel.