Curriculum App Developer Notes #001: Overhauling the “Track Study Time” view
One of the most important pages in my small-but-beloved side project app (Curriculum) is the Track Study Time page.
Once a user has added a few resources to their Study Track via the Manage Study Track page (yes, also due for an overhaul), they can use the Track Study Time page to select a resource and track their time spent studying it.
When done, the tracked study time is added to the resource and, in the back-end, a ‘study interval’ is created so that the user can start to see metrics on their Study Metrics page.
The Page Before:
- This version of the page is an awkward collection of forms and buttons, and in no way like a modern app that people might enjoy using
- It was barely usable on a phone
The Page After:
Mobile-first development means this page is easier to use on a smaller device now. The layout is simplified, with larger tap targets.
Fun surprises along the way included handling the major lack of screen space available on mobiles when the keyboard is open.
New or Ongoing Concerns
- The page is not self-explanatory (an info modal is available, but this could be turned into a step-by-step tutorial experience)
- It’s not clear enough that the resources list/carousel is navigable — this component should either take a different form, or be given some visual updates that I’m yet to figure out
- If more than 10 resources match the search terms, navigating to the 10th in the resources list/carousel could lazy-load in the next 10 resources for the user to browse (as long as this behaviour is visually clear and not confusing)
There’s still a ways to go before this view is the most usable and appealing that it can be. It needs input from a proper designer, for starters! But for now, this will have to do while I tackle the next task: study resource recommendations!
Follow me here on Medium or on Twitter (@lswift01, @curriculum_app) for future updates. And check out Curriculum if you’re always learning — it’s great to get organised!
