User Interface Design

This is a quick stroll through some of my most recent UI work. I am always trying new techniques and designing to get better, so check back frequently. 

Sign Up Motion

Our content marketers made a newsletter for users to stay in touch with our brand. The code got pushed but there needed some work on the front end to get this thing looking and working properly.

The Solution: I really wanted to start bringing motion into our brand and start to liven up our UI. I started with this user friendly confirmation element to help get the ball rolling (pun!). 

The biggest thing I learned from my hallway tests is that I needed to confirm the email address that was input. Users tend to mistype (especially on mobile) and this is a good way to give them extra clarity on their entry. 

New Success Page

I recently ran a design sprint with our team to get a new product to market, fast. We decide to use a lot of our existing style elements for the quote experience. 

In this case, we wanted to set expectations for the user and also start introducing some motion elements to help ensure certain points like timing and completion were emphasized.  

The Solution: In using motion, I put the user's attention toward the copy. The checkmark gets larger and draws the eye to the new copy once it arrives. 

The other point we added here is that we wanted to ensure this wasn't a complete terminal point for the user so we gave options to explore our site further by nudging them to our resources page.

Bouncing Ball

Simple, Fun, Motion. What I strive to create each design. I made this for pleasure and to continue to learn motion/animation tactics.

I created several iterations and noticed that the way I created my background, I was getting a still water vibe. I created a mirrored element that would follow the red bouncing ball to mimic a still pond. My favorite part about making this was dropping a ball off of a table several times to get the animation's feel right. 

Button Stacking

This button set was another UI element that was needed for our new product offering. 

We needed prospective customers to know we now offered a "group policy" option without disrupting our current quote flow. 

The Solution: We wanted to keep the quote flow as is for the time being and not present the user with a difficult choice. So I utilized an alternative button and created a stacked effect. By staying within the constraint of using the two product boxes, I created a stacked approach that worked well for mobile users as well. 

Confirmation Page (main flow)

Our confirmation page was lacking hierarchy and organization. 

I was asked to create a confirmation page that would verify what the user just accomplished and point them to any additional resources they might need.

The Solution: I mapped out what each piece of data on the screen was and worked with my Product Owner to figure out what was necessary to keep from a compliance stand point. 

I then grouped the information by Policy Info and Financial Info. I added in a few user desired data points like when your next bill is due and for how much. I moved the secondary "get document" buttons to the bottom because we knew we had a very low time on page and we were receiving calls about confirmation info that was on the page (as in the customer never saw it due to our design).  So by making the content scannable and putting the lower priority action below, the user could now logically go through the content and then complete the secondary action, if desired. 

For Mobile we did the opposite. I made the choice to differentiate the mobile experience because of the amount of scrolling needed, we were afraid that users would not scroll enough to see the "get document" buttons.