A clean new modular structure for Silicon Labs

Silicon Labs was looking to refresh the Solutions section of their site. I recommended an approach that wasn't just about style, but was also mindful of guiding users intentionally through content to drive them to desired actions.

Basis

The basis of this approach was to weave users through both emotional- and rational-tailored components.


Wireframes

I began by categorizing components into three discrete categories:

  • Storytelling: Lead the narrative of compelling propositions and selling points.
  • Details & Depth: Add depth and details to the narrative.
  • Tables & Data: Provide hard specs and data

As I wireframed each component, I ensured they proportionally fit the goals of each category.

Components

I translated wireframes to visual designs including realistic copy examples instead of lorem ipsum to more truly reveal how the component would feel like.

Desktop

Configurations to color and style were added to bolster how each component could be utilized.


Mobile

Templates

Example templates showed how the components could work together.


Outcome

Originally intended as a redesign for the Solutions section of the site, Silicon Labs eventually applied it site-wide as a full site redesign.