Flobot.io

Invite New User

UI  •  Front-End/Interaction

See the Pen Invite New User by Florence Tsai (@flobot) on CodePen.

I coded up a design I had for a simple permissions form Revinate users see when they add a colleague to an account.

Improvements
  • 1
    Adding visual distinction
    I added icons and pops of color to the form to distinguish different permissions from each other, and to make it very obvious what each permission related to.
  • 2
    Floating labels for better form usability
    The floating label pattern cleverly uses placeholder text as the label to save space and allows the user to stay in context and know what they are supposed to type.
View project on codepen »
Skills & Tools
  • UI/Interaction Design
  • HTML/CSS
  • JQuery
  • Sketch App
  • Codepen

Here's what I've worked on

Preview of the Unification + Style Guide Project

Unification + Style Guide

UI/UX • Design Leadership
Preview image for Email Strategy

Email Strategy

Visual • Information Hierarchy • Graphics
Preview image for the 'Advanced Filters: Campaign Targeting' project

Advanced Filters

UI • Prototype • Interaction
Preview image for the 'Invite New User Modal codepen'

Invite New User

UI • Front-End/Interaction
Preview image for the 'Intro to Dashboard' codepen

Intro to Custom Dashboard

UI • Front-End/Interaction
Preview image for the Room Upgrade Flow project

Revinate: Marketing

Graphic Design • Page & Layout Design
Preview image for Mania Magazine

Mania Magazine

Page & Layout Design • Design Leadership
Preview image for Becky Bones

Becky Bones

Character Design & Illustration • Page & Layout Design • Art Direction