Varick

UI + UX + Branding

Overview

Varick was an internal project at SWARM. The project was completed over the course of a month in short agile sprints. I worked on the UI/UX design as well and provided HTML&CSS for the new styles.

How it works

Varick is a SaSS platform that uses your API endpoints to automatically create your backend dashboards. Because Varick sits on top of your API it follows the rules of your API. This minimizes accidental errors and deletions when granting access to non-technical team members and content editors.

Marketing First

Before any design occurred, the initial proof of concept was already programmed. Naturally, the app needed some UX improvements. Before tackling the design of the application we put up a marketing page; allowing us to create interest in the product while we worked on it in the background.

Exploration

After workshopping some of the critical areas I began sketching my heart out.

varick sketch

Interface Design

We based the styles of the inner UI on the previously designed marketing webpage. After fleshing out the updated UI I assisted in styling the pages in HTML & CSS.

varick UI mockups

Revisiting the UI

Once Varick was ready to be used by the public, I began planning areas I wanted to improve and user tests. I also began exploring an improved brand image and visual language for the app in my spare time. Below is the beginning of polishing Varick’s visual language.

varick UI mockups
varick UI mockups
varick UI mockups
varick UI mockups
varick UI mockups

Looking Forwad

Part of my vision for the future of Varick was to craft an experience that included educational components. This would not only allow less technical users to use Varick more easily but also provide them a high-level understanding of what the developers do. This would include definitions of things like APIs and models.

varick UI mockups