Collabspace ECM Web Application

•

Collabspace Web Application

Disclaimer

Sensitive info has been redacted from the images. At the time of the project I was under a NDA with Collabware. Information presented is for personal portfolio purposes, all expressed opinions are my own.

Summary

Due to a changing market landscape, existing enterprise on-premises records and content management functionality had to move to a cloud based solution. A whole new interface and corresponding interactions needed to be implemented to support this business goal. For the front-end design, a responsive and modern framework called UI Fabric was customized for the look and feel of the application. All user experience requirements were wireframed and then prototyped in software tools like Balsamiq Mockups, Adobe Photoshop and Abobe XD.

Background

Historically, Collabware worked with Microsoft platforms, including SharePoint and Office 365, so the end-users of Collabspace, information workers like records management analysts, HR personnel and IT managers, would be familiar with those platforms as well. Collabspace was envisioned as an evolution of features already successfully deployed to clients with Collabware’s other product offerings. Their lay the most challenging aspect of the project – familiarizing myself with how SharePoint, and other connected repositories are used to handle content – so we can design experiences that are seamless within users’ daily workflows.

My role

I was responsible for visual and interaction design of administrative screens, dashboard components and search interfaces, to name a few. Design variations for different screens during wireframing allowed the dev team to utilize UI Fabric for fast implementations. User experience requirements were developed using qualitative methods and market research, together with the product development team and stakeholders. This project was the first web application I was involved in at the beginning, which allowed a tighter design process to be established around the design for font-end developers and QA engineers.

Details

Presented further are a few of many pieces of functionality I designed interfaces and interactions for.

Dashboard and Admin UI

Viewing the dashboard and admin configuration were among the first user experience milestones. The dashboard was designed to be expandable and present different features within the application as separate components, including on-boarding checklists and helpful resources, available storage, and saved searches. Closely connected to the dashboard is the configuration screen for storage and connected content sources, which also incorporates a visualization of the storage usage. Released stable builds, effectively the most up-to date version of the software, were used internally by stakeholders, which provided a lot of valuable feedback on usability parameters like performance, infrastructure scalability and content integrity.

Basic and Advanced search UI

Search was central to the whole application. Two search methods, basic and advanced, were incorporated into the design and programmed to work across multiple sources of content (File Shares, email, SharePoint, etc.). Users needed a way to primarily search for content by basic keywords, as well as have easy access to a query builder for advanced searches. Since grids and search components were such ubiquitous web app features for end-users and stakeholders, a lot of the search UI design was based on common sensibilities. Mocked up clickable prototypes allowed to quickly share ideas with the team to evaluate such heuristic approaches and thus focus more on business requirements.

Designed as part of the top application bar, basic search input allows workers like HR directors to jump into search from any point in the application to find relevant employee files and emails. However If a precise metadata search is needed by someone like a finance officer, then an advanced search query, with groupings and modifiers, can be composed. Existing users were instantly familiar with the interface for composing metadata queries because of a similar design in another Collabware web application. At the same time, new users benefitted from empty states comprised of clear and informative instructions. To mitigate the visual density of complex advanced queries, property selection and value input were enclosed in a right-hand side panel. This achieved a cleaner, more readable query builder UI that could support large sets of properties and present them all uniformly.

Results UI

The results page is designed to be a central location for all content found across multiple repositories. Found documents are presented as rows and columns to show different properties so the right content can be identified easier and lots of content can be shown at the same time. Additionally, features like viewing property details, previewing documents, and updating special properties were designed as context menu options for the selectable content. To make the results manageable and the UI cleaner, interactions for sorting and ordering content were designed into the side. Finally, the customized results view could be saved for quick access later on.

Security Groups UI

Meant for IT-minded users to control access of basic users to found content, the design of the security groups interface is an expansion of user management features in Collabspace. The filterable grid was designed to primarily give an overview of members within each group, with the bulk of management interactions occurring within the side panel. That way an end-user could filter the groups by the name of a member, and edit the group’s membership in the least amount of clicks. To promote Collabspace adoption, the group member management user experience incorporated a design for a suggestions component that provided information from connected sources like SharePoint Online.