Zuberance Advocate Hubs
2019 · UX / Visual Design

Advocate Hubs Redesign

Zuberance Advocate Hubs is a platform for brands to easily engage with and reward their most loyal and enthusiastic customers for being advocates. Hubs “gamify” word-of-mouth marketing in the form of “challenges”; content creation, sharing of content & promotions, and referrals.

My Role

I was responsible for wireframes, InVision prototypes, high fidelity mockups, and specs for developer hand-off. As the sole product designer I worked directly with the CEO and CTO for the design phase and the front-end development team during implementation and testing.

The Challenge

We launched the original product design in fall 2016 and by early 2018 most of our iteration was still inside the original layout structure.

Original Layout

Working with account managers and directly with brand marketers I identified several pain points around the original design that made applying custom branding difficult to the point of needing to get a graphic designer involved to apply branding properly.

I concluded that a high level redesign would address the difficulties around self-service branding plus improve overall usability and responsiveness for mobile devices.

User Audience

The main audience for our product is client brands’ happy customers AKA “Advocates,” who might be in nearly any demographic. The other audience are the brand marketers who use the Advocate Hub to engage with the Advocates and are not usually savvy enough to use a Photoshop template.

Solution

The ultimate goal was to modernize and improve the product design to enable more consistency and responsiveness while also allowing easy white-label branding.

The solution would be a new layout and design system with customizable colors, logos, and button shapes.

Scope & Constraints

A redesign of the Advocate Hub front-end wasn’t high on the priority list of the CEO or CTO at the time so I took it upon myself to start work on a design system and mockups as a side project in late 2018. I felt strongly that a redesign was not simply going to be cosmetic but an important step in product maturity that would benefit the end-users but also allow our development team to refactor and cleanup their front-end code.

I wanted to strike a balance between customization options and reasonable limitations that would help keep it simple for a customer or account manager to brand an Advocate Hub without the help of a graphic designer, so something between creating a Facebook Page and a simple website builder.

The Process

We had already started to lean into a timeline focused social network look that average users would instantly understand so I ran with that a little further and took a closer look at Facebook, Twitter, and LinkedIn for queues.

Low-fi Wireframes

I began by exploring new layouts to see what the best responsive design would be for our existing product.

The original horizontal navigation was becoming an issue as we added new features and began allowing the addition of external links.

I reduced the max width of the content body to better support tablets and simplify responsive break points.

Design System

I opted to use the system stack fonts to give the product a more native application look & feel, and avoid any layout issues that might come with supporting custom fonts.

The 8-point grid system was adopted for consistency.

High Fidelity Mockups

I made InVision mockups showcasing each Advocate Hub page redesign. I also created several branding tests using the new wireframe to prove applying branding would be simple and flexable.

I eventually made a presentation of my InVision mockups at a team meeting to pitch the need for a redesign and showcase the benifits.

Hand-off

Hand-off of high fidelity mockups was done using InVision Inspect. I worked closely with the front-end developers to make sure implementation would be near pixel perfect.

Conclusion / Results

We launched the new design in September 2019. I took them time to prepare new branding assets for each of our active clients' Hubs to make the rollout seamless.

We received positive feedback from all of our clients and have since seen a few new clients setup their branding on their own using our new self-service tools.