AVANT WEB DESIGN SYSTEM
Improving Avant's design system to create dynamic components for website
ROLE
Lead designer
TEAM
Collaborated with Sophie Erskine
TYPE OF DESIGN
UX/UI, development
TIMELINE
2023
PROJECTED GOALS
Evaluate and streamline existing website content types to create 10 dynamic and functional components to be used sitewide.
LIVE SITE
PROJECTED RESULTS
- Ongoing—10 new components created and ready to be prototyped and tested.
- Streamlined components will facilitate a smoother development process for developers.
- Updated typography and grid systems will assist developers in ensuring a consistent visual identity and functionality throughout the entire website.
- Avant will transition from static individual pages to a dynamic and unified website experience.
Overview
Tapestry Avant Design system encompasses three distinct areas: the core system, website design system, and email design system. One year after initial launch of the website, the creative team began phase two of the design system evolution.
The core system includes all UX/UI functionality elements tailored for the Avant mobile app experience. While many UI elements from the core system are utilized in the web design system, the latter features unique use cases that necessitate its own separate mini-system.
KEY INSIGHTS
Streamlining all existing content types into dynamic components will aid in across-site consistency and brand recognition.
How can we use Figma to aid in the design system build to alleviate file to live site errors?
Typography adjustments can highly elevate the visual identity and tone of the brand on the website.
HELPFUL INFO
There's a discrepancy between the interpretation of the design system from Figma to the live website. Streamlining and documenting the process will enable developers to efficiently build the website, allowing the design team to produce pages without the need for multiple tech tickets for minor fixes.
Avant uses Contentful management system to host their website. Real time collaboration between designers and developers is not always possible—which leads to breakdowns in what is needed and what is actually produced/ launched.
Usability testing has not been prioritized for the website, nor have any assessments been conducted. However, internal stakeholders, including the marketing design and product design teams, have conducted workshops to identify necessary improvements despite the absence of demographic feedback.
Assessment & Challenge
THE PROBLEM
- One year after the website's initial launch, the design team conducted an assessment of the live website and initiated changes to improve its appearance and functionality. They found that many components and content types were inconsistent and caused difficulty in readability from page to page.
- It became necessary to adjust aspects of the core Tapestry UI system, originally designed for the mobile app experience, to better suit the requirements of the web design product. This primarily involved modifications in typography, grid systems, and transitioning most content types into components.
- Internally, standardization of Figma files was necessary to benefit various page templates. This involved ensuring that all files were set up with constraints to facilitate dynamic-sized user interfaces.
KEY FINDINGS
- Typography poses readability challenges.
- The photography based components lack integration into an auto-layout grid system, resulting in inconsistency across pages.
- The pattern UI element is cumbersome for developers to code and is currently designed as images. Future plans involve moving away from this approach.
- Padding disparities between Figma files and the live site suggest a communication gap or misinterpretation by developers. Addressing this is a crucial next step in enhancing our collaboration.
COMPLETE TRANSFORMATION
After assessment, the number of content types was limited to 10 components. Content types that were difficult to build in Figma were placed on a low priority list because I concluded that if they were too time-consuming to build, they would likely be challenging for the development team to implement accurately. I then explored whether these components could be adapted into a more flexible design or if they were necessary at all.
One of the main challenging components was the stats stripe block. While this component appeared visually appealing to the user, it was clunky and unresponsive. Consequently, this component has been transformed into a banner, which improves page height, clarity, and visibility by allowing it to be placed closer to the top of the page.
Proposed components
HERO
The hero section will typically feature a 2:3 ratio lockup. However, when the text block is placed on the pattern, it requires a white background box for readability. This has led to some challenges in replication, which we anticipate will be addressed with our proposed technical changes.
INFO CARD
This is the most frequently utilized content block. The image above illustrates a use case designed for desktop, mobile, and tablet screen sizes. Below is the expanded info card library.
BLOCK CARD
The current block cards lack responsiveness and frequently break. We propose a simplified card design, featuring transparent backgrounds and the addition of category bubbles for enhanced visual clarity.
BLOCK CARD GRID
This is the second most frequently used content type. We incorporate these at least once on any category page to highlight our product offerings and the process for users to obtain them. They required minimal adjustments, primarily focusing on UI enhancements.
STATS GRID
I aim to phase out the stats grid and stats strip content types due to their clunky and challenging nature, even in Figma. As mentioned earlier, we successfully redesigned the stats stripe into a simpler, more functional element. However, further exploration is needed for the stats grid.
OUTLIERS
Through ongoing assessment of potential use cases of these content types, they may either transition into components or remain unchanged. The most developed content types in this category are the disclosure and FAQs, which appears on almost every page with a product offering.
Info cards
Our findings revealed that information cards were the most frequently used content type site-wide, leading us to prioritize them as the first focus in the design system lift.
All components have ability to left or right align images. In cases no image is present, the text and CTA can left or right align.
2:3 RATIO
1:1 RATIO
1 COLUMN
UI System Changes
GRID SYSTEM
This item is still ongoing, as we continue to assess screen sizes and the overall big picture. With new type adjustments, layouts, and SEO content strategies, we are still determining the optimal grid alignment for pages site-wide.
However, the approach above has proven to be the most effective solution thus far.
Most components adhere to a 1:1 ratio and 2:3 ratio format based on these parameters.
TYPOGRAPHY
The original website launch featured the use of small caps and all caps headline. This poses some legibility and functionality issues:
On small screens, the headlines appear bulky and overly assertive, contradicting the friendly tone we aim to convey.
The outline stroke, which is not native to the Cera Pro font family, was manually constructed by the development team. However, this implementation often breaks, leading to visible misalignments of strokes in practice.
As a result, we've opted to transition to a type treatment that utilizes sentence case usage. The rounded letterforms offer a more inviting feel and better align with Avant's mission of guiding customers on their financial journeys.
COLOR APPLICATION
With the change in color application, we conducted accessibility testing to determine suitable color combinations for the headline variants and backgrounds.
Additionally, the gray was adjusted to a lighter shade to reduce visual weight on the page. Dark colors combined with heavy information can lead to a tiring reading experience.
Furthermore, headline pairings featuring the bold blue are not viable on the dark navy background.
Example of color variations on an info card
Lessons
The UI/UX decision-making process during this project was intriguing, as feedback solely came from other designers. Unfortunately, the company did not prioritize the web design product, and therefore, implementing these changes is not on the roadmap.
Nevertheless, I strongly believe that these minor adjustments will alleviate a significant amount of frustration internally and for the user. There is a pressing need to strike a balance between the amount of information and how it is visualized on each live page.
Pitching new proposed components to the development team will require a significant amount of time. Therefore, ideally, changes will be rolled out in phases to accommodate time and capacity constraints.
Ultimately, I envision the permanent adoption of design tokens for developers, enabling them to easily manage this material. At the time of this project, the mobile app team had started exploring this possibility to determine its feasibility within the company.