Watgrid Solutions

Role: UX/UI designer

Goal: Branding consistency, Web app UX/UI Design and Development

Intro

I worked as a UI/UX Designer with Watgrid Solutions on their product, Winegrid. The company develops and produces various IoT sensors for monitoring the process of wine production and provides a SaaS platform to manage them. This was an amazing project where I worked with a great team, in tune with the start-up environment and with strong values of collaboration. 

Branding Consistency

I started by establishing consistency of the brand across all channels. I created a design system and library both for development and marketing, based on the company values and projected growth. During this time, I also designed elements for printing, branding, merchandising, social media, and events.

This was essential to having a basis to work on the app’s user experience.

Web App UI/UX Design and Development

User Research

After establishing the brand’s design guidelines, I focussed on studying the process of wine production and bridging the gaps between the mental model of our engineers and how the wine producers structure their process. This industry has very strong traditional roots and process secrecy is key.

Web-app Splash Animation

Designing intuitive UI elements

I was tasked with improving UI elements through design and development with HTML5, CSS3, and AngularJS. These were determined either because customers complained and room for improvement could be identified or for implementation of a new feature.

An example issue found was with a modal to set a sensor’s reading intervals. There was a set of technical constraints that had to be translated into UI affordances.

Before
After
Video Capture of the UI component

Web App Remake

I continued with web development and QA as we outsourced some of our developing efforts. I designed a prototype in Adobe XD to establish a dialogue about new features, study the user experience in detail and test the overall feel and branding of the web app.

Prototype’s Page in Adobe XD