While working through the bookkeeping a check deposit feature, I was simultaneously creating mobile design system components and patterns.

I worked with the design team on splitting up work for different areas of the mobile app, and engineering on implementation.

Pattern guidelines and documentation

As mentioned previously, the decision to separate the input led to a new pattern in the Wave design system language. I created guidelines and documentation for design and engineering. I worked closely with engineering on usage, behaviour, and implementation.

Untitled

Untitled

The result was this pattern could be applied to many key input screens, strengthening the Wave design system language.

Examples of the input design pattern in context in Banking - Money transfer, Banking - Check deposit, and Invoicing.

Examples of the input design pattern in context in Banking - Money transfer, Banking - Check deposit, and Invoicing.

Hi-fidelity prototyping

I created high-fidelity prototypes in Facebook Origami to illustrate behaviour. This allowed designers and developers to interact with it for a true sense of the experience.

Check Deposit Focus screen.mov

Untitled

Untitled

Untitled

Untitled

This is one example of many prototypes that I created to better illustrate interaction and user experience to design and engineering.

I work closely with design and engineering during this process to capture details such as how to best document usage, error states, loading interactions, long text strings, and much more.

Untitled