Today we focused on:
- Building interactivity into our website.
- Building optionality into our app.
The interactivity of the site is our way of communicating to the user what they can expect from the app. In a way that is engaging and fun.
Recall from Day 2’s blog post, we want to drive home the feeling of this is cool, I want this.
Building in optionality is our way of allowing the user to personalize the feel of their clock to their tastes. The most natural way for the user to do this is through the Preferences page.
We discuss these two things in our blog post today.
App
In our early design we started with a bordered liquid glass UI component for the clock. This initially did not sit well with us, and we had intentions to revisit it later and remove the border.
However, upon removing the border, we surprised ourselves. We realized it had grown on us and we missed it.
The borderless design was sleek and minimal but it lacked character the border added.
So we decided to add both options for the user through the preferences tab.
The lesson we take away form this is sometimes we may surprise ourselves with the designs we end up liking and to keep an open mind to this moving forward.
Beyond the border, we added a discrete slider to adjust the clock and added some font optionality.
You can see feel of the preferences page at this stage in this X post.
We are continuing to experiment with sounds and what the right feel for that should be, something we will touch on in the next blog post.
Website
We started today with a draggable clock demo on the homepage, but nothing that demonstrated the always-on-top behaviour.
The simple solution was to add another window. We also wanted to tell the user what functionality they could play with.
The natural choice was something like the Apple Notes app, with a checklist of different features. Then these can be automatically checked off when the user completes the different tasks.
We still have to implement the other features in the demo (like setting a timer and the preferences menu), but this is a solid start.
We also made a number of...
- UX improvements for drag-and-drop:
- Consistent bounds
- Interaction paper cuts (like accidentally highlighting page text)
- Visual improvements:
- Optical alignment
- Italic text in the header
- SEO improvements:
- Page titles and descriptions
- Open Graph metadata
- robots.txt, sitemap.xml, and favicon.
Tomorrow we’ll be working on adding more features to the demo!