This was a college project, where using a UI kit from a previous assignment, we were to design and prototype a mobile app for a specific platform.
As a companion to my UI kit, I designed the mobile app that goes along with it. I wanted to achive a design that was unique to the brand, but that would also fit in on the iOS platform and followed many of the best practices and guidelines outlined in Apple’s Human Interface Guidelines.
Note: this is an hypothetical, unofficial design created as a project for school. I have no association with Jonnies Sticky Buns (other than as a loyal customer), and of course all of their rights are their own.
I started out with some rough sketches (with the pencil tool in Illustrator to see how well it worked—it did ok) to figure out what screens I’d need. I worked out a few of the design details and then moved into full fidelity screens.
Having completed a UI kit, I already had colours, typography, controls and the general style worked out. That made this more of an exercise in interaction design. I was careful to maintain a hierarchy using type sizes and the colours I had chosen.
I created the navigation icons as well; I found it was time consuming to ensure they were recognizable at small sizes, while designing the vectors zoomed in on a large display. There was a lot of back and forth between Illustrator and Invision to get these right on the phone.
Here’s just a few of the screens. For more, check out the Invision prototype – https://invis.io/7P6OM59DQ
Implementing a design in phases like this, where the UI kit was separate and before the rest of the UI, was a great exercise. Some of the decisions around sizing and colours needed to be tweaked once I had them in a prototype. However, I feel it ended up creating a much more complete feeling; a more evolved and polished design.