Internal Workshop Platform

Project Type

UX/UI Design
Design System

Contribution

Creative Direction
UX Research
UI Design
Prototyping

An internal collaboration and workshopping platform for one of the “big four” accounting firms.

Overview

A new platform for client intake and running workshops

Working with clients that range from pharma to e-commerce to tech, this multinational professional services partnership needed a new approach to their custom internal collaboration tool, with an emphasis on their intake form and management of workshop and clients across teams.

What follows are snippets of the efforts I contributed to. While this is a high level summary of the project, if you’re curious for more details, I’m happy to expound in person.

UX Overhaul

More important than the visual improvements we undertook was the overall platform reconfiguration. With the amount of functionality built in, there are a varying amount of configurations that could be presented to the user, all with differing amounts of hierarchy of the content presented within those configurations.

For the workshop schedule, the user reads left to right. Controls that affect the time and length of each entry are all housed on the left hand side, with the entries/activities themselves following behind. This layout, based on feedback and user testing sessions, offers the most optimal layout for ease of use.

Smarter Wireframing

To help myself and other designers resist the urge to design in hi-fidelity too soon, the team utilized an existing in-house wireframe kit in Figma. The wireframes we created are styled distinctively to remove confusion when presenting to stakeholders. The results are easy to follow preventing breaks in the process where stakeholders might attempt to move forwards with a design before proper sign-off happened.

This kit helped us designers quickly construct flows that were accurate in scale and naturally lead to the eventual production result without the time drain that can typically occur when designing in high fidelity. This was especially helpful for my process as I was the only designer that was heavily involved in the wire framing and user interface design parts of the process.

Smarter Wireframing

To help myself and other designers resist the urge to design in hi-fidelity too soon, the team utilized an existing in-house wireframe kit in Figma. The wireframes we created are styled distinctively to remove confusion when presenting to stakeholders. The results are easy to follow preventing breaks in the process where stakeholders might attempt to move forwards with a design before proper sign-off happened.

This kit helped us designers quickly construct flows that were accurate in scale and naturally lead to the eventual production result without the time drain that can typically occur when designing in high fidelity. This was especially helpful for my process as I was the only designer that was heavily involved in the wire framing and user interface design parts of the process.

UI Overhaul

Based on how the client was using the old version of the platform (including external tools they were using to fill in gaps), we were able to add a significant amount of features. The simplification in the number of colors used in the chrome makes key pieces of the UI much more distinctive and intuitive.

Search, Filter and
Typography Improvements

This platform has users that each have different objectives and goals which will influence how and what they interact with. Because of this range of users, searching becomes a very useful tool. But it needs to serve up results that both speak to all of the users as well as specific users.

This is where our leverage on typography comes in. Using the client’s in-house custom version of Interstate, we were able to set rules around labels, results, controls in filters (as well as the rest of UI elements in the platform.

[fig 1] As an empty state, the search page shows trending results.
[fig 2] Search results auto populate as the user enters their query.
[fig 3] Filters for the activity catalog.
[fig 4] Filters for the workshop catalog.

Workshop Schedule Improvements

Previously, users were relying on external means to get through workshops, mainly a number of tools that were used for workshop assets and time management. While the new platform that we designed doesn’t solve for asset management (there are tools for that already), it does do a better job of taking in assets from multiple sources and giving workshop leaders a place to house and share those assets.

More importantly, as mentioned before, it also allows workshop leaders the ability to time block on the fly. These workshops are scheduled out to the second. If any hurdles are encountered, the length of the workshop (or specific activity) needs to be instantly updated.

[fig 5] Users start with a blank schedule.
[fig 7] Additional columns can be added for text.
[fig 8] Activity length can be edited on the fly. The rest of the workshop adapts to changes made to any activity.
[fig 9] An optional collapsed view can be enabled to help see the day’s schedule at a glance. Access to adjusting the time remains in this view.
[fig 6] Any activity from the catalog can be added.
[fig 10] Rows can be re-arranged.
[fig 11] The entire platform is designed with mobile in mind, but the workshop schedule view specifically benefits from this. Workshop leaders can go around to participants and still keep tabs on the time remaining and which activity they are on.

Add New Activity Form Improvements

Because users can now manage activities (think of activities as something like an ice breaker to be used in a workshop) within this new platform, we wanted to streamline the process for adding new activities. This intake form has solved a set of complex variables that could account for what constitutes as an activity; the length, type, number of participants, instructions and use case to name a few. While these activities may be submitted with a single use case in mind, the intention is for them to potentially be used across workshops outside of what they were originally intended for.

The complexity of this flow and form types served as a perfect use case for utilizing figma’s component properties across variants. We had a high number of different form fields that needed to be accounted for. Meticulously planning this form field component helped us ideate on this flow much faster.

[fig 12] Users start with entering basic information.
[fig 13] Users are able to review their activity before submitting.
[fig 14] Users can create new sections.
[fig 15] Support documents can be uploaded in a variety of formats.
[fig 16] Ability to add keywords
[fig 17] Base component pulled from library.

Component Library

Throughout the design of this project, I took the initiative on creating and maintaining an ever evolving component library within figma. Once our design direction was established for each flow, I began to create and incorporate the components we would need leveraging type & color styles, variants, properties and auto0-layout. This allowed for rapid ideation once we were designing high fidelity screens. It also became vital for our developers as it ensured consistency within our designs.