To-Do Planner: the Interactive Prototype
This is the continuation from the last entry on this blog, “To-Do Planner — the Wireframe.” As a refresher, the goal of this project is to create an app that automatically plans out your day based off your To-Do list. I have previously created the wireframe for the app, and now it’s time to build an interactive prototype to further flesh out the idea and get feedback on a more detailed level. This is the first time I’ve used FramerJS in a project. Read on to see how it went!
Design
The overall design is unchanged from the last time around, with a few minor tweaks. If you want to learn more about the information architecture and the sketches and wireframes that I’ve created, take a moment to read my last entry. Following the feedback from the last peer review section, I decided to use very visually distinct color set for task items (borrowed from Material Design), and also use the colors to paint the entire task item headers instead of restricting them to small and narrow triangles. I also moved the tick-box to the right-hand side of each item to better fit in with the Material Design Language. These are important changes because the app is meant for the Android platform.
Prototyping
I created the prototype in three stages. To begin, I re-created the wireframes in Hi-Fi using Figma and the handy Google Material Design Template. I was able to reuse a lot of the components from Material Design, the status bar, app bar, tab bar, bottom toolbar… and the pop-up dialog views. For custom components, the new “Component” functionality in Figma is really helpful here. I just needed to create one component in detail, clone it, and using the distribute-horizontal function to spread it across the whole screen. After this process, I ended up with 4 fully-furnished app screen, which I’d typically export and use for Invision or Marvel if I weren’t going to try to use Framer for this project. While I could have created just the component, the process of creating full app screens helped me see the overall looks of the app and tweak the designs accordingly.
The next step after this is to break the app screens into individual props that I’d export to use in Framer. The big thing here is reusability: if something looks mostly similar in common across many views in the final Framer prototype, I’d better break it down further so that I can reuse them and reduce the total number of props I’d need to export and add custom code logic for. As such, the empty app background, time picker, keyboards and so on need to be its own prop. I exported them as svg files so that they’d look sharp on big screens.
The final step is to write the code in Framer to wire stuff all up. To accelerate development in Linux, I ended up spending a few hours forking both create-react-app and framerjs and making them work together in the Node.js ecosystem. The result is pretty fantastic — I could edit the CoffeeScript file in any code editor, save it, and a background tool would compile it together with framerjs and inject the result into any browsers displaying the prototype. Needless to say it made my development process using just Framer.js on Linux much nicer and comparable with commercial products like Framer Studio.
Besides creating Layers() and adding states and transition animations, a big feature I wanted to do for the prototype is a task screen sortable by drag-and-drop. For this I stole the list sorting example code from Framer updated by Floris Verloop. It took a few minutes of fiddling but the prototype was much cooler for it!
Evaluation
I demoed the prototype to my peer review group as well as to the whole class, and collected their feedback. People were genuinely impressed by how well the drag-and-drop works! So much so that most of their feedback was talking of the dynamic sortable list and its animation, and I suspect it might have eclipsed the rest of the app experience. Fortunately, the concept and working of the app is pretty simple, and I did receive plenty of feedback on them. A few of my peers raised a question on the color contrast — that I could adjust the colors I picked to make the text stand out a bit more, as some of the dynamic colors made the gray text hard to see sometimes. One suggested to add social functions into the app, so that the task items and the calendar could be shared with friends, and social pressure is always a good way to keep people on track on their work (right?). Another thought it might be a good idea to add a homepage to ground the experience, as opening the app to an empty task page might be confusing to the user.
Overall, I’m pretty happy with how my first Framer app turned out. It took me quite a few hours to hammer out all the code in Framer, and it was more time consuming than simple GUI tools like Invision for sure, but the added animation and interactivity definitely made the app a closer imitation of the real app. I’m happy for having learned Framer and will be using it for my next project too, the final prototyping project. Stay tuned!
