B2B Website: Component Design
Creating a new card component to simplify content and decrease page abandonment
Overview
Client:
Siemens Digital Industry Software
Team
Myself - UI/UX Designer
1 Product Marketing Manager
1 UX Design Manager
1 Front End Developer
As part of an enterprise site redesign, content strategy was examined and targeted for improvements. One way we tackled this was by expanding our component library.
Problems
Stakeholders said:
Some site pages were long and overcrowded with the current card component, which contributed to page abandonment by customers
Challenges
The current components in our design system didn't offer alternatives to consolidate lengthy card content effectively.
The Process
I interviewed stakeholders to flesh out more of the desired customer experience benefits and got to work iterating on a new component.
Problem page with with excessive card components from the previous design
Solution
With only one background image for 6 cards, a less cluttered appearance was achieved. It also allowed the 6 options into be grouped into a software theme.
Hover states interaction of the "Call to action"card component
Results
The stakeholder requirements were successfully achieved and received praise. The new content design option allowed for a way to cluster a lot of information into an alternative flow that was easier to read.
Before updates
After updates
Web page after updates, with new card component
Web page before updates, with old cards
Retrospective
-
If time had permitted before site launch, I would've iterated more, or pursued a completely new design. The engineering and branding constraints made the final execution less than perfect functionally and visually.
-
The mobile version was even less graceful than the desktop version when the image was broken up and stacked into a column
-
A future mobile iteration would've had a single complete image at the top, with 6 CTAs in a list below.
Mobile version of component
"
FY21 was such a big year for us... I'd like to give kudos for the rebranding of our global marketing sites... We've been working with the Teamcenter product team to better understand the digital journey.
I'd like to give highlights to Jason Rivera for his work with the team to re-imagine how we tell stories to customers visually.
Heather Simon
VP Digital Customer Experience
Siemens Digital Industries Software