# Iterative Design

## Description
For our User Interfaces & User Experiences class, our group was assigned with the task of designing an interactive interface for an emerging startup. We chose to design the interface for [Needl](https://www.ycombinator.com/companies/needl), a Y Combinator startup whose goal is to create an intelligent search bar for all of a user's apps.

## Part 1: Sketching and Wireframing

### Pre-Design Thinking

We decided to design Needl for a desktop interface, since that's where lots of users' documents should reside.

We think corporate workers with lots of documents and projects would benefit from Needl, as it helps them manage the different tasks at hand. In addition, students would also benefit from Needl, because it helps them keep track of documents they need for classes and club activities.

In general, the more documents and work a person is involved with, the more they would benefit from Needl, because it provides a streamlined way to find relevant documents, which can be a fairly hard task.

### Sketching

With this in mind, we created 4 different possible designs for Needl's desktop interface.

<!-- TODO: add pictures -->

### Combining Ideas into a Wireframe

Afterwards, we combined the ideas from these sketches into a wireframe.

<!-- TODO: add pictures -->

## Part 2: Mockups

### Mockup Crit in Studio

Using our wireframe as a baseline, we created an interactive high fidelity mockup of Needl's desktop interface. Then, we received the following comments in our mockup critique session:

- It is difficult to return to the home page, once users navigate away
- The purpose of the application is unclear to new users
- We should choose a different font to make L in Needl more obvious
- We should clarify what the color scheme for folders is, when users browse files
- It is unclear how to logout from our interface
- The three bars at the top right should expand into a sidebar, since they appear clickable
- Have the back button on the bottom
- The logo should link to the home page
- There are redundant ways to exit from the “authorize” page
- The x's at the corner of app icons is unintuitive, and a stressful way to manage connections

### Interactive High Fidelity Mockup

<!-- TODO: add interaction video -->

## Part 3: User Testing

### Determine a Task
There is no single task that would explore an expansive scope of what Needl is capable of. Because of this, we decided to give our users a set of tasks that allowed them to reach every main page of Needl we implemented. These included:
* Viewing and opening files within the folders page
* Getting all search results
* Adding and removing apps connected to Needl

### Testing Instructions
**Scenario:** This is a prototype of a desktop application that allows users to search for any document, message or file across any compatible account a user chooses to link with Needl, such as Gmail, Google Drive and Slack. You will be given a set of tasks to complete with the assumption that you have already created an account with Needl and therefore have multiple apps connected to Needl along with several files you can search for.

NOTE: This is only an interactive mockup made in Figma. You can scroll and click throughout your tasks but you will not be able to interact with every button or search bar as certain functionalities have not been fully implemented.

**Task 1:** Sign in, navigate your way towards the “All Folders” page and select the “Receipts” folder. You should see a table of 4 files inside the “Receipts” page. Once you have reached this page, return to the “Home” page.

**Task 2:** Now imagine you want to make a search for the keyword “Cookout” and view all results. Assuming typing was functional, attempt to make this search in the Home page. Once your search results are displayed, click on one or more files to try and open them outside of Needl. Note that other apps cannot actually be opened in this prototype, so select “Cancel” for any display messages you receive.

**Task 3:** Return to the Home page once more. Now, imagine you want to connect a new application, Slack, to your Needl account. From the Home page, navigate to the Manage Connections page and successfully connect Slack to Needl. If you are successful, the Slack icon will appear in the grid of Current Connections.

**Task 4:** Remain on the Manage Connections page. Now you will attempt to disconnect an application from Needl from the set of nine applications that are currently connected. This can only be done within the Manage Connections page you are currently on. Note that the removal feature has not been fully implemented, so as before, select “Cancel” for any display messages you receive. Feel free to stop once you receive a display for any three of the applications.

### Follow-Up Questions

What parts of navigating through the prototype were most confusing for you? How could they be improved?

How do you feel about the overall design of the application (color scheme, layout, buttons, etc.)?

Is there anything else you wish had been made clearer or more user friendly?

### Testing Videos from UserTesting.com

<!-- TODO: Add links to UserTesting vids -->

### Analysis of Results

<!-- TODO: Write-up based on testing videos -->
The subtasks are explained in the Testing Instructions section above. For the most part, all users were able to follow through with each task to completion (one user could not complete the final task due to unclear instruction and incomplete implementation). The following are the main issues users encountered and what changes could be made to address them:

* Not being able to identify an app due to a small font size (**User 1**). To address this, we can reconsider the size and distribution of images and text to make reading/viewing more accessible for users.
* Having trouble identifying where and how apps can be added or removed from Needl (**Users 2 and 3**). Our prototype uses a large add symbol and a small pencil symbol for each feature, respectively. However, we can include an additional text description or improved icons to clearly indicate to the user what to click on.
* For viewing files, **User 2** suggested making a layout similar to an inbox. This is somewhat already done in the "All Results" page, however it is not the first thing users see. Users may benefit from having this be the Home page instead.
* There was some confusion in navigating to a folder due to unaccessible links in the "Recent Searches" table (**User 3**). This brings up the question on what should be accessed in this table (**user files and Needl folders** vs **user files only**).
* To remove an app, or access an app's settings in general, it may be helpful to have a menu open for each app rather than limit a user to click on add or remove only (**User 3**).