Starting our design journey with Eversports.
Three months, one system
In August, I took on a remarkable task: creating the “Eversport Design System” for Eversports.com.
Over the course of three months, I dedicated myself to crafting the “Eversport Design System”, a project that aimed to redefine the design landscape of Eversports.com. It was led by their Head of Design, but I was the only person in the file, designing the components and style guides while collaborating with developers from multiple teams and the CTO.
Into the design world: discovering hits and misses
I spent a lot of time looking at famous design systems like Material Design, iOS, Atomic Design, Morph Design System, MUI, and IBM's offerings. I learned a lot from each. I also looked at what competitors were doing and noticed some common problems.
Six mature systems studied side by side, what each one solves, and what each one makes harder.
From competitor analysis, I noticed that there were several usability problems repeating across the category.
I recognized the need for clearly defined colors for different button states, ensuring they were distinct from elements like chips and tags.
The goal was not just to emulate but to refine, ensuring Eversports stood out with its impeccable usability and design.
Key design innovations
Four decisionsFrom Lato to Figtree, and a corner radius with a reason
We decided to switch from the Lato typeface to Figtree for SEO optimization: faster loading speed, because it reduces the number of fonts that need to be loaded, and more design flexibility, through responsive typography that adapts to different screen sizes.
Additionally, we refined the corner radius, shifting it from a ‘fully rounded’ to ‘eight px.’ These adjustments were made to enhance design consistency across our brand's visual elements and overall design aesthetics.
Horizontal in, vertical out
To enhance usability, we transformed the horizontal two-section search bar into a vertical, expandable, two-separated search bar for “location” and “sport type.”
Readable for people, legible for crawlers
For card designs, we focused on enhancing both Google SEO, user readability, and responsive design. Clear titles and layouts were prioritized, and cards were made adaptable for any size and crawler-bot friendly.
One set, many outcomes
I used nested components, empowering designers to easily customize designs to meet their unique requirements. For example: using the same component set, they can confidently tailor a table or menu to meet their needs.
These design choices were instrumental in creating a design system that not only met the core objective of consistency and faster implementation but also addressed specific user and SEO considerations.
Handing it over, twice
From a design perspective
The design system was made accessible on the web.
This feature empowered developers to access detailed design specifications and even utilize plugins like “Figma to Tailwind CSS” for efficient code conversion.
I created in-file documentation within Figma, titled ‘Documentation.’ It showcases the current design components. The other one is ‘Compare changes,’ which includes a live component, any changes made by designers will automatically update.
From a developer's perspective
A “storybook” was crafted as a solution to assist developers in the implementation phase. This interactive tool presented components in isolation, facilitating an understanding of each element's behavior and properties.
What changed after
The transition to a variable font had a tangible impact, notably boosting SEO performance. With a comprehensive design library at their fingertips, designers found a newfound sense of efficiency. They could quickly implement ideas, collaborate extensively with the team, and spend more time on user testing.
“As the Head of Design at Eversports.com, I've had the privilege to witness Ghazaleh's exemplary work ethic and unwavering commitment to excellence firsthand. When the task at hand was to create our Design System on Figma, she not only embraced the challenge but also surpassed all our expectations. Ghazaleh's knack for swiftly adopting and implementing cutting-edge features, such as Variables and Tokens, almost instantaneously as they were rolled out, is a testament to her dedication to staying ahead of the curve and her profound understanding of the design landscape. But her technical prowess is just one facet of her brilliance. Her ability to seamlessly collaborate with our team, developers, and stakeholders, ensuring alignment at every step, made the process smooth, efficient, and truly a masterclass in teamwork and communication. In Ghazaleh, we didn't just find a Design System designer; we found a visionary who could bridge the gap between aesthetics and functionality, ensuring that our brand's voice was both clear and compelling. To anyone considering Ghazaleh for a role or project, know that you're not just getting a designer, you're gaining a game-changer. Her contribution to Eversports.com has been invaluable, and I have no doubt that she will continue to shine and make a remarkable impact wherever she goes.”
A journey forward
Improved design consistency, SEO, and efficiency.
A rewarding experience with Eversports' skilled team.
Emphasis on merging looks and practicality.
The journey was transformative, with endless learning opportunities.