Fragrance calculator V2

I’d like to introduce you to V2 of the Fragrance Calculator.

Link to calculator: https://thoughtfulcandles.com/candles/scent-calculator/

1. A new user interface (UI)

The first thing you may have noticed is that the UI has changed. Instead of the calculator being on a single page, it’s now separated into multiple steps.

Having the calculator on a single page was simple. It did what it intended to do, and did so in a workflow that was familiar.

What the old UI wasn’t able to do was help scale the product. The old version was not set up to easily build new features. It was limited on screen space as everything had to be shown in one page. The UX was lacking, as elements weren’t logically grouped, all UI concepts were kinda just thrown at you at once. And for you developers, the front-end state architecture was naive, and was tedious to work with.

So I went ahead and worked at creating V2.

Me wondering why the c0de wasn’t working.

I started with re-working the design. I wanted V2 to be be more intuitive. I analyzed a couple of App flows, and ones that really stood out to me were the sign-up flow for OkCupid and the exercise flow at Carta (my day job).

Both companies employed a step-by-step structure when presenting actions available to their users. The benefits I saw of having this type of flow were:

• More cohesive experience as navigation was very guided
• Chance to logically group information into separate steps
• More screen space as information was now being rotated in/out, opening the opportunity to show more information and insert new features

…and that’s how the new UI came about.

The new UI flow! 🎊

2. Ability to save information

With more space on the page, I figured that it was time to build a way for users to save their work. You may have noticed that there’s a blue button floating around asking you to to “Connect your facebook”. This is so any work that you may do can be saved and associated with your facebook account.

Once you’ve connected your Facebook, then any calculations you generate can be saved. To view them, one only needs to head to the “My calculations” tab and click into the “View” action.

No more having to type and re-type fragrance inputs. All your calculations will be made ready for you to view.

Manage your saved calculations 🙂

But wait — I like the old calculator

But for the time being, there is a little section below the yellow banner that says: Go back to the old experience 👈 , and if you click that, it’ll take you to the old experience.

I hope you find V2 to be helpful. Happy holidays, and happy candlemaking. 🕯️