Shown above is a selection of screens showing the CloudOn responsive web app on a mobile device.

These vector images show the browser-based web app at a responsive threshold benchmark size of 320px to 480px, in device portrait orientation.

The Design team consisted of a Product Manager, UX/Interaction Designer, and Interaction/UI Visual Designer.

My role was Interaction/UI Visual Designer.

I created responsive size threshold benchmarks for the team to begin conforming the app design to across design and development. I sketched out app panel behaviors at each responsive size, noting fixed and fluid panels, dimentions, content display options, threshold transitions. Thought about how the different ui elements would change at different responsive sizes. For example: The top navigation action bar.

I used a lot of different ways to convey how the app would look and behave, depending on how much time I had, how much of a priority an issue had, and how familiar the others were with what responsive means. One of those ways is through vector sketching quick multiple orientations.

I made a few quick vector sketches of what the login screen might look like if it were responsive. I had to consider how elements would flow and scale, how the carousel would behave responsively, where the text box user feedback would fit onscreen.

Another tool I created to rapidly iterate and visually convey how the app would look and behave, is a vector UI kit.

The important part was that it was easy to see the big picture of the app, and that the screens had accurate color, typography, and dimentions.

I used it to quickly grab an entire section and sketch changes, while it doubled as a potential styleguide or ui pattern library final asset. Another use was that most of the designers on the team worked in Illustrator or Photoshop or some vector sketch tool, so they could grab and go as well to do rough ideation.

A final use for this was to be able to work toward really reusable and polished UI patterns. If you could see immediately all other places a UI pattern occurred, you could see how it might work in other places, or how they could be unified.

So, while this screenshot is not necessarily pretty, it was a really useful tool for rapid sketching with exact size benchmarking that the entire team had a shared definition for.

Pulling assets from the vector UI kit I created, I could grab and sketch interactions quickly that also accounted for branding guidelines, and changes to brand guidelines could happen quickly.

I could, for example, pull only the main benchmark size (iPad), and iterate on that. Shown above are iPad screens, I used to changes to the evolving top navigation action bar, and new more-tap target friendly row heights.

Sharing vectors from this file in an online library of guidelines, the team could reuse it immediately and continue rapid iteration on separate paths. For example, one designer could explore notifications while the other explored pro features, knowing their prototypes would be close to the existing app during redesign.