Solution

The revamped Blueprint Website

A complete redesign of the Blueprint website that better supports fast navigation and document view at a glace.

Relies on Familiarity

Leveraging familiar features from popular applications can streamline BluePrint’s onboarding process, allowing users to apply existing knowledge seamlessly.

Improved Document Information Display

Changing “Modified by” to “Uploaded by” to help users identify the uploader for inquiries. All document details are now consolidated in one area for easier viewing, with markings for snippet documents to address stakeholder concerns.

Enhanced Organization with Tags and Folders

Tags allow users to filter documents easily, improving searchability. The folders feature enables grouping files for seamless viewing, sharing, and interaction, with folders displayed at the top for quick access and contents visible below.

Optimized Document Viewing and Navigation

The document view includes multi-page thumbnails, zoom controls, and a page jump function. Sharing features were moved to the top for visibility, and annotations are now accessed via a prominent pen nib icon. Enhanced search and filtering allow better comment sorting, while “Jump to highlight” buttons enable quick navigation.

try it out!

Working Blueprint Prototype

Research

To solidify the target user groups and to better fit the site to its audience, we interviewed two Cooley Associates and a Cooley DOJ Legal Assistant.

We initially interviewed the associates about the Blueprint platform and followed up with user testing to acquire feedback throughout the project process.

User Personas

After identifying the reoccuring themes of the platform, here is how we defined the customer stakeholders:

Competitive Analysis

Once we had a better understanding of the customer base, we needed to know how to blend user needs and design conventions in order to suit our client's business goals.

UX Flows

Site structure affects the user experience. We focused on the different ways of categorizing and searching for documents. Here's how we brainstormed a streamline process:

Lo-fi Design

UI sketches

Focusing on the different ways of organization and search methods, we were inspired to provide two main paths of possible flows. Similar to the competitive audit apps, we incorporated specific search filters such as tagged categories, however we included a better sense of grouped organization, which the other apps seemed to lack.

Low-fidelity wireframing and Initial Prototype

For the initial prototype, we built on UX Flow 1 and UI Flow 1, integrating tagged categories and bookmarks for streamlined document management. A view toggle allows users to switch between list and grid views, enhancing flexibility and efficiency.

Hi-fi Design

Initial Hi-fi Prototype

The initial high-fidelity prototype integrated both search and categorization options, allowing users to choose their preferred method for finding documents. We enhanced document interaction by adding commenting and text highlighting while removing the unused comparison feature. A compact view provides a pop-up preview with a snippet of document content for quick reference. Based on user testing, we adopted a simplified document library layout over a complex folder structure, ensuring quick access. Once a document is selected, users can engage with a more interactive menu for in-depth analysis and management.

However, while the prototype offers flexibility, some users may still find the dual navigation options overwhelming. The compact view's preview snippet might not always provide enough context, requiring users to open documents fully. Additionally, the simplified document library layout may not accommodate users who prefer a more structured folder-based organization.

Revising and finalizing high-fidelity screens

We removed the "Document Status" tags, as finished documents are typically uploaded directly to BluePrint. While the feature was nice, it detracted from BluePrint's core purpose as an archival file management system for small firms. Additionally, we switched the order of filters and folders, placing folders on top for easier access. To enhance navigation, we added breadcrumbs that allow users to backtrack from anywhere they click. The palette was updated to shift from a cream-white to a yellow-cream tone, evoking more clarity and cleanliness. Lastly, an easily accessible log-in/log-out button was added to the top bar, available from anywhere.

Users can now view all pages at once in a vertical preview of the PDF content, making it easier to navigate. Additionally, they are able to zoom in and out on PDFs to read the text more easily and jump through pages by typing in a page number. The close button was changed to an "X" for clearer indication that it closes the current view, as opposed to transporting users to a new page like the chevrons elsewhere. An icon was also added to mark annotations as "Priority Review".

Reflection

What did I learn?

Do not be afraid to edit and revisit pieces throughout the design process. Revisions and iterations are all about making sure the design truly works for the users. By listening to feedback and tweaking things along the way, each change is an opportunity to enhance the user experience based on real-world usage and preferences.