During my tenure at Plated, I was the lead designer on the mobile team. The main focus of the application was to create novel acquisition platform that utilized the benefits of a native application (calendar, messaging, notification, etc). My involvement included designing the end-to-end experience, visual design, user testing, and planning new features.
Defining the need
At Plated we worked in small cross-functional teams that were typically made up of a design, engineering, product management and and occasionally an business representative.
A document to the like this would always be created to make sure that all parties involved in the feature ideation were aware of the existing process and if there were any aspects of the process that were off-limits.
This is an exaple of the type of quick flow diagram that would be created before any wireframes or design would be done.
Before we had an existing design system in place (more on that) I created low fidelity wireframes that outlined all the possible flows. Having each of the flows diagramed allowed for easy clarification and validation from other team members. Missing fringe cases were usually identified at this point and could be designed for.
This is an example of the type of wireframes that would function as a talking piece with other team members. The sketch-like quality allows for rapid ideation and eases the barrier to entry so all team members can contribute to the solution.
Establishing the visual language
During the initial launch of the application a brand refresh was also going on. My involvement in that was mainly in the digital space and primary in the native application area. Once the design team had established a way forward to the visual language, the mobile design system was established.
The mobile design language created a system that design and engineering would always know what a header, button, form field (etc) looked like. This took out a lot of the guess work and simple back-and-forth communication that would be typical with out an established system. From a design standpoint, the system allowed us to leap frog over wireframes (most of the time) and just do quick layouts with high fidelity elements.
Note: These images are from various stages of the product lifecycle during my time at Plated.
It was necessary for us to create high fidelity prototypes so that there was no gap in the knowledge transfer from design to engineering. While these types of prototypes are often more a higher upfront investment in time, they payoff is when a production codebase only needs a handful of changes.
These prototypes were done with Quartz Composer and Origami.
Both of these prototype sketches were early iterations on how customers would experience a price change while interacting with with the different food selections.
These are both navigational concepts. When dealing with transition interfaces, I found it valuable to prototype the concept early. When the animation completes the mental model necessary to understand the concept it is was important to validate it early.