Fringe

During my time at Fringe, I worked at the heart of HR and people-centric innovation, designing a delightfully innovative wellbeing marketplace for employee lifestyle benefits. As a product designer of a small design team, I spearheaded an overhaul of our design system, enabling the efficient implementation of a range of features, from e-commerce solutions to data administration tools, all while meeting the strict time and budget constraints of an agile development environment.

Overview

Key Responsibilities: Managing the company design system rebuild and the simultaneous rollout of new features on time and under budget

Projects: Ratings and Reviews, Admin Metrics, Platform Services, Rewards and Recognition, Upper Point Limits, Cart and Checkout Enhancements

Team size: 2 people

Role: Product Designer

DESIGN SYSTEMS

Rebuilding a Design System from Scratch

When I joined Fringe, I inherited the company design system left in disarray by the previous lead designer. Not only were files and graphics scattered across multiple design tools, but the Fringe marketplace itself did not follow any of the rules laid out in the original design system, most likely a result of an agile, release-first-and-update-later, development philosophy. Determined to not let these inconsistencies proliferate as the product only got bigger and more complex, myself and my co-designer embarked on a year-long journey to decipher the previous designer’s reasoning and fully comprehend and build upon their work. After cataloguing every inconsistency within the product and identifying the key areas for improvement, we collaborated with the front-end engineer team to methodically tackle each issue, laying the foundation for a comprehensive rebuild from scratch. While currently, only new features adhere to the updated guidelines due to agile constraints, it's a work in progress, with plans to gradually give older features a fresh facelift as well, ensuring a consistent and refined user experience across the board.

First things first, we agreed that the “using multiple tools” thing had to go. Not only was maintaining multiple subscriptions unnecessarily expensive, but it made it impossible to find information efficiently for ourselves and future onboarded designers. As our Q1 2023 goal, we meticulously migrated every previously-built page and component to Figma, preserving records of all historic designs while striving for simplicity and longevity in a new design system.

The previous color system was overly complex, with an excessive number of brand colors, dozens of indistinguishable shade variations, and semi-transparent colors that caused significant inconsistencies against different backgrounds. Engineer feedback also identified trouble with implementation due to the naming of the colors, which explained many of the previously identified product discrepancies. The new color system simplified the palette to only essential colors and shades, removed transparencies, and introduced a clear and multi-fuctional naming system, streamlining design and development.

Close collaboration with the front-end engineer team revealed how utilizing rem units was essential for a development-friendly design system. We updated the base font from 18px to a more standard 16px as 1 rem for easy scaleability, and adjusted the other fonts accordingly in terms of rem units.

Grids aren’t as cute to look at (so I won’t place them here), but learning how to use rem units was transformative in determining grid spacing and page layouts, which were loosely determined before. After setting standards for margins and landing on 12 columns per page, we used rem units to establish cohesive spacing between components, groups of components, and even within components.

I truly believe that the intense reading and hands-on practice using rem units was one of the most valuable lessons of my time at Fringe, and is part of what makes me a better designer today.

Buttons were my child. My biggest pet peeve was that the NONE of the original buttons utilized any of the previous primary brand colors, but rather arbitrary shade variations within every state. As we transitioned from old system to new, I iterated on these buttons for weeks to simplify colors, sizes, and styles while maintaining interactive states and accessibility. In Figma, I animated these buttons to hover and click as they would on the actual product!

PROJECT HIGHLIGHT

Admin Metrics

Within one month of starting at Fringe, I was handed my biggest project yet: Admin Metrics. It sounded incredibly daunting and almost impossible at first. Rebuilding the metrics pages, currently housed in Salesforce, into the main site while adding much needed new functionality requested by multiple internal teams and external clients? With minimal requirements that would be fleshed out alongside me as I started working on wireframes? I didn’t even know where to start. Looking back, I’m grateful to have tackled such an immense project from the beginning, which gave me an intimate understanding of the workings of the admin side of the product, allowed me to work closely with the product team, and introduced me to every customer-facing team in the company in my efforts to scope out requirements for my designs. After countless cycles of interviewing, designing, feedback, and iterating, I emerged with a final product that I am certain will satisfy long-awaited requests to enhance admin user experience.

Information Gathering with Original Metrics Pages

Snapshot of Pain Points

Customer Success Team

  • Inability to customize timeframes beyond viewing “this month” and “last month” data

  • Inability to observe trends over time

Customer Implementation Team

  • Inability to provide more than standard data reports

Current Admin Users

  • Inability to customize timeframes

  • Information is only updated once a month and is not readily available

Snapshot of User Needs

  • Greater ability to look at data over time

  • Actionable metrics that don’t just spew data but tell a data story and provide suggestions for improved performance

  • Customizable timeline and demographic data

  • Increased customer autonomy in viewing data while addressing privacy and security concerns

  • Scaleability of data as we start onboarding clients with 1000+ employee companies

