October 2020 - December 2020

File Picker Redesign

Product Designer & Frontend Engineer | Instabase
Project Context
Instabase is a B2B SaaS company. Instabase's product is a platform or, operating system (OS) as referred to by the company, that allows businesses to create workflows around document processing.

As a software engineer on the PLEX (Platform Experience) team at Instabase, one of the projects I worked on was a complete redesign of the OS.

One goals of the "OS Redesign" effort was to get away from the existing "file system" approach of Instabase, and move towards the experience of a modern OS, like Windows or macOS.

Much like on the Finder app on macOS, Instabase's "File Picker" component allows users to specify files and folders where they want certain actions to occur. It is incorporated in numerous "applications" inside Instabase's platform. Selecting an asset with the File Picker is often the first step to starting a flow within the apps.

Because of the File Picker's ubiquity across the Instabase platform, the team decided that redesigning the File Picker would be great first project, as part of the OS Redesign epic.
Project Goals
In terms of functionality improvements needed for the new File Picker design in contrast to the old one, the goals were to:
  • Add the ability to search, by asset name and through certain filters.
  • Add "Shortcuts" to make asset selection easier. Shortcuts will include "Recently Used" and "Bookmarks".
  • Add ability to browse multiple directories at once (with horizontal scroll).
The other goal of the File Picker Redesign project was to update its styling and appearance.  Up until the redesign, Blueprint and Bootstrap were the only UI libraries/design systems being used across Instabase.

As part of the larger OS Redesign epic, the PLEX team built out Instabase's new internal design system, Pollen. Starting with the File Picker, all Bootstrap and Blueprint components were to be replaced by Pollen's, so all of Instabase would have a cohesive, modern design.
My Contributions
I created all the wireframes/prototypes of the File Picker and subsequently refined them after going through design review sessions with another designer and my project manager

Several elements/components used in the prototype designs came from Pollen (such as the buttons, inputs, dialogs, and dropdown components).

I wrote and tested all the frontend code (React, Typescript, HTML, CSS) for the File Picker. This code was reviewed by other frontend engineers on the PLEX team.

I had progress update meetings with the project manager and my teammates every two weeks

Existing File Picker Design

Shortcomings of Existing File Picker Design
  • 1. Workspace Dropdown
    ‍
    Navigation: there is no indication that one must select the right workspace before choosing a folder. It looks optional.
    ‍
    Usability: The pre-selected workspace is the first on the list, alphabetically. Dropdown can contain many workspaces making the search arduous.
  • 2. Refresh and New Folder
    ‍‍
    Placement: Placed on the same line and with the same treatment as workspace, their center position fives them a primary importance that they do not have.

    Both are secondary or even tertiary actions that occur less than picking a workspace, or selecting a folder/file
  • 3. Footer Buttons
    ‍
    Could be more explicit. There's also inconsistency with placement (sometimes CTA is on the left, sometimes CTA on the right)
  • 4. Breadcrumbs
    ‍
    As we want to move away from an All-File-System solution, the breadcrumb becomes becomes problematic
    ‍
    Placement: front and center
    Becomes the shortcut to searching the folders
    ‍
    Forces by its nature to map out where things are and their organizations within a file system.
    ‍
    If it is understood we cannot move away from a file system led application, at least we can take steps to make it less front and center.
  • 5. Selection Area
    ‍
    Only the text is selectable on hover (change of cursor only on text, not the row), yet there are shortcuts at the end of the row.

    On hover, the entire row should change color.

Prototype #1

Prototype #1 Properties
  • Have separate displays for "Search by" input and "Selected File of Folder" text
  • "Shortcuts" and "Browse" sections are 2 tabs
  • "Filter By" menu opens card below search bar, pushing down content
  • "2-Select your File or Folder" section is able to be scrolled horizontally
  • "Filter by" selections show as chips in the search bar
  • Specific file type callout at top
  • CTA buttons are always at the bottom right of the dialog
  • Title of the file picker changes based on use case

Prototype #2

Prototype #2 Properties
  • Make section titles larger & add icons
  • Have only one display for selected and searching file
  • Remove "Shortcuts" tab
  • Remove Most Recently Used section
  • Change name of “workspace” to “Space”
  • Specific file type callout at top
  • “New folder” CTA at top bottom
  • Add tooltips to icons

Prototype #3

Prototype #3 Properties
  • Make "Browse" and "Bookmarked" sections into 2 different tabs
  • Add arrow buttons to “Select your file or folder” to make horizontal scroll easier
  • Change "Browse" text to "Select your file or folder"
  • Make file picker smaller in height (>30%)
  • Increase radius of corners of dialog

Demo of Built-Out Component

Technologies Used
Building
  • React
  • Typescript
  • Pollen, internal design library
  • Styled-Components
  • HTML, CSS
  • Storybook
Design
  • Figma
Testing
  • Jest
  • react-testing-library
  • Cypress
  • Ghost Inspector
GITHUBLINKEDINRESUME WEBSITE