Web design system
Background
EasyPark has numerous web products but all are using different components and guidelines, creating inconsistency and inefficiency. After good progress had been made with the app design system, we were ready to start work on the web side.
Outcomes
When I left, the project was still ongoing but early implementation of color tokens and several components improved UI consistent and reduced front-end development time for our B2B product.
Role and collaborators
Worked with the design system team and other web designers to define the visual direction of the design system and ideate on components. Also collaborated with product teams and B2B marketing and sales colleagues to hold workshops and get buy-in.
Audience
Internal teams building web products
Jump to
Problem
Inconsistency and inefficiency
EasyPark’s web products had inconsistent UI and UX patterns, as each team customized components differently. This was a problem because it created design debt, slowed development, and made the user experience inconsistent.
Initial solution
I started to address this problem by building a component library. The goal being to consolidate the wide variety of components into a refined set and to standardize the typography, colors, and spacing. I also documented some best practices for handling errors and UI interactions to support developers.
While this did help improve consistency and reduce design debt, challenges remained as I had limited time and there was no formal process for adoption so development updates were slow.
Discovery
Defining the visual direction
The design system team and I spent a good amount of time doing research on the visual identity and foundational elements of the web design system. Some key research I was involved with was:
Building a moodboard and gathering inspiration – We looked at web design systems and UIs that we liked and brought together different brand elements and guidelines to ensure that the visual identity was cohesive with the app and marketing websites.
Cataloging all EasyPark UI components – We put together an inventory of components across all of EasyPark’s web platforms, helping us understand existing variations and what needed consolidation.
Analyzing screen size data – Something I worked on independantly was data analysis from our B2B self-service platform, revealing a mix of standard office monitors, ultra-wide screens, and significant mobile usage. These insights shaped how we approached responsive design and component scalability.
Collaboration
Stakeholder alignment
While the design system team focused on defining the foundational elements and components, I started gathering early internal feedback and raising awareness of coming changes to our B2B web product.
This involved organizing several workshops with teams working in the B2B space:
Marketing – With a sizable UI change coming, I felt it necessary to align with marketing as they will be integral to raising awareness with customers about what's coming. They also utilizes UI screenshots in a lot of promotional material and guidance articles.
Sales – They often discuss our B2B self-service platform with clients and should be kept updated with changes being made. Also, they have a good understand of how customers feel about the current platform and can help provide insight on how customers might react.
Product and engineering – I helped co-ordinate a broader workshop to introduce product teams in the B2B space to the design system and highlight the benefits it would bring to development.
Testing
Early concept testing
I took conceptual and finish components and tested them within EasyPark’s B2B platform using real data. This allowed us to validate how components worked in practice and explore alternatives. For example, tables were historically used for all data-heavy pages, but we experimented replacing them with cards or multi-line lists on narrower screens where users prioritized search over scanning large datasets.
Internal feedback
Once we had a number of components refined, I created a prototype of the B2B self-service platform to start gathering internal feedback, first from designers, then from broader stakeholders.
We wanted to use a fill for the tables and initially we used a pale grey fill on white background, but we switched it around after a few people agreed with this comment:
Customer feedback
After making a few initial changes, I collaborated with user research to get some early feedback from existing B2B customers. Our goal was to assess whether users could navigate key workflows with ease and to identify usability pain points.
Feedback from our first tester showed that:
This feedback reassured me that the new design was intuitive, allowing users to focus on their tasks rather than struggling with navigation.
Outcomes
The impact so far
Though the design system was still in progress when I left, its early adoption was already benefiting the B2B self-service platform team:
Reduced story points – We needed to make it possible to switch between different brand color palettes and implementing the design system's color tokens made that project much quicker for the developers.
Faster UI updates – Buttons and text fields from the design system were implemented in a few places and with the ownership of improvements on the design system team, updates could come without the new for the B2B team to shift their focus from elsewhere.
Next steps
The next phase would focus on building additional components and increasing adoption across B2B teams. By continuing to collaborate with product and engineering, the design system could become a fully integrated part of EasyPark’s web ecosystem, ensuring long-term consistency and efficiency.
Based on outcomes from the app design system, we were confident that it would provide huge efficiency benefits for numerous teams across several web products
Learnings
Recruitment B2B testers is tricky
Knowing we needed to test with customers across different markets, we initially worked with Sales to identify and recruit ideal participants, but limited time and scheduling conflicts meant progress was slow.
Just before I left we sought to expand our pool and I felt that I good way to do this could be through using analytical data to identify a much larger group of frequent users. With the help of colleagues from user research and data analytics, we started building a list of potential testing participants to reach out to.
