Streamlining User Flow Diagramming with Componentized Elements

Hello! I'd like to start by saying that this project was made this year 2023 under a company that I work with and I'm under NDA so I won't be sharing any company details, nor anything about the project, but I will share my process for this design.

I was tasked to re-create the UI library created by a third-party vendor. This UI library was supposed to be used when creating user flow diagrams and customer journey mapping. However, the team didn't like how it looked like, and they were looking for something much simpler and cleaner.

I took on the challenge, and this was my first design work for the company so I had to put my best shot. When I think about simple and clean, I think about minimalism - simple shapes, simple colors, no additional textures or grandiose elements. By using Figma, I started creating the shapes that are by standard used in creating workflows, and since I have a technical knowledge (graduated BSIT and worked as a systems analyst for 5 years), I know what shapes I needed to create.

You can find the before and after below to be able to compare the difference.

Once done, I've shared it with my team and leads and they were happy to see the change. After hearing their feedback, that's the time I have componentized all of the elements, shared a proper documentation on how to use it, and specified legends as to what each shape is for. These shapes are accessible also to Figjam as stickers since it's easier to craft flows in Figjam versus Figma.

As of this writing, my team is already using these components every time we create user flows and customer journey maps. This has become handy and it's much faster to create flows recently due to these components.