The first big milestone for this capstone comes up in just three weeks. At that time, we need to have a tangible .apk file, with a working product that showcases our current progress to our ‘client’ (the instructor). To that end, we’ve spent the last few days focusing on design.
In projects like these where I’m wearing all the hats (frontend, backend, QA…), I like to map out how I imagine the UI before thinking about the actual program architecture. It’s helpful to visualize what exactly we want to show to the user before making decisions for, say, what data structures we want to use to represent the end-result.
To start out with, a rough sketch is great for brainstorming and workshopping ideas for little cost. Just sketch a picture! When drawn- the problem is right there in front of you instead of having to spend the precious extra braincells visualizing a concept in your head.
My first pass at creating a wireframe for our app looked like this:
This first pass at our app design led to a few insights. First- we definitely want a navbar. These are relatively standard these days in mobile apps, but it’s good to get visual confirmation that the overall user experience works; however, our also noticed that the bar is kind of busy with five icons. The navbar should only include navigation to the most-used functionalities of the app. In the end, we decided to remove the barcode launcher because we felt that it would make intuitive sense to just add that navigation to the Pantry screen, and because we did not want to code a stretch goal immediately into the navbar.
The wireframes also got us thinking about the architecture behind the design as well. It became clear that we would probably want a kind of recyclerview for the Pantry and Recipe Search screens. We might want to re-think the Calendar screen because integrating all the functionality of a full-fledged calendar into the screen could be ambitious with everything else we need to do. For the filter screen- we might want to keep things extremely simple with radio buttons or checkboxes to represent boolean values.
Taking that feedback, I made digital wireframes that culminated into the following prototype:
This prototype is simply a series of digital wireframes built and animated using Figma’s software, but it’s a great way to get a sense of an app’s look and feel without having to invest any amount of time worrying about the code. It makes sharing and workshopping ideas easy, and when it finally comes time to write down some code- we can do so without having to make UI decisions at the same time. We’ll just build to spec. It’s also a great visual for showing design progress to the less technical. A customer can look at this and get a real sense of what they’re buying.
