Planning
Kogito was a new open source project aimed at making workflow tools that were part of the Business Automation suite available and accessible to new users through a number of different entry points. We had a group of very knowledgable stakeholders but the team needed direction for who the users are and how they would want to use the product. So working with another designer and a UX researcher we grabbed some time during an upcoming face-to-face meeting when we would have everyone in the same room.
It wasn't an easy day, but after some clear stakeholder disagreements about who our users would be, and what knowledge they came to the product with, we changed our plan for the activity over lunch and were able to reconvene and get all of the opinions onto the board.
The UX researcher who helped run the workshop and I gathered all the data we had on the boards and combined it into one cohesive workflow showing different users and different touch points users would interact with in the process. With a smaller group of stakeholders we reviewed the workflow and made notes about the most critical points in the flow to focus our design work.
From here we created issues to track our work and then reviewed everything with the full group again to get agreement on the plan and the steps we would take to execute.
This plan was used for the next 2+ years to direct the product direction and decide on the most important areas to focus resources.
Landing page design
Given that this flow relied on a number of different tools to execute, the #1 UX recommendation was to include a link in every asset to get users to the next tool. The product team agreed this was useful, but as is often the case with opinionated stakeholders they had their own ideas. The team wanted to first focus on creating a landing page that would introduce users to the product, allow them to start quickly, and be used in both the online page and a desktop application.
This page needed to provide users with the ability to create a new file from scratch or use an existing file, with the goal being to allow users to get into the creation of workflows in as few steps as possible.
Existing page
Using the Patternfly design system I was able to quickly narrow down the style to fit the family of Red Hat products, but be different enough to still be open source.
Editor page design
Of course with the landing page there needs to be something that happens once you select an option. The editor was an existing tool that was being ported to a new format, so the task here was simply to add a masthead to match the style of the landing page and include the few actions not contained within the editor itself, namely:
• Download
• Download
• Close
• Edit file name
• Copy
• Share
Original masthead
I tried a few options with a mix of buttons, menus and icons, and after some informal user testing settled on a mix of all three to give the user easy access to obvious and common actions, while not cluttering the page with unnecessary information.
