Relevize Web App
As the first product designer at Relevize, I was tasked to create a cohesive, modern design system for an already existing platform. From creating a component library to building new features with the product team, I was able to work on nearly every touchpoint of the web app and learn from many users.
Team
Stephanie Irigoyen, Product Designer
Alexander Hult, Product Manager
Peter Sidney, Head of Product
1
Auditing the Existing Product
Our first priority was to take a look at the overall existing platform and evaluate what components already existed and how they were being used throughout the platform. This was an important process to understand the choices the team had made and how they benefited the platform. I created a catalog of screenshots of individual pages as well as components being used.
The inconsistencies in the designs became obvious and I started to catalog where they were being used. We noted components that were frequently used, evaluated the existing user journey, and started to map out the most important changes we could make that would be low effort for high impact.
2
Building a Design System
With the many features and uses of Relevize, we prioritized creating a basic design system that would grow as the company scaled and product evolved.
Research and Inventory
Using what we learned from the product audit, I dove into research and began creating an inventory of the design components we needed updated, as well as new components to be designed. We also played with different styles to create the overall look and feel we wanted the platform to have.
Basic Asset Creation
Once we had established the most vital components of the platform, I began to create the base pieces of the design library. Using Atomic Design methodology, I began with simple styling and iconography to create molecule components. From this, I built a skeleton component library.
Implementation
The existing platform had been built within extremely limited time-frames, and so I had to build many of our existing pages in Figma. We began integrating the new component designs into the pages to see what needed redesigning and what could be cleaned up with basic styling.
3
Implementing New Designs
Once we had a basic design system set up, we began to plan out a revamp of the platform. Several pages needed updating not only to the new style and design system but to match the changing users needs.
Updating the Leads Page
The Problem:
The existing leads page had an overwhelming amount of information and was extremely distracting for users. Users had different needs for the page depending on their role, and the information highlighted only benefitted one specific use case.
The Solution:
Once the team decided what the most vital information was for our users, we decided to tuck away the remaining information. After some research, we came upon the solution of a drawer component that could be expanded to reveal more detailed info.
.png)
The final leads page was able to hold a lot of information while keeping the focus where different use cases were needed. We added a highlight to clickable cells so it was clear to users that they could take an action, as well as adding color tags to lead statuses.
The drawer also gave us room to evolve the design in the future. We had the space to include more contact details, expand on activity and notes, and use more enriched data for companies.
4
Building New Features
Once we had updated the existing platform and redesigned the leads page, we began to focus on building new features. Working closely with the customer experience team and engineering team from start to end, we developed and created several new features to take Relevize to the next level.
Campaigns Revamp
One of our first priorities in redesigning the platform was to redesign the campaigns page from scratch and add more usability to it. While the existing page originally served as backend for our team and was converted to customer-facing after some users wanted visibility into it, we wanted to create a more versatile page. After many user interviews and discovery, we began to understand what the needs were for the page and how we could create an MVP that would serve as a foundational part of the platform.
User Journey
We had two main user bases for the campaigns page- our customers and our internal CX team. The CX team would often create and manage campaigns for our customers from within this page. As we scaled, this responsibility would be shifting to the customers, but we needed to create a bridge that would allow our internal team to use it more efficiently while educating our customers on how to create and manage their own campaigns.
We created user flows for the three user types: internal CX, vendors, and advertising partners. We discovered a lot of overlap with how our CX team and vendor users would utilize the page, but we needed a more structured flow for advertising partners who had different levels of knowledge on how to build campaigns.
Wireframing and Prototyping
Once we moved into wireframing, we split the campaigns page into two sections- a templates page that would be for our CX team and vendors, and a campaign management page that would be for all users.
By splitting the features into two pages, we were able to keep a clear focus on what users had to do on each page.
Campaign Templates: Create templates that advertising partners can choose from to create individual campaigns; monitor how many partners are using a template; invite new partners to use a template; optimize a template after partner feedback.
My Campaigns: Manage individual campaigns; set budgets; view analytics for leads, CPC, etc.; customize images and text; publish, pause, or end a campaign.
5
The Impact
A More Efficient Workflow
Creating a component library was only the start of my work at Relevize, but once components were standardized and styles made global, my work with the engineering team became much faster. We were able to plan out features and scope much more easily, and the component library became essential in our communication.
An Increased User Base
The amazing CX team at Relevize was able to bring on many new customers, but thanks to the new design system, we were able to scale them much easier and more quickly.
