The Evolution of the Saent UI

When we started off developing the Saent application exactly one year ago, the first prototype looked like this:

April 2015: the looks of the first working prototype of Saent…

Lucky for our future users, this quickly evolved, until we arrived at this interface when we launched our crowdfunding campaign:

June 2015: the state of affairs just before the launch of our crowdfunding campaign.

As we’ve previously described in great detail, we learned a lot from the tests we did with this first UI. This inspired us to explore a completely contextual interface concept, which led us to a conversational paradigm for Saent:

January 2016: launch of a conversational UI that adapts to the user’s context.

We implemented this concept and have been testing it over the past few months. Overall the results and responses have been good, and this UI addressed many of the issues we had with the former. Nevertheless, it was never our intention for this to be the final visual style, which is why we’ve also been working very hard with the wonderful folks at Motel to further improve on this concept.

Three main issues emerged from the tests we did with our conversational UI concept:

1. Screen real-estate: the application took up way more screen space than necessary.
2. Speed: while the conversational style often reduces choice and hence complexity, it can also slow things down.
3. The Button: we felt the Saent hardware device was not as tightly integrated as it could be.

With these things in mind, Motel got to work. Here’s a detailed video walkthrough of what they’ve come up with…

This walkthrough uses static screenshots created from the Illustrator files of the UI design elements Motel built. These designs are not yet active in the Saent app, but are being implemented now and will be in the version of the application we deliver with the device in mid-to-late April.

Min to max as required
Perhaps the most important underlying idea is that the Saent application now takes up as little space and attention as possible. But as you interact with Saent and clearly show an interest to dive deeper, the application literally grows on you:

The final interface gets out of your way and only “grows on you” as you interact with Saent.

This idea also applies to conversations: the default is for them to take place in the two horizontal rows at the top of your screen, but they will expand as you converse with Saent on a specific topic:

Here’s how a conversation with Benjamin Franklin might unfold, to turn on the “work like Ben Franklin” option.

Smarts and speed
Many of our testers tend to jump from one session to the next, with an occasional no-screen-time break in between. So these options are now accessible immediately after each session:

Other things that Saent can do for you don’t get in your way, but are still quickly accessible from the fourth button to the left (What else can you do?) that opens a fold out. This extra row also comes in handy when you require further explanation on something Saent is taling to you about:

When Saent gives you a Challenge, there’s always detailed background info available in the “fold out” about why you’re getting this particular Challenge.

Shortcuts and your Saent device
To further speed up the experience for power-users, we have added keyboard shortcuts:

The arrow keys on your keyboard correspond with the arrows you see on the buttons.

Where things really get interesting though, is for those who buy our hardware device. Most common actions within the software now match taps and swipes on your Saent button, which make interacting with Saent significantly faster and easier:

Instead of using the keyboard, owners of the Saent device can tap different areas on the device for an even smoother and faster Saent experience!

What’s more?
Lots!

Launch your session and Saent retreats to a slim progress bar at the top that shows your session progress:

Saent counts down and then launches into a focus session with a minimized progress bar at the top!

Once in a session, Saent will monitor your activity and give your willpower a helping hand in case you give in to a distraction:

Saent is stricter when you’re in Monk-Mode (right) than when you are in normal mode (left).

During a session, you might run into sites and apps that Saent does not yet know, or you might want to categorize a specific site differently than most other Saent users have done. This can all be done in the categorization section, where you can indicate whether something is Good, Fine, or Evil.

Saent will ask you if you want to categorize unknown sites and applications after a session, then opens a smartly laid out screen with shortcuts to quickly categorize.

After all of this hard work, you deserve a break. You can surf the web during your time off, but Saent can also help you to take some time away from your screen by locking it during your break…

Get ready for… a calming break!

There is still more: we will be adding the Saent score (including Leaderboards) and Challenges in the final public version that comes out late April.

Coming soon to a computer near you!
Over the next few weeks, we’re providing early access to all our crowdfunding backers as we implement this new UI. Then in the second half of April Saent devices will start arriving to our crowdfunding backers (hint: you can still order yours at the reduced price of $45 until 1st of April, including 12 months of Premium software subscription).

If you enjoyed this article, it would be great if you can helps us spread the word about Saent by hitting the little heart icon below. Thanks in advance for your help!

Ready to give Saent a try?

Download the free app now to start working smarter, being more focused, and developing better work habits.

You can download the free version of the Saent app now by clicking the image above.

Or buy your Saent button (now shipping!) with a 12-month subscription to the Premium Saent app included!