Soulution

Having used a structured problem solving worksheet (on paper) before, I knew there was value in the process. Now that this is a web app, it is easy for me to work through problems on the go.

While this is a very simple app, I wanted to ensure people had quick and simple prompts from the get-go.

Working through your problems is a six step process. I really like wizards and this user experience fits really well with the structure problem solving process.

Lists are a very straight forward way of representing an abitrary number of options. For this UI, I created a new form element in React that ensures each list item is stored separately in the database, but visually appears as document format that most people are familiar with.

Again, we use the custom list form element to help people think through the pros and cons of each option they listed in the previous step.

Now, that we have helped people see various options and think through pros and cons, we prompt them to make a choice.

Having made a choice, we want to ensure they have a clear path forward by listing off the steps they need to complete in order to get from where they are to where they want to be.

Lastly, we have a review page that details the solution and the steps to get there. This will be the page we show people when they go back through old problems.

To give a nice separation between problems that have been solved and problems that we are currently working on, we adjust the dashboard with visual queues.

For the developers out there, you can check out the source for this project on github. The build process utilises Google Cloud Build to watch for new commits to the master branch and then kicks off a build. The result is copied to a Google Cloud Storage bucket and finally, Cloudflare handles proxying the website at https://soulution.cloud.

I utilise Integromat to watch for build results and then pipe that detail into a slack message so I get notified when the change is live.