Fragrance calculator V2

November 29, 2020 | 5 minute read

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 coding

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.



Image from Gyazo

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.



Image from Gyazo

Manage your saved calculations 🙂



But wait — I like the old calculator


If you liked the old calculator, I’d love to hear from you @brianczhou / @thoughtfulcandlesnyc. I want to know what you liked about the old calculator, what you hate about the new one, or any feedback that can help you make using V2 more enjoyable.

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. 🕯️