[{"data":1,"prerenderedAt":151},["ShallowReactive",2],{"blog-post-/blog/day-2":3},{"id":4,"title":5,"body":6,"date":142,"description":143,"extension":144,"meta":145,"navigation":146,"path":147,"seo":148,"stem":149,"__hash__":150},"blog/blog/day-2.md","Day 2: User Experience and Excitement",{"type":7,"value":8,"toc":136},"minimark",[9,13,23,34,40,43,48,60,70,73,76,79,90,94,97,113,116,119,122,125,133],[10,11,12],"p",{},"Today we focused on:",[14,15,16,20],"ol",{},[17,18,19],"li",{},"What does good user experience feel like?",[17,21,22],{},"What does good onboarding look like?",[10,24,25,26,30,31],{},"Our vision for a good clock app is that it should blend ",[27,28,29],"em",{},"seamlessly"," into your work flow and interacting with the clock should be ",[27,32,33],{},"frictionless.",[10,35,36,37],{},"Our vision for good onboarding is the user should feel ",[27,38,39],{},"this is cool, I want this.",[10,41,42],{},"In this blog we share how we try to achieve these two things.",[44,45,47],"h2",{"id":46},"app","App",[10,49,50,51,54,55,59],{},"To understand what ",[27,52,53],{},"frictionless"," interaction looks like, its sometimes easier to identify what ",[56,57,58],"strong",{},"friction"," looks like.",[10,61,62,63,66,67],{},"When I set a default chrome timer in the web, I easily lose track of it. To check on it, I need to first find the right ",[27,64,65],{},"window"," and then the right ",[27,68,69],{},"tab.",[10,71,72],{},"Too many clicks to find the clock, stop the clock, reset the clock.",[10,74,75],{},"If I use the built in macOS timer, I’m met with a large and noisy modal. After setting the time, I’m left with only a small visual icon in my menu bar to check on its status.",[10,77,78],{},"Easy to miss. Too many clicks to set / reset the clock.",[10,80,81,82,89],{},"I can explain in words how our experience differs, but it might be easier to see our approach to the setting and resetting in action in this ",[83,84,88],"a",{"href":85,"rel":86},"https://x.com/OmarHayat0/status/2026394079966150736?s=20",[87],"nofollow","X post",".",[44,91,93],{"id":92},"website","Website",[10,95,96],{},"Today started with some clean up:",[14,98,99,102,105],{},[17,100,101],{},"Adding the wallpaper image on the homepage",[17,103,104],{},"Implementing the responsive layout for mobile",[17,106,107,108,89],{},"Updating the “Coming soon” button to link to ",[83,109,112],{"href":110,"rel":111},"https://x.com/OmarHayat0",[87],"Omar's X page",[10,114,115],{},"Next we wanted to put a working demo on the landing page.",[10,117,118],{},"We knew we wanted to show off what the app looks and feels like, and thought it would be really cool if the landing page had an actual working demo of the clock.",[10,120,121],{},"We did a first pass at this with Codex. I was surprised to see it match the dimensions and corner radius by going into the Swift code (yet another advantage of using a monorepo), though it needed a bit of help with getting the styling right.",[10,123,124],{},"We also implemented drag-and-drop, so that it feels like moving around a window on your own computer.",[10,126,127,128,89],{},"You can try it for yourself on the homepage, and can see how it compares to the actual app in ",[83,129,132],{"href":130,"rel":131},"https://x.com/OmarHayat0/status/2026384213809713402?s=20",[87],"this video",[10,134,135],{},"Some work still has to be done on getting it perfect, and we will continue to add features to the demo as we implement them in the app.",{"title":137,"searchDepth":138,"depth":138,"links":139},"",2,[140,141],{"id":46,"depth":138,"text":47},{"id":92,"depth":138,"text":93},"2026-02-24","Nailing good user experience and onboarding for our new macOS app OverClock.","md",{},true,"/blog/day-2",{"title":5,"description":143},"blog/day-2","xqfmDL8v9F3bKWvoMmrOvQGCFlNg83_-3UyEsBbwz3w",1774667228682]