UI/UX Design
Prototype of a Free Trial Sign Up Flow
Company: 8x8.
Role: User Interface Designer/Visual Designer on the web team, collaborating with the 8x8 Express product team.
Process: I identified the weaknesses of the existing flow. Users came to the Express product page to learn. Once convinced, they clicked “Start a Free Trial” from the hero banner to sign up. They often dropped off midway through signing up so there was a great opportunity for improvement.
Improvements to architecture, interface, behavior - BEFORE & AFTER
BEFORE:
The original sign up flow took up a whole page, taking the user away from where they came, losing context with no way to return except to click a browser's Back button.
The progress bar had 5 steps and it was so subtle at the top that no one noticed it.
The persistent left column still had marketing messaging to convince the user to sign up. This is unnecessary because users had already decided when they clicked to arrive at this page.
AFTER:
-
Put the Sign Up flow in an overlay so that users always knew where they were on the site.
-
Reduced the steps in the progress bar from 5 steps to 4 steps so that users would feel it’s a simple process.
-
Removed the left column and instead displayed messaging directly next to the interactive elements to increase context.
-
Moved the option to port your existing numbers to a different branch because users rarely selected it.
Selecting number of business phone lines - BEFORE & AFTER
BEFORE:
A punishing error message appeared when a user tried to add a 10th phone line. The interface should not display a 10 in the field next to an Add button if the action was prohibited.
AFTER:
When a user selects 10 or more phone lines the pricing and Terms & Conditions are replaced with the messaging, "We'll connect you with an expert for best pricing options for your growing company." Below were support links to remedy the situation. No error message is necessary.
Training Site Refresh
Company: 8x8
Role: Visual UI Designer on the Web team, helping out the Training team.
Process: The Training team asked the Web team for a complete overhaul of the UX, UI and branding of their portion of 8x8.com.
With Web team input, A UX agency wireframed new navigation. It was handed off to me to lead the UI and styling decisions. I defined and specified interactions, I applied branding and worked with Engineering to align to existing filter and banner components, and create a new card design and shopping cart.
Users could click on a card with the yellow tag "Free Online" and go directly to start learning right away. Users who selected a blue-tagged "Paid Course" still needed configuration and pricing input from a sales team member so they could "check out" with the shopping cart and use that to submit to their organization.
Before:
BEFORE:
Users had to click a lot to get to their training. There was no filtering course cards, no display of all the courses in one view. It was unclear what they needed to do in order to take a group training and pay for it. The training site used very old branding, inconsistent with the current guidelines.
UX Research: Persona
Company: Case study of app to help busy, single parents optimize their time with their kids.
Role: User experience researcher.
Process: Given user interview notes, I pulled out the key features of this persona. I identified the opportunity area as: “In the few hours between school and bedtime, Josh needs a way to provide a healthy dinner AND time to relax with his kids.”
UX Research: Journey Map
At first I’d laid out this journey map as a timeline. Then I realized it would be easier to generate opportunity ideas if each touchpoint were an action. It helped me empathize with Josh’s struggle when I had to chart his emotions and thoughts along the journey. The most enjoyable part was ideating solutions to address his pain points.
