UI & Branding Design

While At No Divide I've lead the design of our leave management app, Leeve.

Our initial product was LeeveBot, a Slack Bot that allows people to manage their company leave all within Slack. However, alongside it we've been working on the full web experience, which has allowed me to work on the entire user interface, branding and marketing site.

Initial Wireframes

My work on Leeve started with taking what we learned from our Slack Bot and producing lo-fidelity wireframes that would form the basis of our web app. Below is a selection of some of the wireframes I created.

UI Design

I've been working on creating a unified design experience for our app. Once we'd established wireframes and identified common components, I designed these components, before moving onto hi-fidelity templates.

I worked on creating a consistent set of icons, using FeatherIcons by @colebemis as my base, I tweaked and created new ones where needed.

Animation Exploration

I've been learning PrincipleApp while working on Leeve, this allows me to communicate my ideas with the team in a much more efficient way. I'd like to continue to experiment more with Principle to bring life to my prototypes.

Template Design

Using the components and branding guidelines (seen below) I created I produced hi-fidelity designs and used InVision to prototype and gather feedback from the team and our early users to gather important feedback and iterate upon.

Below is a selection of some of the templates I created.

Branding Design

Along with the UI components, I created a simple set of branding guidelines and logo mark to be used across all mediums.

Slack Bot

Our first release of Leeve was a Slack Bot. I had to regularly create Slack graphics to use in our marketing and our help pages. To help with this, I created a simplified UI of the Slack messenger to allow me to re-make messages on the fly.

Marketing Site

I designed a simple one page site that communicated clearly the core features of our Slack Bot, this was regularly updated as we pushed out new features. Having the Slack UI kit I created (seen above) really helped with getting these updates out quickly.