top of page
Laptop Work

Vizzlie

Transitioning from Dev-Designed to User-Centric

Lead UX/UI Designer | Research

What's been done

Year - 2017-2022

Role - Research, Design, Prototype, Copywriting, Project Management

See Live - Vizzlie

Context

Vizzlie is a SaaS that manages automatic posting to social channels, primarily by direct sales suppliers and smaller boutiques. It saves users time and headaches by giving them the tools to pre-make and schedule all of their social media posts on all of their major social channels.

During my time there, I guided the site rebranding, introducing new elements to existing features while introducing the updated UI to new features. I also updated the existing site IA to make it more user-friendly.

The Problem

The original website was built with design as an afterthought; as a result, the website was clunky and confusing, which turned off new and current users, bringing revenue down. I needed to make smaller incremental changes to the existing IA while implementing a more modern design into the newer features. 

The small development team was the largest roadblock while trying to make improvements. Most of their time was spent bug-squashing so I needed to make data-driven decisions to ensure that our time was spent on the largest painpoints for users.

Research

I was lucky to be able to allocate time to research before bringing design changes to the Owner. He understood that while he had a thumb on the pulse of his most vocal users, it was hard to determine what changes actually needed to be made in the short term vs the "like to haves" that flooded his FaceBook feed. I had an extensive toolkit to pull from, but my primary path to success involved:

Baseline Usability Testing

When starting a new initiative, I would take the time to conduct a baseline usability test. Vizzlie had many features and it was imperative to understand how they were being used and how we can improve based on the dev resources I would have for the sprint.

Competitive Analysis 

In order to determine the best path forward for the overall feel of the site and an actual cohesive and standardized IA I knew that I needed to check out the greatest competitors. Namely Cincheshare and Hootsuite. 

USer Testing

In order to determine the best path forward for the overall feel of the site and an actual cohesive and standardized IA I knew that I needed to check out the greatest competitors. Namely Cincheshare and Hootsuite. 

Site Content & Structure

Major Focuses & Structuring a Design System

While we lacked the capacity to make sweeping changes across the system, I knew that we needed a framework for all new features and to retroactively implement on existing UI. I created and championed implementing a master design system built on Atomic Design Principles. 

My greatest challenges when bridging the gap between user experience and familiar branding were to:

  1. Bring the current palette into accessibility compliance while maintaining the familiar styles and patterns. This required us to completely revisit the baseline color pallet while still allowing for a slow rollout for existing pages

  2. Ensure that the new color palette work with all variations of color options and in any order placed on the page

Visual Process

Typography & Color

The typography on the site remained the same from the old site, however, I decided to establish a typographical hierarchy that would be followed through each component so that usage would remain consistent throughout the site no matter where it was placed and how it was ordered within the page. 

The color palette, as mentioned previously, was slightly altered to meet compliance guidelines. Tints were added to the core palette to help with hover, active, and inactive states. A supporting palette was added specifically for marketing illustrations and is not to be used anywhere else in the branding. This helped to add some additional saturation to the site and expanded upon the new cohesive iconography style discussed below.

Visual Process

Iconography

The original iconography used across the site was inconsistent, confusing, and often duplicated in conflicting ways on the same page. I created a new icon library containing modern icons and included use cases and replacement guidelines for devs as we advance.

I created comprehensive user stories tied to every update necessary on any legacy, high-traffic page devs worked on during bug bashes to ensure they would be updated.

Icons.png

Outcome

During my tenure at Vizzlie, we increased our customer base by 26%, increased retention by 37%, and outlived a few of our major competitors. In the end, CommentSold acquired the company and all employees to help bolster their product and customer base.

Personal Takeaway 

My time at Vizzlie was invaluable. It taught me the immeasurable value of:

  • Learning how to speak dev.

    • So many issues are only issues because dev and design just argue past each other. I strive to go into every meeting curious, and with the data I need to explain how design can be our solution while open to pivots to get things across the line.

  • The necessity of impeccable documentation.

    • My favorite meeting is the one you can cancel with a link to a fully fleshed-out story or Notion.​ While I love the face-to-face conversations, what I really love is having complete documentation prepared to help 

  • The fulfillment you receive when you can see how the work you've done has made someone's life better.

    • This isn't a point that needs explaining. It's a goal that I always strive towards.

Thank you for your time!

bottom of page