Through the information gathering sessions, I concluded that the original metrics pages lacked a lot of functionality and customizability, especially regarding what information was shown and how information was presented. Our users needed improved data analysis capabilities, including trends over time, actionable metrics, customizable timelines and demographics, and enhanced data control, especially as we continued to onboard clients with 1000+ employees. With this new understanding in hand, as well as a year’s worth of admin product feedback that my co-designer compiled, I developed an initial admin wireflow to map out how this additional functionality could interact with the data we were already collecting and presenting. It wasn’t perfect, but it was a good start for my initial wireframes.

Low Fidelity Prototype

With my product manager, we mapped out baseline business and functional requirements to get started with low fidelity wireframes.

Business requirements included:

  • Preserving all the data from the original metrics pages and incorporating additional data insights from information gathering and product feedback

  • Providing benchmarking capabilities

  • Identifying possible special features that could be marketed as a premium admin tool experience

Functional requirements included:

  • Engagement/Utilization page

  • Employee Usage page

  • Brand Selections page

  • Filter for time

  • Filter for category

  • Filter for brand for the Selections page only

  • Adaptable charts that would change depending on the filtered information selected

Engagement and Utilization

Employee Usage and Benchmarking

Selections - One Brand

Selections - Multiple Brands

Low Fidelity Feedback

Customer Teams

  • Add custom time frames to the time filter

  • Suggestions for how to break down categories

  • Include metrics tiles on each page

  • Limit the amount of brand data shown in pie and stacked bar charts as to not overwhelm the user

Product Team

  • Remove the benchmarking feature from the current scope of this project and added it to a later iteration

  • Move all tables to a separate admin reporting tool feature

Engineering Team

  • Insights on how the filters would interact with the external charting library used to build out the charts

  • Suggestions for how to design for different breakpoints, especially mobile

  • Reuse existing components when possible

Low to Mid Fidelity Challenges

As primarily a designer, diving into the world of data visualization was a welcome learning experience, albeit outside my usual scope. Given the broad and open-ended nature of the high-level requirements, I faced the challenge of discerning which specific metrics to emphasize and selecting the most suitable chart representations. Each attempt to gain a solid grasp on the project led to further complexities: determining which metrics to highlight on the tiles, establishing default timeframes, breaking down variables like age and gender, exploring interactions between categorical data, and accommodating the diverse and granular nature of data. In this journey, I often found it most effective to present guiding wireframes, no matter how many question marks and missing pieces still existed, to offer a visual reference that facilitated discussion and helped everyone involved navigate the intricacies of the project.

High Fidelity Prototype

Utilization and Engagement

Employee Usage

Selections

Date and Category Filters, Mobile

High Fidelity Reflection

After meticulously cataloging every metric in its various forms and visual representations, I embarked on the enjoyable part of the journey. I spent weeks iterating on my designs, gathering feedback on all aspects ranging from colors to copy, and refining my work accordingly. The most significant challenge I encountered during the high-fidelity phase was the constraints of designing within a pop-up "drawer," a space that wasn't as wide as a full page and overlaid an existing page. This was particularly tricky, as I was tasked with condensing data that previously occupied an entire page in Salesforce and arranging it vertically to minimize scrolling. Another hurdle was the limited time and budget available for crafting mobile-specific designs, which required resourceful adaptation of desktop components to maintain information integrity. Throughout this process, I gained valuable insights into the delicate art of balancing diverse perspectives from all stakeholders while staying true to my creative vision. I'm immensely proud of the final product we've achieved.

RESEARCH

Persona Building

In an agile development environment, user research is difficult to prioritize, but myself and my co-designer made strides whenever possible. One project we worked on together during Q2 2023 was compiling all the user data we had accumulated through various surveys and forms to formulate insights on our admin user populations (all that data visualization from my admin metrics project coming in handy!). From those insights, we wrote admin user personas to guide our future feature work.

Conclusion

In every role I take, I measure my growth not just by my successes but lessons learned. Here are some of my biggest Fringe lessons.

Leveraging a Small Design Team in a Sea of Stakeholder Opinions:

  • Lesson Learned: As part of a small design team, I’ve learned the importance of making my design voice heard in the midst of differing stakeholder opinions. Learning when to stand my ground and confidently advocate for my convictions is an essential skill, ensuring that the design process remains guided by sound principles and expertise.

Balancing Design Integrity with Agile Constraints

  • Lesson Learned: I've discovered that achieving a balance between design integrity and agile time and budget constraints is an ongoing process. Flexibility and adaptability are essential, and sometimes, compromises must be made to meet project goals without sacrificing the core design vision.

Designing in Close Collaboration with Engineering

  • Lesson Learned: Working closely with the development team has taught me the importance of clear and consistent communication. Understanding ways to design with a developer’s mindset and involving them early in the design process leads to better collaboration, smoother transitions, and pixel perfect handoffs.

Creating a Customized Design Process

  • Lesson Learned: When working in an environment without an established design process, I've come to understand that creating my own process can be an empowering and effective solution. Flexibility in adapting to project needs and being open to feedback are key components of success in such situations.

Embracing Imperfection as Part of the Design Journey

  • Lesson Learned: I've learned that design is an iterative process, and no design is perfect from the beginning. Embracing this imperfection as a natural part of the creative journey allows for ongoing refinement and improvement, leading to more robust and impactful final designs.